Question

我在＆＃34; y＆＃34;上有以下JSON结构位置：

{"results":[{
    "a_id":4529245,
    "type":"a",
    "name":"HONDA"
},{
    "a_id":1234567,
    "type":"l",
    "name":"Autos Marron"
}]}

在我的JS文档中，我有以下代码：

    var i;
    i=0;
    $.getJSON('/document/location', function( data ) {

        console.log(data);

        $.each( data, function( key, val ) {

            var contentString = '<span>'+
            val[i].name +
            '</span>';

            $('#info').append(contentString);

            i++;
        });
    });

我在网上搜索，我知道我可以做 val.name ，并且可以打印每个＆＃34; name＆＃34;我的JSON文档中的变量。

但是我必须使用递增变量（i）来打印仅第一个变量，它等于＆＃34; HONDA＆＃34;使用 val [i] .name

我想打印名为name的所有变量。我做错了什么？

提前致谢

Answer 1

您需要循环data.results，因为这是您要访问的数组：

Code

$.getJSON('/document/location', function( data ) {

    console.log(data);

    $.each( data.results, function(key,val ) {

        var contentString = '<span>'+
        val.name +
        '</span>';

        $('#info').append(contentString);

    });
});

**在循环访问数据的代码中，您得到：

val as

[{
            "a_id":4529245,
            "type":"a",
            "name":"HONDA"
        },{
            "a_id":1234567,
            "type":"l",
            "name":"Autos Marron"
        }]

并键入results

现在，由于val是一个显示名称的数组，您必须执行data[index].name

Edit:

这是有效的fiddle

Answer 2

为什么不制作一个简单的CCRef.h循环，而不是使用for。

试试这个：

$.each

Answer 3

试试这个：

$.each( data.results, function( val ) { // change data to data.results, and you are looping through an array so there is no key; only a val

    var contentString = '<span>'+
    val.name +
    '</span>';

    $('#info').append(contentString);

    // i++; You don't need i at all
});

Answer 4

好的..首先如果全部，如果你在其他文件夹中有.json个文件，那么指定它的路径：

说，您的目录结构如下：

|---data
    |---test.json
|---js
|---css
|---index.html

然后，您的代码如下：

$.getJSON("data/test.json", function(json) {
    console.log(json); // this will show the info it in firebug console

    var tempData = "";
    $.each( json.results, function(index, element) {
        tempData  += '<span>'+element.name +'</span>';
    });
    $('#info').html(tempData);
});

注意：为循环中的每个元素遍历DOM并不是一个好习惯。就像我在其他答案中看到的那样假设你的数组中有100个元素，那么它一次只能追踪1个数据，它无价值地遍历DOM 100次。因此，您可以优化此选项以使变量保持数据以html格式显示，并在循环遍历数组后，根据需要使用.append("")或.html("")。希望你明白了..

Answer 5

具有以下结构

{
    "results": [
        {
            "a_id": 4529245,
            "type": "a",
            "name": "HONDA"
        },
        {
            "a_id": 1234567,
            "type": "l",
            "name": "Autos Marron"
        }
    ]
}

要获得更好的字符串效果，请尝试

$.getJSON('/document/location', function( data ) {

    var buffer = [];

    $.each( data.results, function( index, entry )
    {
        buffer.push( '<span>', entry.name, '</span>' );
    });

    $('#info').append( buffer.join('') );
});

对于具有更好性能的安全代码（防止注射），请尝试

$.getJSON('/document/location', function( data ) {

    var box = document.createDocumentFragment();

    $.each( data.results, function( index, entry )
    {
        $( '<span>' ).text( entry.name ).appendTo( box );
    });

    $('#info').append( box );
});

在fiddle

中测试安全且不安全的代码

jQuery：循环遍历JSON文档

5 个答案: