如何将JSON附加到div中

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}))
}

我对网站开发非常陌生，但是我非常有兴趣学习，请尽可能多地帮助我。

- user7243719

---

可能是将JSON数据格式化并附加到HTML div中的重复问题。 - Sumit patel

newDiv.append($("<span />", data.array[0].firstArray.firstKey})) - 错误之处在于最后多余的 }。同时，根据该代码，内容将显示在所创建的span之外。 - Hopeless

你的JSON中在firstArray后面缺少了一个引号"，导致它无效。 - cloudworks

请在此处查看具有多个数组的JSON的正确语法。它有正确的语法。 - Janen R

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>

- Mamun

---

你的解决方案是无价的。这正是我在寻找的。非常感谢你。 - user7243719

Answer 2

您的 JSON 字符串未通过验证。

已更正

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

}

现在你可以像这样访问，

data.array[0].firstArray.firstKey

- Kushan

---

感谢您的参与。 - user7243719

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>

- AimeTPGM