Question

这是我的 test.json 文件：

[{"id":"12","url":"http:\/\/localhost\/test\/1\/images\/pic\/3.jpg"},
{"id":"11","url":"http:\/\/localhost\/test\/1\/images\/pic\/1.png"},
{"id":"10","url":"http:\/\/localhost\/test\/1\/images\/pic\/2.png"}]

我想使用jQuery在强调文本上打印它。

<div>12<img src="http://localhost/test/1/images/pic/3jpg" /></div>
<div>11<img src="http://localhost/test/1/images/pic/1jpg" /></div>
<div>10<img src="http://localhost/test/1/images/pic/2jpg" /></div>

Answer 1

检查下面的有效JSON并尝试重新格式化你的，你也可以找到示例，告诉你如何使用for in解析JSON对象来实现所需的结果。

希望这有帮助。

var test_json = 
[
   {"id":"12","url":"http:\/\/localhost\/test\/1\/images\/pic\/3.jpg"},
   {"id":"11","url":"http:\/\/localhost\/test\/1\/images\/pic\/1.png"},
   {"id":"10","url":"http:\/\/localhost\/test\/1\/images\/pic\/2.png"}
];

for ( var key in test_json )
{
    console.log('<div>'+test_json[key].id+'<img src="'+test_json[key].url+'" /></div>');
}

Answer 2

如果您想从服务器获取json而不是将其硬编码到javascript中，请使用jquery的.getJSON()方法（see docs）。然后使用.each()方法（see docs）迭代响应数据。

$.getJSON(
    'test.json',
    function(data) {
        $.each(data, function(i, obj) {
            el = $('<div>' + obj['id'] + '<img src="'+ obj['url'] +'" /></div>');
            $('body').append(el);
        });
    }
);

使用Jquery获取JSON属性

2 个答案: