Javascript 抓取Json对象数据并通过循环注入html表

我必须抓取“数据”项，循环并注入到特定的表中，如bellow。如何从javascript/jquery实现这一点？我附上了ajax调用检查的Json响应图片，以了解我需要处理的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>

console.log中的Json图片（数据）-

表格： （别忘了将tableId添加为id，并删除示例数据的de tr标记）

易趣图片
项目名称

Jquery Ajax调用： （在编辑时，我将整个循环直接放在ajax调用中，以便简化）

$.post（“/CategoryResearch/Search”，{OperationName:_OperationName，calltype:_calltype，page:_page，keywords:_关键字，type:_type，location:_location}） .完成（功能（数据）{

if（数据！=null）{
$（“#正常状态”）.fadeOut（）；
//循环并将html表格数据注入特定表格
if（$（“#tableId tbody”）.length==0）{
$（“#tableId”）。追加（“”）；
}
var jsonDataObject=JSON.parse（数据）；
$.each（jsonDataObject，function（i，item）{
$（“#tableId tbody”）。追加(
"" +
""
“”+item.ebayitle+“”+
""
);
});
控制台日志（数据）；
}
});

您可以使用

for

循环通过作为响应得到的数组

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

$.ajax({
键入：“POST”，
url:“/CategoryResearch/Search”，
数据：{OperationName:_OperationName，calltype:_calltype，page:_page，keywords:_keywords，type:_type，location:_location}，
数据类型：“json”，
成功：功能（数据）{
如果（数据！=null）{
$（“#正常状态”）.fadeOut（）；
var行=[]；
对于（var i=0，l=data.length；i您尝试过使用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>


标题1
$（文档）.ready（函数（）{
$（'#appendedTable'）.append（'concatenate here your json value'）；
});
解析响应

（我想这部分我错了。我已经多年没有使用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:“示例标题”
}, {
EbayImageUrl:'http://via.placeholder.com/100x50/00ff00/ffffff',
EbayTitle:“示例标题”
}, {
EbayImageUrl:'http://via.placeholder.com/100x50/0000ff/ffffff',
EbayTitle:“示例标题”
}];
const table=document.getElementsByTagName（'table'）[0]；
myData.forEach（项目=>{
let row=table.insertRow（）；
row.insertCell（）.innerHTML=`；
row.insertCell（）.innerHTML=item.EbayTitle；
})；

易趣图片
项目名称
很抱歉，您可以在我的代码中添加代码吗？这样我就可以知道按照您的计划将这些代码放在哪里了？当然，在“编辑”中，我将函数工作放在了循环中，以使您的工作更轻松。
$.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(''));
        }
    }
});

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

let myData = JSON.parse(data);