从JSON中提取数据并放入HTML LI

Question

我想从我的JSON文件中提取数据，但它不起作用，我不知道我在做什么错误。我忘记了什么？

提取的数据需要被放入李

我的脚本：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script> 
    $(function() { 
    var checky = []; 
    $.getJSON('checky.json', function(data) { 
     $.each(data.checky, function() { 
      var bars = "<li style='height:" + times + "'>" + day + "</li>" 
      $(bars).appendTo("#graph"); 
    }); 
    }); 
}); 
</script> 

我的HTML：

<ul class="barGraph" id="graph"> 

我的JSON：

{ 
    "checky": [ 
     { 
      "day": "1", 
      "times": 25 
     },, 
     { 
      "day": "2", 
      "times": 18 
     },, 
     { 
      "day": "3", 
      "times": 10 
     },, 
     { 
      "day": "4", 
      "times": 19 
     },, 
     { 
      "day": "5", 
      "times": 30 
     },, 
     { 
      "day": "6", 
      "times": 18 
     }, 
     { 
      "day": "7", 
      "times": 78 
     }, 
     { 
      "day": "8", 
      "times": 35 
     }, 
     { 
      "day": "9", 
      "times": 26 
     }, 
     { 
      "day": "11", 
      "times": 18 
     }, 
     { 
      "day": "12", 
      "times": 5 
     }, 
     { 
      "day": "13", 
      "times": 10 
     }, 
     { 
      "day": "14", 
      "times": 14 
     }, 
     { 
      "day": "15", 
      "times": 29 
     }, 
     { 
      "day": "16", 
      "times": 61 
     }, 
     { 
      "day": "17", 
      "times": 25 
     }, 
     { 
      "day": "18", 
      "times": 18 
     }, 
     { 
      "day": "19", 
      "times": 11 
     }, 
     { 
      "day": "20", 
      "times": 67 
     }, 
     { 
      "day": "21", 
      "times": 92 
     }, 
     { 
      "day": "22", 
      "times": 29 
     }, 
     { 
      "day": "23", 
      "times": 39 
     }, 
     { 
      "day": "24", 
      "times": 24 
     }, 
     { 
      "day": "25", 
      "times": 79 
     }, 
     { 
      "day": "26", 
      "times": 28 
     }, 
     { 
      "day": "27", 
      "times": 48 
     }, 
     { 
      "day": "28", 
      "times": 28 
     }, 
     { 
      "day": "29", 
      "times": 29 
     }, 
     { 
      "day": "30", 
      "times": 84 
     }, 
     { 
      "day": "31", 
      "times": 148 
     } 
    ] 
} 

Answer 1

您当前的代码和数据有许多单独的问题。

1. 您的数组中有索引值与undefined值。 （两个逗号之间没有值：。... },,{ ...
   在每次出现来修复你的数据，这些基本问题，替换这些与一个逗号（交替地在循环添加一些逻辑，如果你跳过这些没有对您的数据源容易控制）。

2. $.each不起作用它的样子像你认为它。回调函数的第一个参数是数组的索引，而第二个是通过第二个参数访问您的times和day属性

3. 您“再经过一个普通字符串的$.fn.appendTo功能 - 这应该是一个jQuery对象，而不是：使用上面的提示你的代码的$(bars).appendTo($("#graph"));

---

简单的固定副本：（注 - 您需要修正1点以上以及使用下文）

$.each(data.checky, function(index, item) { 
    var bars = "<li style='height:" + item.times + "px'>" + item.day + "</li>" 
    $graph.append($('#graph')); 
}); 

---

为了更好的性能和最佳实践，我有几个小窍门：

• 不要在循环中创建新的jQuery对象。
• 将所有的html连接成一个变量，然后执行一次DOM操作来一次插入所有的html。
• 对于html属性值而不是单引号使用双引号。

例子：

都感谢你的时间来解决这个问题对我来说，并指出我做错了事情的

var html = ''; 
$.each(data.checky, function(index, item) { 
    html += '<li style="height: '+item.times+'px;">'+item.day+'</li>'; 
}); 
$('#graph').append(html);