来自外部JSON文件或站点的jQuery getJSON

时间:2011-11-16 19:00:13

标签: jquery arrays json getjson

我有一个外部JSON文件(data.json),并希望从该文件中的特定数组中获取数据并从中创建一个UI。 如何使用此代码从“标记”中获取数据?

代码:

$.getJSON('data.json', function(data) {
    var items = [];

$.each(data, function(i, item) {
    items.push('<li><p>' + item.name + '</p><p>' + item.image + '</p><p>' + item.link + '</p></li>');
});

$('<ul/>', {
    'class': 'json_populated',
    html: items.join('')
    }).appendTo('.popover_content');
});

data.json文件:

 { "lastUpdated":"12:57",
   "filterOut":[

            ],
    "markers":[
        {"name" : "blah", "image" : "images/logos/image1.png", "link" : "/link1"},
        {"name" : "blah 2", "image" : "images/logos/image2.png", "link" : "/link2"},
        {"name" : "blah 3", "image" : "images/logos/image3.png", "link" : "/link3"}

    ]}

如果我要从像这样的外部网站抓取JSON,它也是同样的原则

$.getJSON('http://website.co.uk/idname/49482/', function(data) {
    var items = [];

$.each(data, function(i, item) {
    items.push('<li><p>' + item.name + '</p><p>' + item.image + '</p><p>' + item.link + '</p></li>');
});

$('<ul/>', {
    'class': 'json_populated',
    html: items.join('')
    }).appendTo('.popover_content');
});

我认为即将到来,但我们非常感谢任何帮助。

1 个答案:

答案 0 :(得分:3)

您可以将结果用作对象。

$.getJSON('data.json', function(data) {
    var items = [];
$.each(data.markers, function(i, item) {
    items.push('<li><p>' + item.name + '</p><p>' + item.image + '</p><p>' + item.link + '</p></li>');
});
$('<ul/>', {
    'class': 'json_populated',
    html: items.join('')
    }).appendTo('.popover_content');
});
});