如何使用json数据进行循环?

时间:2016-04-20 11:32:36

标签: javascript jquery

我想用hson标题,链接,某些addvertisment的描述显示循环。这里你有json模板有两个添加,实际上我的json有10-20 id。我在下面的代码中做错了什么?

变量中的JSON

var text = '{  
"wynik":{  
  "wynikOk":true,
  "kodWykonania":0,
  "kodBledu":null,
  "komunikat":null,
  "dodatkoweInfo":null,
  "userData":null
},
"czasWykonania":null,
"addvertisments":[  
  {  
     "id":721,
     "status":1,
     "title":"Tester",
     "link":"#",
     "description":"Aliquam quis erat vitae lectus blandit auctor. Cras placerat sapien a nibh ultricies viverra. Duis nulla massa, pulvinar et lacinia vitae, congue non dolor. Sed pellentesque ut augue eu condimentum. Cras elit nisi, rutrum eu enim at, varius consectetur leo. Maecenas a bibendum nibh, sed sagittis velit. Donec vehicula purus vel orci pretium auctor. Mauris vestibulum suscipit nulla mollis ornare.",
     "dtwo":"2016/03/02",
     "idAddType":{  
        "id":2,
        "name":"Testers"
     },
     "regions":[  
        {  
           "id":12,
           "name":"region_1"
        }
     ]
  },
  {  
     "id":74,
     "status":1,
     "title":"Tester 2",
     "link":"#",
     "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in risus eu velit laoreet vehicula. Aliquam eleifend vitae velit in suscipit. Aenean elementum, sapien sed consectetur aliquet, massa sem fringilla massa, non vulputate velit erat efficitur nibh. Cras quis libero eu lacus interdum hendrerit nec sed eros. Aliquam imperdiet rutrum ipsum a finibus. Phasellus dolor nunc, convallis sit amet nulla ut, sollicitudin ultricies magna. Fusce id nunc felis. Etiam faucibus finibus semper. Fusce semper quam nec tellus efficitur, vel mattis magna finibus. Sed felis neque, aliquam sed lectus eget, ultricies pretium libero. Duis ut posuere nisi.",
     "dtwo":"2016/02/12",
     "idAddType":{  
        "id":3,
        "name":"Prorgrammers"
     },
     "regions":[  
        {  
           "id":15,
           "name":"region_2"
        }
     ]
  },




 ]
}';

我的功能

myFunction(text);


function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.length; i++) {
    out += '<li><div><span>' + arr[i].title + '</span></div><div><p>' + arr[i].description + '</p><div><a  href=' + arr[i].link + '>apply</a></div></li>';
}
document.getElementById("id01").innerHTML = out;
}

小提琴: https://jsfiddle.net/qut10dxw/

4 个答案:

答案 0 :(得分:2)

您可以先使用JSON.parse()解析它,并仅将该数组作为该函数的参数。

&#13;
&#13;
function myFunction(arr) {
    var out = "";
    var i;
    for (i = 0; i < arr.length; i++) {
        out += '<li><div><span>' + arr[i].title + '</span></div><div><p>' + arr[i].description + '</p><div><a  href=' + arr[i].link + '>apply</a></div></li>';
    }
    document.getElementById("id01").innerHTML = out;
}

