вызов данных из Restapi и разбора в таблицу в пользовательском интерфейсе - PullRequest
Новая
       3

вызов данных из Restapi и разбора в таблицу в пользовательском интерфейсе

0 голосов
/ 09 июня 2018 
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
table, td, th {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    width: 100%;
}

td {
    height: 50px;
    vertical-align: bottom;
}
</style>
</head>
 <body>
  <table id =101>
    <tr>
    <th>id</th>
    <th>name</th>
    <th>category</th>
    <th>color</th>
  </tr>
    <div>
    </div>

  </table>
<script>
var url  = "http://34.201.147.118:3001/getAllData";
var xhr  = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.onload = function () {
    var users = JSON.parse(xhr.responseText);
    console.log(users)
    if (xhr.readyState == 4 && xhr.status == "200") {
    var obj= users
    console.table(obj);
    var tbl=$("#101").attr("id","mytable");//The attr() method set the id attribute to mytable  this method is used to return the attribute value, it returns the value of the FIRST matched element.When this method is used to set attribute values, 


    $("#div1").append(tbl);
    for(var i=0;i<obj.length;i++)
    {
        console.log(obj.length)
        var tr="<tr>";
        var td1="<td>"+obj[i]["id"]+"</td>";
        var td2="<td>"+obj[i]["name"]+"</td>";
        var td3="<td>"+obj[i]["category"]+"</td>";
        var td4 ="<td>"+obj[i]["color"]+"</td></tr>";

       $("#mytable").append(tr+td1+td2+td3+td4);

    }

        console.table(users);
    } else {
        console.error(users);
    }
}





</script>
</body>
</html>
  1. Я создал таблицу на своей html-странице, и я хочу вызвать api rest rest и получить данные. From api rest И разобрать таблицу, которую я создал в ui
  2. , но мой кодне входит в функцию загрузки, я думаю, что где-то пошло не так, пожалуйста, поправьте меня
  3. и я хочу напечатать NA, если какое-либо поле в таблице оставлено пустым
  4. , пожалуйста, предложите какие-либо изменения кода
  5. Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 09 июня 2018

Попробуйте этот код и обновите ваш параметр в цикле. 

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>
  <style>
table, td, th {
border: 1px solid black;
}

table {
    border-collapse: collapse;
    width: 100%;
}

td {
    height: 50px;
    vertical-align: bottom;
}
</style>
</head>
 <body>
  <table id='mytable'>
<tr>
<th>id</th>
<th>name</th>
<th>category</th>
<th>color</th>
  </tr>
<div>
</div>

  </table>
<script>


$(document).ready(function(){
var url  = "http://34.201.147.118:3001/getAllData";
$.getJSON(url, function( data ) {
    var obj = data['AllData'];
    for(var i=0;i<obj.length;i++)
    {
        var tr  ="<tr>"+
                "<td>"+obj[i]["id"]+"</td>"+
                "<td>"+obj[i]["name"]+"</td>"+
                "<td>"+obj[i]["category"]+"</td>"+
                "<td>"+obj[i]["color"]+"</td></tr>";
       $("#mytable").append(tr);
    }
});
}); 
</script>
</body>
</html>
0 голосов
/ 09 июня 2018

Просто подумай об этом ;-) Думаю, тебе следует так поступить. 

var data = {  //A object
  get: function() { //Your get method
    var url = "http://34.201.147.118:3001/getAllData";
    $.ajax({
      url: url,
      type: 'GET',
      success: function(responseText) {
        var users = JSON.parse(responseText);
        this.output(users); //Call output method
      }.bind(this),
      error: function(response) {
        console.error(response);
      }
    });
  },


  output: function(users) { //Your output method
    console.log(users.length);

    users.forEach(function(user) {
      var tr = "<tr>";
      var td1 = "<td>" + user.id + "</td>";
      var td2 = "<td>" + user.name + "</td>";
      var td3 = "<td>" + user.category + "</td>";
      var td4 = "<td>" + user.color + "</td></tr>";

      $("#mytable").append(tr + td1 + td2 + td3 + td4);
    });
  }
}

data.get();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...