将接收到的信息插入到 html 的表格中

Question

我正在使用 instagram api，我从服务器获取信息，包括用户配置文件和另外两种。我想将信息放在html上的表格中。每行都与一个用户名相关（因为我搜索了用户名），每行都有个人资料和另外两个东西。我对如何做到这一点有点困惑。

这是我的代码：

var searchUsers = function(query,count){

$.ajax({
  type: "GET",
  dataType: "jsonp",
  cache: false,
  data: {
    q: query,
    count: count,
    access_token: access_token,
  },
  url: "https://api.instagram.com/v1/users/search",
  success: function(data) {
    // placing the images on the page
    console.log(data);
    if (data.data.length>0){
        var resultShow = $("#users_result");
        for (var i in data.data){

            resultShow.append("<img src='" +      data.data[i].profile_picture + "'></img>");
            // var username = "https://www.instagram.com/"+ data.data[i].username;
            // console.log(username);
            resultShow.append("<a target='_blank' href = 'https://www.instagram.com/"+data.data[i].username+"'>user profile</a>");
            // var id = data.data[i].id;
            // console.log(id);
          $.ajax({
          url: 'https://api.instagram.com/v1/users/' + data.data[i].id + '/media/recent/',
          type: "GET",
          dataType: "jsonp",
          data: {access_token: access_token},
          success: function(data2){
            console.log(data2);
          for(x in data2.data){
            // console.log(data2.data[x].link);
            resultShow.append("<a target='_blank' href = '"+data2.data[x].link+"'><img src='" + data2.data[x].images.thumbnail.url + "'></img></a>");  
              }

          },
          error: function(data2){
            console.log(data2);
          }
          });
    }
    } else {
        resultShow.html("Noting found!");
    }
    },
     error: function(data){
    console.log(data);
}      
});
};

Answer 1

您可以使用 innerHTML 属性更改页面中的几乎任何值。 例如：document.getElementById("demo").innerHTML = "Paragraph changed!"; http://jsfiddle.net/blazeeboy/fNPvf/

要更改表中的值，只需为其分配一个 ID 并使用您的 Javascript 函数进行更改。 在您的情况下，我建议在第 31 行和第 32 行之间插入任何 Javascript 参数。

 success: function(data2){
    var title = document.getElementById('title');
    var username = "https://www.instagram.com/"+ data.data[i].username;
    title.innerHTML = username;
            console.log(data2);
          for(x in data2.data){
            // console.log(data2.data[x].link);
            resultShow.append("<a target='_blank' href = '"+data2.data[x].link+"'><img src='" + data2.data[x].images.thumbnail.url + "'></img></a>");  
              }

          }

它将用户名写入id为“title”的表中，如果您需要多个表值，则需要创建一个数组并使用for循环将特定值插入到特定表中，tr等... id

success: function(data2){
    //tableids are the ids of each table row or column in the order you wanna write them
var tableids = ['0', '1', '2'];//starting at 0
var username = "https://www.instagram.com/"+ data.data[i].username;
var title = document.getElementById(tableids[i]);
title.innerHTML = username;
        console.log(data2);
      for(x in data2.data){
            // console.log(data2.data[x].link);
        resultShow.append("<a target='_blank' href = '"+data2.data[x].link+"'><img src='" + data2.data[x].images.thumbnail.url + "'></img></a>");  
          }

      }    

希望它足够清楚