var text = '{ "wynik": { "wynikOk": true, "kodWykonania": 0, "kodBledu": null, "komunikat": null, "dodatkoweInfo": null, "userData": null }, "czasWykonania": null, "addvertisments": [{ "id": 721, "status": 1, "title": "Tester", "link": "#", "description": "Aliquam quis erat vitae lectus blandit auctor. Cras placerat sapien a nibh ultricies viverra. Duis nulla massa, pulvinar et lacinia vitae, congue non dolor. Sed pellentesque ut augue eu condimentum. Cras elit nisi, rutrum eu enim at, varius consectetur leo. Maecenas a bibendum nibh, sed sagittis velit. Donec vehicula purus vel orci pretium auctor. Mauris vestibulum suscipit nulla mollis ornare.", "dtwo": "2016/03/02", "idAddType": { "id": 2, "name": "Testers" }, "regions": [{ "id": 12, "name": "region_1" }] }, { "id": 74, "status": 1, "title": "Tester 2", "link": "#", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in risus eu velit laoreet vehicula. Aliquam eleifend vitae velit in suscipit. Aenean elementum, sapien sed consectetur aliquet, massa sem fringilla massa, non vulputate velit erat efficitur nibh. Cras quis libero eu lacus interdum hendrerit nec sed eros. Aliquam imperdiet rutrum ipsum a finibus. Phasellus dolor nunc, convallis sit amet nulla ut, sollicitudin ultricies magna. Fusce id nunc felis. Etiam faucibus finibus semper. Fusce semper quam nec tellus efficitur, vel mattis magna finibus. Sed felis neque, aliquam sed lectus eget, ultricies pretium libero. Duis ut posuere nisi.", "dtwo": "2016/02/12", "idAddType": { "id": 3, "name": "Prorgrammers" }, "regions": [{ "id": 15, "name": "region_2" }] }] }';
myFunction(JSON.parse(text).addvertisments);
&#13;
<div id="id01"></div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您应该使用

调用您的函数
text['addvertisments'] 

然后一切都会好的。

您可以替换

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

for (var i in arr){...}

答案 2 :(得分:0)

我认为您的json字符串不正确: 试试这个字符串:

var text = "{
    "wynik": {
        "wynikOk": true,
        "kodWykonania": 0,
        "kodBledu": null,
        "komunikat": null,
        "dodatkoweInfo": null,
        "userData": null
    },
    "czasWykonania": null,
    "addvertisments": [{
        "id": 721,
        "status": 1,
        "title": "Tester",
        "link": "#",
        "description": "Aliquam quis erat vitae lectus blandit auctor. Cras placerat sapien a nibh ultricies viverra. Duis nulla massa, pulvinar et lacinia vitae, congue non dolor. Sed pellentesque ut augue eu condimentum. Cras elit nisi, rutrum eu enim at, varius consectetur leo. Maecenas a bibendum nibh, sed sagittis velit. Donec vehicula purus vel orci pretium auctor. Mauris vestibulum suscipit nulla mollis ornare.",
        "dtwo": "2016/03/02",
        "idAddType": {
            "id": 2,
            "name": "Testers"
        },
        "regions": [{
            "id": 12,
            "name": "region_1"
        }]
    }, {
        "id": 74,
        "status": 1,
        "title": "Tester 2",
        "link": "#",
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in risus eu velit laoreet vehicula. Aliquam eleifend vitae velit in suscipit. Aenean elementum, sapien sed consectetur aliquet, massa sem fringilla massa, non vulputate velit erat efficitur nibh. Cras quis libero eu lacus interdum hendrerit nec sed eros. Aliquam imperdiet rutrum ipsum a finibus. Phasellus dolor nunc, convallis sit amet nulla ut, sollicitudin ultricies magna. Fusce id nunc felis. Etiam faucibus finibus semper. Fusce semper quam nec tellus efficitur, vel mattis magna finibus. Sed felis neque, aliquam sed lectus eget, ultricies pretium libero. Duis ut posuere nisi.",
        "dtwo": "2016/02/12",
        "idAddType": {
            "id": 3,
            "name": "Prorgrammers"
        },
        "regions": [{
            "id": 15,
            "name": "region_2"
        }]
    }]

}";

答案 3 :(得分:0)

我认为你缺少解析你的JSON,因为text变量只是一个字符串。而且您还必须获得JSON的addvertisments属性:

function myFunction(text) {
    var arr = JSON.parse(text).addvertisments;
    var out = "";
    var i;

    for(i = 0; i < arr.length; i++) {
        out += '<li><div><span>' + arr[i].title + '</span></div><div><p>' + arr[i].description + '</p><div><a  href=' + arr[i].link + '>apply</a></div></li>';
    }
    document.getElementById("id01").innerHTML = out;
}