Question

在html中显示json信息的最佳方法是什么，我尝试了以下但是似乎没有用。

我的代码

  $.getJSON('example.json', function(data) {
         var html = '';
         $.each(data.example, function(key, value) {

			html += '<p> Name:' + value.name + '</p>';

			html += '<p> Email:' + value.email + '</p>'

               });

       $('#example').append(html);
    });
});

我的json

{
    "example": [
        {
          "name": "Dr. Sammie Boyer",
          "email": "Lavonne.Kiehn@hotmail.com"
        },
        {
          "name": "Eladio Beier",
          "email": "Lavonne.Kiehn@hotmail.com"
        },
        {
          "name": "Hilton Borer",
          "email": "Reva.Goyette@yahoo.com"
        }
    ]
}

Answer 1

对于您尝试调试的console.log内容总是有帮助的，如果您在console.log上运行data，您会发现自contacts以来没有任何内容它在JSON文件中称为example，尝试更改example - ＆gt; JSON中的contacts或contacts - ＆gt;代码中的example。

Answer 2

检查一下它可以帮到你。

var data = {
    "example": [
        {
          "name": "Dr. Sammie Boyer",
          "email": "Lavonne.Kiehn@hotmail.com"
        },
        {
          "name": "Eladio Beier",
          "email": "Lavonne.Kiehn@hotmail.com"
        },
        {
          "name": "Hilton Borer",
          "email": "Reva.Goyette@yahoo.com"
        }
    ]
};
         var html = '';
         $.each(data.example, function(key, value) {

			html += '<p> Name:' + value.name + '</p>';

			html += '<p> Email:' + value.email + '</p>'

               });

       $('#example').append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="example"> </div>

在html中显示json数据

2 个答案: