在 html 列表中显示 json api 数据

【问题标题】：Display json api data in html list在 html 列表中显示 json api 数据
【发布时间】：2013-03-09 11:54:46
【问题描述】：

我有一个 json API 密钥，我正在尝试将 json 数据转换为在 HTML 或 php 中以无序列表显示。

这是我拥有的 API 密钥：http://kippamp.uservoice.com/api/v1/forums/1/suggestions.json?client=qikbghkQYRolFTMvEXg

我可以使用以下代码解析原始 json 数据：

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

但无法解析数据以格式化方式列出。

这里有人可以帮帮我吗？

问候。

【问题讨论】：

创建for循环并在
data

yogesh 您能否解释一下代码以创建循环。我正在尝试这样做，但没有用。

标签： php jquery json api jsonp

【解决方案1】：

只需在循环中呈现您的结果。例如将它们附加到ul 容器中：

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

http://jsfiddle.net/zvBE3/

你只需要决定你需要展示什么数据和你应该使用什么模板：

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

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

【讨论】：

你能再告诉我一件事吗...我可以控制列表计数吗？如果我只需要显示 4 或 5 个项目？
刚刚检查了他们的 API。您可以使用per_page 参数控制返回结果的数量。例如：jsfiddle.net/zvBE3/4

【解决方案2】：

Ajax 请求返回一个对象，你必须循环 data.suggestions 来创建你的列表。比如：

$.each(data.suggestions, function(id, suggestion) {
    $('ul.mylist').append($('<li>'+suggestion.title+'</li>'));
});

【讨论】：