Jsonのオブジェクトデータを取得し、ループでhtmlテーブルに挿入

Question

"データ"アイテムを取得し、ループして特定のテーブルに注入する必要があります。どのようにjavascript/jqueryから可能ですか？私はJsonについてのアイデアを得るために、AJAXコールチェックのJsonレスポンスの写真を添付し​​て処理しなければなりません。質問は大歓迎です。事前のおかげで....

表：

<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の呼び出し：にconsole.logから

$.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画像（データ） -

Answer 1

テーブル： （IDでtableIdを追加してde tr taを削除するのを忘れないでくださいサンプルデータのグラム）

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

jQueryのAjaxの呼び出し： （編集私はあなたに簡素化のためのAJAX呼び出しに直接ループ全体を配置することだ）

$ .post（ "/ CategoryResearch /検索" で、{のoperationName：_operationname、呼び出しタイプ：_calltype、ページ：_page、キーワード：_keywords、タイプ：_type、所在地：_location}） の.done（関数（データ）{

Answer 2

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

あなたはその配列をループすることができあなたはで応答します...

$.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('')); 
     } 
    } 
}); 

Answer 3

あなたは追加を使ってみましたか？

<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> 

Answer 4

（私はこの部分について間違ってだと思う。私は年間での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>