在html列表中显示json api数据

Question

I have a json API key & I am trying to convert the json data to display in unordered list in HTML or php.

This is the API key I have : http://kippamp.uservoice.com/api/v1/forums/1/suggestions.json?client=qikbghkQYRolFTMvEXg

I am able to parse the raw json data using the below code :

<script>
$.ajax({
    type: 'GET',
    url: 'http://kippamp.uservoice.com/api/v1/forums/1/suggestions.json?client=qikbghkQYRolFTMvEXg',
    async: false,
    jsonpCallback: 'jsonCallback',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(data)
    {
        $('#jsonp-results').html(JSON.stringify(data));
        console.log(json);
    },
    error: function(e)
    {
       alert(e.message);
    }
});
</script>

but not able to parse the data to list in a formatted way.

Can someone here help me please.

Regards.

Answer 1

Just render your results in the loop. For example appending them into ul container:

success: function (data) {
    var $ul = $('#results');
    $.each(data.suggestions, function(i, el) {
       $ul.append('<li>' + el.formatted_text + '</li>');
    });
},

http://jsfiddle.net/zvBE3/

You just need to decide what data you need to present and what template you should use:

var row =
    '<li>' + 
        '<h2>' + el.title + '</h2>' +
        '<div>' + el.formatted_text + '</div>'+
    '</li>';
$ul.append(row);

http://jsfiddle.net/zvBE3/3/