动态显示JSON值列表格式

我有一个从服务器的JSON响应，它看起来像（注：数据可能或多或少但结构是相同的）动态显示JSON值列表格式

{ 
    "events": [{ 
     "id": 852157, 
     "name": "Adelaide v Brisbane", 
     "timezone": "Australia/Darwin", 
     "timezoneOffset": 34200, 
     "time": 1401987600000, 
     "timeUtc": "2014-06-05T20:00:00+09:30", 
     "status": "live", 
     "wpRef": "852157", 
     "parentCategoryId": 7, 
     "parentCategoryName": "Australian Rules", 
     "categoryId": 9274, 
     "categoryName": "AFL R26 Matches", 
     "racingEvent": null, 
     "raceNumber": null, 
     "marketCount": 0, 
     "prefix": null, 
     "nameSeparator": null, 
     "markets": [], 
     "result": null 
    }, { 
     "id": 852217, 
     "name": "Geelong v Carlton", 
     "timezone": "Australia/Darwin", 
     "timezoneOffset": 34200, 
     "time": 1401987600000, 
     "timeUtc": "2014-06-05T20:00:00+09:30", 
     "status": "live", 
     "wpRef": "852217", 
     "parentCategoryId": 7, 
     "parentCategoryName": "Australian Rules", 
     "categoryId": 9274, 
     "categoryName": "AFL R26 Matches", 
     "racingEvent": null, 
     "raceNumber": null, 
     "marketCount": 0, 
     "prefix": null, 
     "nameSeparator": null, 
     "markets": [], 
     "result": null 
    }, { 
     "id": 852238, 
     "name": "Carlton v Hawthorn", 
     "timezone": "Australia/Darwin", 
     "timezoneOffset": 34200, 
     "time": 1401987600000, 
     "timeUtc": "2014-06-05T20:00:00+09:30", 
     "status": "live", 
     "wpRef": "852238", 
     "parentCategoryId": 7, 
     "parentCategoryName": "Australian Rules", 
     "categoryId": 9274, 
     "categoryName": "AFL R26 Matches", 
     "racingEvent": null, 
     "raceNumber": null, 
     "marketCount": 0, 
     "prefix": null, 
     "nameSeparator": null, 
     "markets": [], 
     "result": null 
    }] 
}

我想显示“名称“属性从JSON以列表格式。数据通过onClick方法从服务器检索。由于返回的JSON数据可能会有所不同（即可能超过3个事件），因此我正在寻找动态显示JSON数据。

列表

HTML视图看起来类似：

<div id="someID" class="filtering"> 
    <h2>EVENTS</h2> 
    <ul> 
     <li><a href="">Name 1</a> 
     </li> 
     <li><a href="">Name 2</a> 
     </li> 
     <li><a href="">Name 3</a> 
     </li> 
    </ul> 
    <div class="clear"></div> 
</div>

这是我的JS看，当我从服务器获取JSON上单击事件像

var navigation = { 

    sportSubCategoryBindClick: function (id, parentId) { 

     $("#" + id).live('click', function() { 

      var thisEl = this, 
       categoryId = $(this).attr('id'); 

      $.when(ajaxCalls.fetchEventsForCategory(id, parentId, days.fromToday)).done(function (eventsMap) { 

       // There are no events 
       if (eventsMap.events.length == 0) { 
        $('#mainError').show(); 
        $('div.main').hide(); 
       } else { 
        $('#' + categoryId).addClass('active'); 

        var events = eventsMap.events; 

        // If there are events 
        if (events.length > 0) { 

         navigation.drawAllEvents(events); 

        } 
       } 
       progressIndicator(false); 
      }); 
     }); 
    }, 

    drawAllEvents: function (events)  { 

     console.log(events); 
    } 
}

如何动态填充的“名”字段从JSON列表视图（drawAllEvents函数）中提到的HTML标记。也许我需要使用

$.each(result,function(index, value){ 
    // code goes over here 
});

但我不知道我该如何利用这个在我的情况。

来源

2014-06-05 zaq

您需要动态创建一个新的li元素，其中包含从传递的events获取的数据并将其附加到DOM。事情是这样的：

drawAllEvents: function (events) { 
    var $container = $('#someID ul'); 
    $.each(events, function(i, event) { 
     $('<a />', { text: event.name, href: '#' }).wrap('<li />').parent().appendTo($container); 
    }); 
}

Example fiddle

来源

2014-06-05 08:20:37

谢谢。我可能需要你在JSON中嵌套数组的帮助。我刚刚发现了这一点。我会很快发布一个新问题。 – zaq

关于您的解决方案。如何在使用不同参数调用事件JSON时刷新列表元素。我想删除现有的添加列表元素，并在每次调用时替换为新的JSON数据。 – zaq

Nevermind ...我使用$（'＃someID ul'）。empty（）;现在填充新的JSON数据。 – zaq

动态显示JSON值列表格式

回答

相关问题