Here you go with the solution https://jsfiddle.net/jLr5vapn/
var data = {
"action": "organizationQueryResponse",
"status": "SUCCESS",
"matchCount": "2",
"organizationDetailsList": [
{
"organizationDetails": {
"organizationID": "xxxxx",
"organizationName": "xxxx",
"parentOpCoName": "yyyy",
"registeredEmailID": "zzzz",
"registeredPhoneNo": "xxxx"
}
},
{
"organizationDetails": {
"organizationID": "xxxxx",
"organizationName": "xxxx",
"parentOpCoName": "yyyy",
"registeredEmailID": "zzzz",
"registeredPhoneNo": "xxxx"
}
}
]
};
// ----- getting the header
var headHTML = "<thead>";
var html = "<tbody>";
// ----- getting the row data
$.each(data.organizationDetailsList, function(i){
html += "<tr>";
if(i === 0)
headHTML += "<tr>";
$.each(data.organizationDetailsList[i].organizationDetails, function(key){
html += "<td>" + data.organizationDetailsList[i].organizationDetails[key] + "</td>";
if(i === 0){
headHTML+= "<th>" + key + "</th>";
}
});
html += "<tr>";
if(i === 0)
headHTML += "</tr></thead>";
});
html += "</tbody>"
$('table').append(headHTML, html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
</table>
I have taken your sample JSON data & created a table out of it.
I have used $.each whatever you are using & just created the html out of that loop and appended it to the table.
Header is also created out of that $.each when i value is 0.
solved Issue in iteration over JSON