Create An Html Table Rows In Js From Iterated Json Array Element Objects

I search for something using wiki API and I get JSON which has the data I want in query.search like so 0 {ns: 0, title: 'Help', size: 3677, wordcount: 433, snippet: '

Solution 1:

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

Here you use the same i (inside the cycle I suppose). While it is ok for rows because at each step of iteration you deal with a new row, I guess it doesn't work well for cells because from the second step on you try to insert a cell at a weird index: 2, 3 etc. while you have nothing at 1st, 1st and 2d positions etc. respectively.

With you code I got a table with only 1st title inside. I would say, you don't need those indexes in the functions at all and assuming you want to "put each title value into separate rows" check the code below. Also notice that there is an alternative there that places data "vertically" = title values are in one row):

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"}
]
}
};
functiondrawTableHor(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];
      }
    }
}
// alternativefunctiondrawTableVert(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 datadrawTableHor(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><tableid="resultTable1"></table><br><h1>Data is inserted "vertically"</h1><tableid="resultTable2"></table></div>

Hope it helps :)

UPDATE

functionbuild_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;
}
functiondrawTableHor(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;
}

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

I am looking there for 'iteration' word just for example. In your case you should uncomment a couple of things under my notice in the code. I mean click function on #search element.

Share