Question

我是新手使用JSON而我正在尝试做一些我确信非常简单的事情，但我一直在寻找一段时间并且还没有找到正确的方法来做到这一点。我有两个文件，一个html页面和一个内部有数组的json文件。 JSON文件的内容如下所示：

[
{ "name": "EXAMPLE1",
      "description": "this is a sample description"},
{ "name": "EXAMPLE2",
  "description": "This is a second sample description"}
]

我正在尝试获取数组元素并在html页面上显示它们，其中“name”是标题（h1），“description”是段落（p）。

以下是我目前在html文件中的代码，如果我完全误解了如何解决这个问题，我不会感到惊讶：

<!DOCTYPE html>
<html>
    <head>
        <title>Json Arrays</title>  
    </head>

    <body>


    </body>
    <script>
    $(document).ready(function(){

$.getJSON("testarray.json", function(data){
$.each(data, function)(){
$("body").append("<h1>"+this['name']+<br>"</h1>""<p>"+this['description']+<br>"</p>");
}
}
}
        </script>
</html>

非常感谢任何建议。

Answer 1

你必须妥善解析它。这是我调整的代码。

<!DOCTYPE html>
<html>
    <head>
        <title>Json Arrays</title>  
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>

    <body>


    </body>
    <script>
    $(document).ready(function(){

            $.getJSON("testarray.json", function(data){
                console.log(data);
                $.each(data, function(i, field){

                    $("body").append("<h1>"+field.name+"<br></h1><p>"+field.description+"<br></p>");
                    });

            })
        });
        </script>
</html>

在每个之后，所有内容都是对象，所以只需使用field.name

Json数组元素到html页面

1 个答案: