在HTML中使用JSON文件:未捕获TypeError:data.forEach不是函数

时间:2016-06-29 15:55:45

标签: javascript jquery html json

我浏览过网络/文档但无法找出原因无效。

我正在尝试从JSON文件插入数据(引号):     {

"quotesArray":[{
    "personName": "Albert Einstein",
    "quote": "Look deep into nature, and then you will understand everything better."
},
{
    "personName": "Stephen Hawking",
    "quote": "Look deep into nature, and then you will understand everything better."
},
{
    "personName": "Confucius",
    "quote": "Life is really simple, but we insist on making it complicated."
}]}

使用以下JS进入一个简单的HTML div:

 $(document).ready(function() {
   $("#realquote").on("click", function() {
    $.getJSON('/json/quotes.json', function(data) {
     var html = " ";
       data.forEach(function(val) {
        var keys = Object.keys(val);
          html += "<div class = 'text-output'>";
            keys.forEach(function(key){ 
                html += val[key];

            });
               html += "</div>"
         });


       $(".realquote").html(html);
    });
   });          
   });

但每一次,我都会收到错误:TypeError:data.forEach不是函数“,我无法弄清楚原因。

如果有人能把我推向正确的方向,我们将不胜感激!

5 个答案:

答案 0 :(得分:4)

data是一个没有.forEach方法的常规对象。您应该遍历对象的quotesArray属性。

data.quotesArray.forEach(fn);

答案 1 :(得分:1)

您需要使用data.quotesArray来实际访问要迭代的数组。

回调中的data包含从JSON文件返回的对象。由于普通的Javascript对象没有.forEach方法,因此会出错。

答案 2 :(得分:1)

使用data.quotesArray.forEach(..代替data.forEach(..

http://js.do/code/100647

如果您想要迭代数据,那么您可以使用Object

Object.keys(data).forEach(function (key)
{

....

});

答案 3 :(得分:-1)

当您使用jQuery时,最好使用$.each代替forEach

答案 4 :(得分:-1)

您可以使用Foreach的每个insted ..尝试检查此link