Fetching data from nested JSON using jQuery and displaying in table I'm displaying JSON data in a tabular format on a html page using jQuery. 

In the function I'm looping the resp.DATA once to get the key names so it can be displayed as the headings in the table, and a second time to get the values of the keys for all customers.

Can this be done in a way that I only have to loop the resp.DATA once?

JSON data:

    var resp= {
    "ERROR": [],
    "DATA": [{
        "CustomerID": "234",
        "BranchID": "1",
        "LocationID": "26",
        "FirstName": "Lakshmi "
    }, {
        "CustomerID": "235",
        "BranchID": "1",
        "LocationID": "6",
        "FirstName": "Arora "
    }, {
        "CustomerID": "236",
        "BranchID": "1",
        "LocationID": "68",
        "FirstName": "S.K.Raman "
    }, {
        "CustomerID": "237",
        "BranchID": "1",
        "LocationID": "38",
        "FirstName": "Vidya Rao "
    }, {
        "CustomerID": "238",
        "BranchID": "1",
        "LocationID": "18",
        "FirstName": "Raju "
    }, {
        "CustomerID": "239",
        "BranchID": "1",
        "LocationID": "49",
        "FirstName": "K.B.Hebbar "
    }],
    "META": {
        "currentPageNumber": "1",
        "totalPages": "11",
        "rowcountCurrentPage": "10",
        "rowcountTotal": "107"
    }
}


Code:

            var content = '&lt;table class="table table-hover"&gt;';
            var heading = "&lt;tr&gt;";
            var data = "";
            $.each(resp.DATA[0], function(ke, va) {
                heading += '&lt;th&gt;' + ke + '&lt;/th&gt;';
            });
            $.each(resp.DATA, function(key, value) { 

                data += "&lt;tr&gt;";
                $.each(value, function(k, v) {
                   data += '&lt;td&gt;' + v + '&lt;/td&gt;';
                });
                data += "&lt;/tr&gt;";
            });
            heading += "&lt;/tr&gt;";
           content += heading + data + "&lt;/table&gt;";
            $('#data').append(content);


HTML file:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;COnsuming rest webservice&lt;/title&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt; &lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Consuming REST api&lt;/h1&gt;
    &lt;div class="container"&gt;
        &lt;div id="data"&gt; &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- &lt;input type="button" id="driver" value="Load Data" /&gt; --&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;


You can see a working example here.
You may take advantage of reduce() and map() functions to have no loop at all, like this:

$('#data').append(
  resp.DATA.reduce((table, obj, index) =&gt; (
    table + (
      !index ? (
        Object.keys(obj).reduce((header, key) =&gt; `${header}&lt;th&gt;${key}`, '&lt;tr&gt;')
      ) : ''
    ) + $.map(obj, v =&gt; v).reduce((row, value) =&gt; `${row}&lt;td&gt;${value}`, '&lt;tr&gt;')
  ), '&lt;table class="table table-hover"&gt;') + '&lt;/table&gt;'
);


I also used some tagged strings, so more reducing the size of the code.
Additionally it works a bit faster than the original version, as you can observe with the following snippet.



var resp= {
  "ERROR": [],
  "DATA": [{
    "CustomerID": "234",
    "BranchID": "1",
    "LocationID": "26",
    "FirstName": "Lakshmi "
  }, {
    "CustomerID": "235",
    "BranchID": "1",
    "LocationID": "6",
    "FirstName": "Arora "
  }, {
    "CustomerID": "236",
    "BranchID": "1",
    "LocationID": "68",
    "FirstName": "S.K.Raman "
  }, {
    "CustomerID": "237",
    "BranchID": "1",
    "LocationID": "38",
    "FirstName": "Vidya Rao "
  }, {
    "CustomerID": "238",
    "BranchID": "1",
    "LocationID": "18",
    "FirstName": "Raju "
  }, {
    "CustomerID": "239",
    "BranchID": "1",
    "LocationID": "49",
    "FirstName": "K.B.Hebbar "
  }],
  "META": {
    "currentPageNumber": "1",
    "totalPages": "11",
    "rowcountCurrentPage": "10",
    "rowcountTotal": "107"
  }
}

var begTime = performance.now();var content = '&lt;table class="table table-hover"&gt;';
var heading = "&lt;tr&gt;";
var data = "";
$.each(resp.DATA[0], function(ke, va) {
  heading += '&lt;th&gt;' + ke + '&lt;/th&gt;';
});
$.each(resp.DATA, function(key, value) { 
  data += "&lt;tr&gt;";
  $.each(value, function(k, v) {
    data += '&lt;td&gt;' + v + '&lt;/td&gt;';
  });
  data += "&lt;/tr&gt;";
});
heading += "&lt;/tr&gt;";
content += heading + data + "&lt;/table&gt;";
$('#data').append(content);
$('#data').append(`&lt;h3&gt;OLD: ${performance.now() - begTime} ms&lt;/h3&gt;`);

var begTime = performance.now();
$('#data').append(
  resp.DATA.reduce((table, obj, index) =&gt; (
    table + (
      !index ? (
        Object.keys(obj).reduce((header, key) =&gt; `${header}&lt;th&gt;${key}`, '&lt;tr&gt;')
      ) : ''
    ) + $.map(obj, v =&gt; v).reduce((row, value) =&gt; `${row}&lt;td&gt;${value}`, '&lt;tr&gt;')
  ), '&lt;table class="table table-hover"&gt;') + '&lt;/table&gt;'
);

$('#data').append(`&lt;h3&gt;NEW: ${performance.now() - begTime} ms&lt;/h3&gt;`);
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;COnsuming rest webservice&lt;/title&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt; &lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Consuming REST api&lt;/h1&gt;
    &lt;div class="container"&gt;
        &lt;div id="data"&gt; &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- &lt;input type="button" id="driver" value="Load Data" /&gt; --&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;




NOTE: in your version as well as mine, we never take care of the keys in nested objects: they work only if they appear always in the same order!