從迭代JSON數組元素創建JS的HTML表格行對象

Question

我使用維基API搜索的東西，我得到JSON其中有我想在query.search像這樣

0 {ns: 0, title: "Help", size: 3677, wordcount: 433, snippet: "<span class=\"searchmatch\">Help</span> is any form …mmand-line shells that invokes documentations and", …} 

1 {ns: 0, title: "Online help", size: 7326, wordcount: 380, snippet: "(HTML), which includes HTML <span class=\"searchmat…earchmatch\">help</span> is also provided via live", …} 

2 {ns: 0, title: "Help desk", size: 9491, wordcount: 1296, snippet: "A <span class=\"searchmatch\">help</span> desk is a …ated to a company's or institution's products and", …} 

... 

的數據，我需要的價值通過它與

for (var i = 0; i < data.query.search.length; i++) { 
var result = data.query.search[i]; 
var title = result.title; 
console.log(title); } 

現在我想創建一個表，並把每個標題值在不同的行標題所以對於循環迭代的，我用這個代碼，但它不工作

var table = document.getElementById("resultTable"); 

    var row = table.insertRow(i); 
    var cell1 = row.insertCell(i); 

    cell1.innerHTML = data.query.search[i].title; 

在HTML部分我有

<div> 
<table id="resultTable"></table> 
</div> 

我必須把創建表的代碼放到一個單獨的for循環或使用[i]是錯誤的？

這裏是整個代碼：

function build_wiki_search_url(pattern) { 
var base_url = "https://en.wikipedia.org/w/api.php"; 
var format = "&format=json"; 
var request_url = "? action=query&format=json&prop=info&inprop=url&list=search&srsearch="; 
var url = base_url + request_url + pattern; 
return url; 
} 
$(document).ready(function() { 
$("#gosearch").click(function(e) { 
    e.preventDefault(); 
    console.log("Submit button clicked"); 
    var pattern = $("#search").val(); 
    var url = build_wiki_search_url(pattern); 
    $.ajax({ 
     type: "GET", 
     url: url, 
     dataType: 'jsonp', 
     success: function(data) { 
      console.log(data.query.search); 

for (var i = 0; i < data.query.search.length; i++) { 
var result = data.query.search[i]; 
var title = result.title; 
    console.log(title); 

function drawTableHor(data) { 
var table1 = document.getElementById("resultTable1"); 
for (var i = 0; i < data.query.search.length; i++) { 
    var row = table1.insertRow(); 
    for(var prop in data.query.search[i]) { 
    if(prop !== 'title') continue; 
     var cell = row.insertCell(); 
     cell.innerHTML = data.query.search[i][prop]; 
    } 
} 
}; 
    drawTableHor(data); 

    } 

Answer 1

var row = table.insertRow(i); 
var cell1 = row.insertCell(i); 

在這裏，您使用相同的i（我假設週期內）。雖然對於行是可以的，因爲在迭代的每一步都會處理一個新行，但我猜測它對單元格效果不佳，因爲從第二步開始，嘗試在奇怪的索引處插入單元格：2，3等而你在第一，第二和第二位分別沒有任何東西。

隨着你的代碼，我得到了一個只有第一個標題的表格。我會說，你根本不需要函數中的那些索引，並且假設你想「將每個標題值放入不同的行」，請檢查下面的代碼。還要注意，還存在另一種有沒有地方數據 「垂直」=稱號值一行）：

var data = { 
 
query: { 
 
search: [ 
 
{ns: 0, title: "Help", size: 3677, wordcount: 433, snippet: "<span class=\"searchmatch\">Help</span> is any form …mmand-line shells that invokes documentations and"}, 
 
{ns: 0, title: "Online help", size: 7326, wordcount: 380, snippet: "(HTML), which includes HTML <span class=\"searchmat…earchmatch\">help</span> is also provided via live"}, 
 
{ns: 0, title: "Online Super help", size: 7326, wordcount: 380, snippet: "(HTML), which includes HTML <span class=\"searchmat…earchmatch\">help</span> is also provided via live"}, 
 
{ns: 0, title: "Help desk", size: 9491, wordcount: 1296, snippet: "A <span class=\"searchmatch\">help</span> desk is a …ated to a company's or institution's products and"} 
 
] 
 
} 
 
}; 
 
function drawTableHor(data) { 
 
    var table1 = document.getElementById("resultTable1"); 
 
    for (var i = 0; i < data.query.search.length; i++) { 
 
     var row = table1.insertRow(); 
 
     for(var prop in data.query.search[i]) { 
 
     if(prop !== 'title') continue; 
 
      var cell = row.insertCell(); 
 
      cell.innerHTML = data.query.search[i][prop]; 
 
     } 
 
    } 
 
} 
 
// alternative 
 
function drawTableVert(data) { 
 
    var table2 = document.getElementById("resultTable2"); 
 
    var rows = [], props = []; 
 
    for(var prop in data.query.search[0]) { 
 
     rows.push(table2.insertRow()); 
 
     props.push(prop); 
 
    } 
 
    rows.forEach(function(row, index) { 
 
     for (var i = 0; i < data.query.search.length; i++) { 
 
     if(props[index] !== 'title') continue; 
 
      var cell = row.insertCell(); 
 
      cell.innerHTML = data.query.search[i][props[index]]; 
 
     } 
 
    }); 
 
} 
 
// call each function passing your data 
 
drawTableHor(data); 
 
drawTableVert(data);

table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0.5em; 
 
} 
 
td, th { 
 
    border: 1px solid #999; 
 
    padding: 0.5rem; 
 
    text-align: left; 
 
}

<div> 
 
<h1>Data is inserted "horizontally"</h1> 
 
<table id="resultTable1"></table> 
 
<br> 
 
<h1>Data is inserted "vertically"</h1> 
 
<table id="resultTable2"></table> 
 
</div>

希望它能幫助:)

UPDATE

 
function build_wiki_search_url(pattern) { 
 
var base_url = "https://en.wikipedia.org/w/api.php"; 
 
var request_url = "?action=query&format=json&prop=info&inprop=url&list=search&srsearch="; 
 
var url = base_url + request_url + pattern; 
 
return url; 
 
} 
 
function drawTableHor(data) { 
 
var table1 = document.getElementById("resultTable1"); 
 
for (var i = 0; i < data.query.search.length; i++) { 
 
    var row = table1.insertRow(); 
 
    for(var prop in data.query.search[i]) { 
 
    if(prop !== 'title') continue; 
 
     var cell = row.insertCell(); 
 
     cell.innerHTML = data.query.search[i][prop]; 
 
    } 
 
} 
 
} 
 
// UNCOMMENT everything commented out here to follow your original setup. 
 
$(document).ready(function() { 
 
/*$("#gosearch").click(function(e) { 
 
    e.preventDefault();*/ 
 
    var pattern = 'iteration'; //$("#search").val(); 
 
    var url = build_wiki_search_url(pattern); 
 
    $.ajax({ 
 
     type: "GET", 
 
     url: url, 
 
     dataType: 'jsonp', 
 
     success: function(data) { 
 
      drawTableHor(data); 
 
      } 
 
    }); 
 
//}); 
 
});

table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0.5em; 
 
} 
 
td, th { 
 
    border: 1px solid #999; 
 
    padding: 0.5rem; 
 
    text-align: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<h1>Data is inserted "horizontally"</h1> 
 
<table id="resultTable1"></table> 
 
</div>

我在那裏尋找'迭代'一詞，僅舉個例子。在你的情況下，你應該取消我在代碼中注意到的一些事情的註釋。我的意思是#search元素上的點擊功能。