Question

我想使用JSON文件中的元素动态填充列表。我们的想法是使用JSON文件中的实际对象切换列表中的 test_ID 。我该怎么做？

JSON文件

 [
   {
     "id": "a",
     "test": "Java",
     "testDate": "2016-08-01"
   },
   {
     "id": "b",
     "test":"JavaScript",
     "testDate": "2016-08-01"
   }
 ]

的jQuery

 $(function(){

  $.ajax({
    type : 'GET',
    url : 'json/data.json',
    async : false,
    beforeSend : function(){/*loading*/},
    dataType : 'json',
    success : function(result) {
  });

            $("#test_ID").empty(); //emtpy the UL before starting
            $.each(arr_json, function(i, v, d) {
             $("#test_ID").append("<li id='" + v.id +'" + v.test +"' >" + v.testDate + "<li>");
        });
    }
   });
 });

HTML

 <li id="test_ID"></li>

我确实收到了一些错误。线：

$("#test_ID").append("<li id='" + v.id +'" + v.test +"' >" + v.testDate + "<li>");

给出以下错误：无效的参数数量和未封闭的字符串文字。我也不确定如何识别JSON文件中的特定元素。

更新我想如果列表元素采用这种格式＆＃34; Java 2016-08-01＆＃34;和＃34; JavaScript 2016-08-01＆＃34;。谢谢！

Answer 1

你的javascript中有几个错误。请参阅下面的更正版本：

 $(function(){
   $.ajax({
     type : 'GET',
     url : 'json/data.json',
     async : false,
     beforeSend : function(){/*loading*/},
     dataType : 'json',
     success : function(result) {
            $("#test_ID").empty(); //emtpy the UL before starting

            // **************** correction made to the line below ***********************
            $.each(result, function(i, v, d) {                        

            // **************** correction made to the line below ***********************
            $("#test_ID").append('<li id="' + v.id + '">' + v.test + '  ' + v.testDate + '</li>');                         // correction made here
        });
    }
   });
 });

Answer 2

我做了一个小提琴。我不太明白你正在做什么v.test在HTML标签内没有标记，所以我没有包含它。我使用最小的JQuery来避免复杂性。

https://jsfiddle.net/ndx5da97/

  for (record in data) {
    $("#test_ID").append('<li id="' + data[record].id + '">' + data[record].testDate + '</li>');
  }

希望这有帮助！

更新：如何使用JSON文件中的数据动态填充列表？

2 个答案: