for循环遍历多级json数据 | 张先生的网络日志

遍历很简单，for循环嵌套就可以，需要注意的是输出到html时要一次输出完，不然就会被浏览器自动加入闭合的DIV导致样式出错。

JSON对象与字符串的转换：

1.jQuery插件支持的方式：

$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象

1	$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象

2.浏览器支持的转换方式(Firefox，chrome，opera，safari，ie9，ie8)等浏览器：

JSON.parse(jsonstr); //可以将json字符串转换成json对象 
JSON.stringify(jsonobj); //可以将json对象转换成json对符串

1 2	JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON.stringify(jsonobj); //可以将json对象转换成json对符串

3.Javascript支持的转换方式：

eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号

1	eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号

4.JSON官方的转换方式：

http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法，可以在https://github.com/douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。

JSON:

{
  "rows":[
    {
      "class":"课程1",
      "course":["舞蹈班","美术班","跆拳道","钢琴课","素描班"],
      "video":["课件1","课件2","课件3"]
    },
    {
      "class":"课程2",
      "course":["舞蹈班","美术班","跆拳道","钢琴课","素描班"],
      "video":["课件a","课件b","课件c"]
    }
  ]
}

{

"rows":[

{

"class":"课程1",

"course":["舞蹈班","美术班","跆拳道","钢琴课","素描班"],

"video":["课件1","课件2","课件3"]

{

"class":"课程2",

"course":["舞蹈班","美术班","跆拳道","钢琴课","素描班"],

"video":["课件a","课件b","课件c"]

}

]

}

JavaScript：

$.ajax({
            url:"date.json",
            method:"GET",
            dataType:"JSON",
            success:function(res){
                rows = res.rows;
                for(var i=0;i<rows.length;i++) {
                    var str1 = '';
                    var str2 = "";
                    var str3 = "";
                    str1 += '<div class="border fl kc">';
                    str1 += rows[i].class;
                    str1 += '</div>';
                    var course = rows[i].course;
                    var video = rows[i].video;
                    for(var v=0;v<course.length;v++){
                        str2 += '<div class="kc-li">'+course[v]+'</div>';
                    }
                    for(var c=0;c<video.length;c++){
                        str3 += '<div class="kc-li">'+video[c]+'</div>';
                    }
                    var HTML = '';
                    HTML += '<div class="mt20 border">';
                    HTML += str1;
                    HTML += '<div class="fl kc-box">'+str2+ '</div>';
                    HTML += '<div class="fl">'+str3+ '</div>';
                    HTML += '<div class="clearfix"></div>';
                    HTML += '</div>';
                    HTML += '</div>';
                    $('#box').append(HTML);
                }
            }
        });

$.ajax({

url:"date.json",

method:"GET",

dataType:"JSON",

success:function(res){

rows = res.rows;

for(var i=0;i<rows.length;i++) {

var str1 = '';

var str2 = "";

var str3 = "";

str1 += '<div class="border fl kc">';

str1 += rows[i].class;

str1 += '</div>';

var course = rows[i].course;

var video = rows[i].video;

for(var v=0;v<course.length;v++){

str2 += '<div class="kc-li">'+course[v]+'</div>';

}

for(var c=0;c<video.length;c++){

str3 += '<div class="kc-li">'+video[c]+'</div>';

}

var HTML = '';

HTML += '<div class="mt20 border">';

HTML += str1;

HTML += '<div class="fl kc-box">'+str2+ '</div>';

HTML += '<div class="fl">'+str3+ '</div>';

HTML += '<div class="clearfix"></div>';

HTML += '</div>';

$('#box').append(HTML);

}

});

javascript 2018.5.20 作者：张先生 3.7k 0 0

相关文章

热门文章

文章评论暂无评论

发表评论
取消

javascript 2018.5.20 作者：张先生 3.7k 0 0

相关文章

热门文章

文章评论 暂无评论

发表评论 取消

文章评论暂无评论

发表评论
取消