JavaScript объект данных и визуализации

Question

Heres мой код

var readAll = function() { 
    $.ajax(
      { 
       url: _spPageContextInfo.webServerRelativeUrl + 
        "/_api/web/lists/getByTitle('PhoneBook')/items/" + 
        "?$select=Id, Title, pb_FirstName, pb_PhoneNumber" + 
        "&$orderby=Title,pb_FirstName, pb_PhoneNumber", 
       type: "GET", 
       headers: { 
        "accept": "application/json;odata=verbose", 
       }, 
       success: function (data) { 
        console.log(data); 
       }, 
       error: function (err) { 
        alert(JSON.stringify(err)); 
       } 
      } 
     ); 
}; 


$(document).ready(function() { 
    readAll(); 
}); 

data = { 
    "d": { 
     "results": [{ 
      "__metadata": { 
       "id": "b4d773a6-f31e-442d-8974-38c535d491d6", 
       "uri": "mysite:6555", 
       "etag": "\"1\"", 
       "type": "SP.Data.LST_x005f_PhoneBookListItem" 
      }, 
      "Id": 1, 
      "Title": "name11", 
      "pb_FirstName": "name", 
      "pb_PhoneNumber": "1234", 
      "ID": 1 
     }] 
    } 
} 

function readList(data) { 

    var html = []; 
    html.push("<table><thead><tr><th>ID</th><th>First Name</th>" + 
       "<th>Last Name</th><th>Phone</th></tr></table></thead>"); 

    data = data.d.results; 
    for (var i = 0; i < results.length; i++) { 
     html.push("<tr><td>"); 
     html.push(results[i].ID); 
     html.push("</td><td>"); 
     html.push(results[i].Title); 
     html.push("</td><td>"); 
     html.push(results[i].pb_FirstName); 
     html.push("</td><td>"); 
     html.push(results[i].pb_PhoneNumber); 
     html.push("</td><tr>"); 
    } 

    html.push("</table>"`enter code here`); 
    $('.table').html(html.join('')); 
} 

так я получаю в консоли массив JSON с данными. im пытается донести данные в моей таблице html. но я не знаю, как это сделать. поэтому мне нужно взять с собой объект данных и сделать его в правильном HTML надежды и может помочь мне

Answer 1

Заменить

console.log(data); 

с странно названный

readList(data); 

Answer 2

Вы должны использовать $ .get для получения данных и рулей для рендеринга html с данными, его легко. // Link handlebars

var template = "<table>\ 
    <thead>\ 
     <tr>\ 
      <th>ID</th>\ 
      <th>Title</th>\ 
      <th>First Name</th>\ 
      <th>Phone</th>\ 
     </tr>\ 
    </thead>\ 
    <tbody>\ 
    {{#objects}}\ 
    <tr>\ 
     <td>{{ Id }}</td>\ 
     <td>{{ Title }}</td>\ 
     <td>{{ pb_FirstName }}</td>\ 
     <td>{{ pb_PhoneNumber }}</td>\ 
    </tr>\ 
    {{/objects}}\ 
    </tbody>\ 
</table>"; 

$.get('someurl') 
.success(function(response){ 
    //here render data to html 
    // We can use Handlebars, is a engine of templates. 
    $("#box").html(Handlebars.compile(template)({'objects' : response['d']['results']})); 
}) 
.error(function(err){ 
    alert(JSON.stringify(err)); 
});