dynamically displaying JSON values in list format

Question

I have a JSON response from server which looks like (Note: data could be more or less but the structure would be the same)

{
    "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
    }]
}

I am trying to display "name" attribute from the JSON in a list format. Data is retrieve from server by onClick method. Since returned JSON data could vary (i.e it could be more than 3 events), I am looking to display JSON data dynamically.

HTML view of list looks something like:

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

This is my JS looks like when I fetch the JSON from server on click event

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);
    }
}

How I dynamically populate the "name" field from JSON in a list view (drawAllEvents function) as mention in the HTML markup. Probably I need to use

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

But I am not sure how do I utilize this in my case.

Rory McCrossan · Accepted Answer · 2014-06-05 08:20:37Z

1

You need to dynamically create a new li element with data obtained from the passed events and append it to the DOM. Something like this:

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

Example fiddle

answered Jun 5, 2014 at 8:20

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

0xburned Over a year ago

thank you. I probably need your help for nested arrays in the JSON. I just discovered about that. I will post a new question soon.

0xburned Over a year ago

Regarding your solution. How do I refresh the list element when calling event JSON with different parameters. I would like to remove the existing added list element and replace with the new JSON data on every call.

0xburned Over a year ago

Nevermind...I am using $('#someID ul').empty(); now before populating new JSON data.

Collectives™ on Stack Overflow

dynamically displaying JSON values in list format

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related