Question

向https://api.iflychat.com/users/list/demo/c-g

发出HTTP GET请求

以上网址以JSON格式返回网站上的在线用户列表。结果数组中的每个条目都具有以下属性（最后一个除外）：

•u - 用户ID

•n - 用户名

•s - 用户的状态

•p - 用户的个人资料网址

结果数组中的最后一个元素表示列表中的用户总数。

我想在我的网络应用程序中呈现此列表并每分钟更新一次数据。

var $Form = $('form'), $Container = $('#container');
$Container.hide();
$Form.on('submit', function(p_oEvent){
var sUrl, oData;
p_oEvent.preventDefault();
sUrl = 'https://api.iflychat.com/users/list/demo/c-g'
$.ajax(sUrl, {
    complete: function(p_oXHR, p_sStatus){
        oData = $.parseJSON(p_oXHR.responseText);
        console.log(oData);
        alert(oData);
        $Container.find('.userId').text(oData.u);
        $Container.find('.name').text(oData.n);
        $Container.find('.image').html('<img src="' + oData.p + '"/>');
        $Container.find('.status').text(oData.s);
        $Container.show();
    }
 });    
});

这是我目前的JavaScript代码.HTML页面上有一个提交按钮。我是json解析REST API的新手，请帮助我将列表解析为对象数组。列表应该每隔1分钟更新一次。

Answer 1

我将代码缩减为基本问题，看来，您的API会返回＆＃39; application / json＆＃39;内容，由jQuery已经解析为对象数组。请在下面找到一个工作示例，它还将检查数据是否为字符串，然后将其解析为对象。请注意，如果API以字符串格式返回错误而不是有效的JSON，您可能会添加一些错误处理。

编辑：添加了setInterval。

＆＃13;

function getCurrentUserList(){
  sUrl = 'https://api.iflychat.com/users/list/demo/c-g'
  $.get(sUrl, function(data, status){
    console.log("status:", status);
    var oData;
    if(typeof(data) === "string"){
      //just in case the result is not already of type 'object'
      //TODO: needs error handling
      oData = JSON.parse(data);
    }else{
      //this is what should happen in most cases for the given API
      oData = data;
    }
  
    //display data form the second entry:
    console.log(oData[1].n);
    console.log(oData[1].s); 
    console.log(oData[1].p);   
  });
}

//get data now
getCurrentUserList();

//get data every 5 seconds:
setInterval(getCurrentUserList,5000);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

向REST API端点

1 个答案: