Вставить полученную информацию в таблицу на html

Question

Я делаю на API Instagram, и я получаю информацию с сервера, включая профили пользователей и еще два вида. Я хочу поместить информацию в таблицу на 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/

Чтобы изменить значения внутри таблицы, просто присвойте ей идентификатор и измените ее с помощью функции Javascript. В вашем случае я бы предложил вставить любой параметр Javascript между строками 31 и 32.

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

          }

Он запишет имя пользователя в таблицу с идентификатором "title", если вам нужно более одного табличного значения, вам нужно будет создать массив и использовать цикл for для вставки определенного значения в конкретную таблицу, tr и т. Д... Я бы

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

      }    

Надеюсь, это было достаточно ясно