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

Question

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

提取出来的数据需要放到一个li里

我的脚本：

<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

您当前的代码和数据存在许多不同的问题。

您的数组中有具有 undefined 值的索引。（两个逗号之间没有值：...},,{...
在每次出现时将它们替换为单个逗号，以修复数据的这些基本问题。 （如果您无法轻松控制数据源，也可以在循环中添加一些逻辑以跳过这些逻辑）。
$.each 并不像您认为的那样工作。回调函数的第一个参数是数组的索引，第二个是该索引的值。通过第二个参数访问您的 times 和 day 属性。
您正在将常规字符串传递给 $.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 属性值使用双引号而不是单引号。

示例：

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

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

Extract data out of JSON and put into HTML LI

json