Question

我是网络开发的新手，我很难将JSON附加到div，以便在网页上显示该值。我已经检查了其他问题，但大多数回复都与PHP有关，这不是我的情况。任何人都可以帮我弄清楚我错过了什么，不让JSON值不显示在网页上。以下是JSON文件内容的一部分：

{ "array": [
   "firstArray": {
    "firstKey": "firstValue",
    "secondKey": "secondValue"
   },
   "secondArray":{
    "firstKey": "firstValue",
    "secondKey": "secondValue"
   }
  ]     
}

以下是我期望显示在第一个数组和上述JSON的第一个键下找到的值的JavaScript的一部分

function print(data){   // lets assume data represents the whole JSON data
var newDiv = $("<div />", {'id': 'new'})
newDiv.append($("<span />", data.array[0].firstArray.firstKey}))
}

我对网络开发很陌生，我很有兴趣学习，所以请尽可能地帮助我。

Answer 1

尝试以下方法：

var data = { "array": [
   {"firstArray":{
    "firstKey": "firstValue",
    "secondKey": "secondValue"
   }},
   {"secondArray":{
    "firstKey": "firstValue",
    "secondKey": "secondValue"
   }}
  ]     
};

function print(data){  
    $('body').append($("<div id='new'/>"));
    $('body').append($("<div id='new2'/>"));

    $('#new').append($("<span>"+data.array[0].firstArray.firstKey+"   "+"</span>"));
    $('#new').append($("<span>"+data.array[0].firstArray.secondKey+"</span>"));

    $('#new2').append($("<span>"+data.array[1].secondArray.firstKey+"   "+"</span>"));
    $('#new2').append($("<span>"+data.array[1].secondArray.secondKey+"</span>"));
}

print(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

您的json字符串未经过验证。

<强> Corected

{
"array": [{
    "firstArray": {
        "firstKey": "firstValue",
        "secondKey": "secondValue"
    }
}, {
    "secondArray": {
        "firstKey": "firstValue",
        "secondKey": "secondValue"
    }
}]

}

现在您可以这样访问，

data.array[0].firstArray.firstKey

Answer 3

你可以试试这个

（我从Mamun的评论中延伸出来）

// using JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> // using JQuery

<script>
//your array
var data = { "array": [
                    {
                    "firstKey": "firstValue",
                    "secondKey": "secondValue"
                    },
                    {
                    "firstKey": "firstValue",
                    "secondKey": "secondValue"
                    }
                ]     
            };


function print(data){  
    // loop for printing each element in array
    for (var i = 0; i < data.array.length; i++) {
        $('body').append($("<div id='new"+(i+1)+"'/>"));
        var id = "#new"+(i+1);
        $(id).append($("<span>"+data.array[i].firstKey+"   "+"</span>"));
        $(id).append($("<span>"+data.array[i].secondKey+"</span>"));
    };  
}

print(data);

</script>

如何将JSON附加到div

3 个答案: