Javascript jQuery：循环浏览JSON文档

我在“y”位置有以下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++;
        });
    });

vari；
i=0；
$.getJSON（'/document/location'，函数（数据）{
控制台日志（数据）；
$。每个（数据、函数（键、值）{
var contentString=''+
val[i].名称+
'';
$（'#info'）.append（contentString）；
i++；
});
});

我在网上搜索，我读到我可以做val.name，并且可以打印JSON文档中的每个“name”变量

但是我必须使用递增变量（I），以便仅打印使用val[I]等于“HONDA”的第一个变量。name

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

提前感谢

试试这个：

$.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
});

$.each（data.results，function（val）{//将数据更改为data.results，然后您在数组中循环，因此没有键；只有一个val
var contentString=''+
val.name+
'';
$（'#info'）.append（contentString）；
//i++；你根本不需要我
});

试试这个：

$.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
});

$.each（data.results，function（val）{//将数据更改为data.results，然后您在数组中循环，因此没有键；只有一个val
var contentString=''+
val.name+
'';
$（'#info'）.append（contentString）；
//i++；你根本不需要我
});

您需要循环

数据。结果

，因为这是您要访问的数组：

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是一个显示名称的数组，所以必须执行

data[index].name

编辑：

---

这里正在工作

您需要循环

数据。结果

，因为这是您要访问的数组：

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是一个显示名称的数组，所以必须执行

data[index].name

编辑：

---

这里正在运行

为什么不为循环创建一个简单的

，而不是使用
$。每个

试试这个：

for(int i=0;i<data.length;i++){
    var contentString = '<span>'+
    data[i].name +
    '</span>';    
}

for（int i=0；i为什么不做一个简单的
for
循环，而不是使用
$。每个

试试这个：

for(int i=0;i<data.length;i++){
    var contentString = '<span>'+
    data[i].name +
    '</span>';    
}

for（int i=0；iOk..首先，如果所有，如果您在其他文件夹中有
.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);
});

$.getJSON（“data/test.json”，函数（json）{
log（json）；//这将在firebug控制台中显示它的信息
var tempData=“”；
$.each（json.results，函数（索引，元素）{
tempData+=''+element.name+''；
});
$（'#info'）.html（tempData）；
});

注意：对循环中的每个元素都遍历DOM不是一个好习惯。就像我在其他答案中看到的那样。假设数组中有100个元素，那么遍历DOM 100次只是一次附加1个数据是毫无意义的。因此，您可以优化这一点，让变量保存要在html中显示的数据，并在循环之后数组，只需根据需要使用
.append（“”
或
.html（“”
）即可。希望您得到它。
好。。首先，如果您在其他文件夹中有
.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);
});

$.getJSON（“data/test.json”，函数（json）{
log（json）；//这将在firebug控制台中显示它的信息
var tempData=“”；
$.each（json.results，函数（索引，元素）{
tempData+=''+element.name+''；
});
$（'#info'）.html（tempData）；
});

注意：对循环中的每个元素都遍历DOM不是一个好习惯。就像我在其他答案中看到的那样。假设数组中有100个元素，那么遍历DOM 100次只是一次附加1个数据是毫无意义的。因此，您可以优化这一点，让变量保存要在html中显示的数据，并在循环之后数组，只需根据需要使用
.append（“”
或
.html（“”
）即可。希望您得到它。
具有以下结构

{
    "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 );
});

$.getJSON（'/document/location'，函数（数据）{
var缓冲区=[]；
$.each（数据、结果、函数（索引、条目）
{
buffer.push（“”，entry.name“”）；
});
$（'#info'）.append（buffer.join（''）；
});

要获得性能更好的安全代码（防止注入），请尝试

$.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 );
});

$.getJSON（'/document/location'，函数（数据）{
var box=document.createDocumentFragment（）；
$.each（数据、结果、函数（索引、条目）
{
$（''）.text（entry.name）.appendTo（box）；
});
$（'#info'）。附加（框）；
});

测试具有以下结构的
中的安全和不安全代码

{
    "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 );
});

$.getJSON（'/document/location'，函数（数据）{
var缓冲区=[]；
$.each（数据、结果、函数（索引、条目）
{
buffer.push（“”，entry.name“”）；
});
$（'#info'）.append（buffer.join（''）；
});

要获得性能更好的安全代码（防止注入），请尝试

$.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 );
});

$.getJSON（'/document/location'，函数（数据）{
var box=document.createDocumentFragment（）；
$.each（数据、结果、函数（索引、条目）
{
$（''）.text（entry.name）.appendTo（box）；
});
$（'#info'）。附加（框）；
});

在
中测试安全和不安全代码使用你的代码我在做控制台。log（val.name）和我在我的Chrome浏览器控制台上未定义使用你的代码我在做控制台。log（val.name）和我在我的Chrome浏览器控制台上未定义使用你的代码我在做控制台。log（val.name）和我在我的Chrome浏览器控制台上未定义知道了吗，它工作正常