Json数组元素到html页面

Json Array Elements to html page

本文关键字：页面 html 数组元素 Json      更新时间：2023-09-26

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

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

我想做的是获取数组元素并在html页面上显示它们，其中"名称"是标题(h1)，"描述"是段落(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>

你必须正确地解析它。下面是我调整的代码:

<!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

相关文章：