抓取Json對象數據並通過循環注入到html表中

我必須抓取「數據」項並循環並注入特定的表，如下圖所示。這怎麼可能從JavaScript/jQuery的？我附上了我的JSON響應ajax調用檢查的圖片，以瞭解我需要處理的Json的想法。任何問題歡迎。在此先感謝....抓取Json對象數據並通過循環注入到html表中

表：

<table> 
     <tr> 
      <th>Ebay Image</th> 
      <th>Item Title</th> 
     </tr> 

     <tr need to loop this tr as per json objects> 
      <td><img src="link defined from json value"></td> 
      <td>title from json value</td> 
     </tr> 
</table>

jQuery的Ajax調用：

$.post("/CategoryResearch/Search", { OperationName: _operationname, calltype: _calltype, page: _page, keywords: _keywords, type: _type, location: _location }) 
       .done(function (data) { 

        if (data != null) { 
         $("#normalState").fadeOut(); 

         //Loop and inject html table data to specific table 

         console.log(data); 

        } 


       });

的Json從圖片的console.log（數據） -

來源

2017-10-15 John Lk

表：（不要忘記添加tableId作爲id並刪除de tr樣本數據的G）

<table id="tableId"> 
    <tr> 
     <th>Ebay Image</th> 
     <th>Item Title</th> 
    </tr> 
</table>

jQuery的Ajax調用：（上編輯我我直接將整個循環中調用Ajax爲簡化你）

$。員額（「/ CategoryResearch /搜索」 {OperationName：_operationname，CALLTYPE：_calltype，頁：_page，關鍵字：_keywords，類型：_type，位置：_location}） .done（功能（數據）{

   if (data != null) { 
        $("#normalState").fadeOut(); 

        //Loop and inject html table data to specific table 
        if ($("#tableId tbody").length === 0) { 
        $("#tableId").append("<tbody></tbody>"); 
         } 

         var jsonDataObject = JSON.parse(data); 

         $.each(jsonDataObject, function(i, item){ 
         $("#tableId tbody").append(
          "<tr>" + 
          "<td><img src=\"" + item.EbayImageUrl + "\"></td>" 
          "<td>" + item.EbayTitle + "</td>" + 
          "</tr>" 
          ); 
         }); 
        console.log(data); 
       } 
      });

來源

2017-10-15 05:44:50

對不起ü可以添加代碼，以我的代碼？所以我可以知道在哪裏把這些作爲你計劃的？ –

當然，在編輯中，我將這個功能放在循環中，讓您的工作更輕鬆。 –

您可以通過陣列環路你會收到一個的答覆...

$.ajax({ 
    type: 'POST', 
    url: '/CategoryResearch/Search', 
    data: { OperationName: _operationname, calltype: _calltype, page: _page, keywords: _keywords, type: _type, location: _location }, 
    dataType: 'json', 
    success: function(data) { 

     if (data != null) { 

      $("#normalState").fadeOut(); 

      var rows = []; 
      for (var i=0, l=data.length; i<l; i++) 
       rows.push('<tr><td>'+data[i].EbayImageUrl+'</td><td>'+data[i].EbayTitle+'</td></tr>'); 

      $('table tbody').html(rows.join('')); 
     } 
    } 
});

來源

2017-10-15 05:49:24

你容易的解決方案。多謝兄弟 –

你試過用append嗎？

<table id="appendedTable"> 
    <tr> 
     <th> 
      header 1 
    </th> 
    </tr> 
</table> 

<script> 

    $(document).ready(function(){ 

    $('#appendedTable').append('<tr><td>concatenate here your json value</td></tr>'); 

    }); 

</script>

來源

2017-10-15 05:56:17

解析響應

（我想我錯了這部分內容。我已經很多年沒有使用jQuery的，我想它解析爲你，但是，以防萬一...）

來自服務器的響應是一個字符串。用JSON.parse解析它。

let myData = JSON.parse(data);

基於提供的截圖，它看起來像你得到一個對象數組。

迭代陣列

遍歷與Array.forEach陣列的每個元素。

行添加到您的表

獲取與document.getElementsByTagName或document.getElementById等的引用您的餐桌。

用HTMLTableElement.insertRow()和HTMLTableRowElement.insertCell()添加行和單元格。

例

const myData = [{ 
 
    EbayImageUrl: 'http://via.placeholder.com/100x50/ff0000/ffffff', 
 
    EbayTitle: 'example title' 
 
}, { 
 
    EbayImageUrl: 'http://via.placeholder.com/100x50/00ff00/ffffff', 
 
    EbayTitle: 'example title' 
 
}, { 
 
    EbayImageUrl: 'http://via.placeholder.com/100x50/0000ff/ffffff', 
 
    EbayTitle: 'example title' 
 
}]; 
 

 
const table = document.getElementsByTagName('table')[0]; 
 

 
myData.forEach(item => { 
 
    let row = table.insertRow(); 
 
    row.insertCell().innerHTML = `<img src="${item.EbayImageUrl}">`; 
 
    row.insertCell().innerHTML = item.EbayTitle; 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" /> 
 
<table> 
 
    <tr> 
 
    <th>Ebay Image</th> 
 
    <th>Item Title</th> 
 
    </tr> 
 
</table>

來源

2017-10-15 06:05:18 Will

抓取Json對象數據並通過循環注入到html表中

回答

相關問題