以列表格式动态显示JSON值

dynamically displaying JSON values in list format

本文关键字：JSON 动态显示 格式 列表      更新时间：2023-09-26

我有一个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中的"name"属性。通过onClick方法从服务器检索数据。由于返回的JSON数据可能会有所不同(即它可能超过3个事件)，我希望动态显示JSON数据。

list的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>

这是我从服务器获取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动态填充列表视图中的"name"字段(drawAllEvents函数)，如HTML标记中提到的。也许我需要使用

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

但我不确定如何在我的情况下使用它

您需要使用从传递的events获得的数据动态创建一个新的li元素，并将其附加到DOM。像这样:

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

例子小提琴

相关文章：