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

1 个答案: