Create the table with json data

Question

I want to create a table with json response and I used reduce function to parse the array.I'm getting reduce not a function error.I want to make the table header as colModels title as header and data of 'Arvind partha','Us West' and so on as td body.

const response={"leads":{"data":[{"UserName":"Arvind Partha","Geo":"US West","LeadStage":"SGL","Firstname":"Julie","Lastname":"Daly","CompanyName":"","Region":"North America","JobTitle":"VP Digital Commerce","Theme":"Digital Retail - Re-Inventing In-Sotre experience","Department":"","Designation":"Vice president","TargetSource":"Database","Medium":"Email","Status":"New","DigitalMarketingOwner":"kishore.natarajan","MQLCallingOwner":"","Practice":"Retail","ServiceLine":"Retail","datecreated":"02-Jun-2020","datemodified":"02-Jun-2020"},{"UserName":"Harish Rajagopalan","Geo":"US West","LeadStage":"MGL","Firstname":"preeti","Lastname":"viswanath","CompanyName":"","Region":"North America","JobTitle":"","Theme":"Oracle Retail - Maximize business value out of oracle retail solutions","Department":"","Designation":"Manager","TargetSource":"","Medium":"","Status":"New","DigitalMarketingOwner":"","MQLCallingOwner":"","Practice":"Retail","ServiceLine":"Retail","datecreated":"17-Jun-2020","datemodified":"18-Jun-2020"}],"ColModels":[{"data":"UserName","title":"User Name"},{"data":"Geo","title":"Geo"},{"data":"LeadStage","title":"Lead Stage"},{"data":"Firstname","title":"First Name"},{"data":"Lastname","title":"Last Name"},{"data":"CompanyName","title":"Company Name"},{"data":"Region","title":"Region"},{"data":"JobTitle","title":"Job Title"},{"data":"Theme","title":"Theme"},{"data":"Department","title":"Department"},{"data":"Designation","title":"Designation"},{"data":"TargetSource","title":"Target Source"},{"data":"Medium","title":"Medium"},{"data":"Status","title":"Status"},{"data":"DigitalMarketingOwner","title":"Digital Marketing Owner"},{"data":"MQLCallingOwner","title":"MQL Calling Owner"},{"data":"Practice","title":"Practice"},{"data":"ServiceLine","title":"Service Line\/Vertical"},{"data":"datecreated","title":"Date Created","formatter":"date","formatoptions":{"newformat":"d-M-yy"}},{"data":"datemodified","title":"Date Modified"}],"types":{"RGL":"RGL","SGL":"Named Lead","MGL":"SAL","PGL":"PGL","BGL":"BGL","Back to marketing":"Back to marketing","Uncategorized lead":""}},"meetings":{"data":[],"ColModels":[{"data":"UserName","title":"User Name"},{"data":"Geo","title":"Geo"},{"data":"RelatedTo","title":"Related to"},{"data":"Subject","title":"Subject"},{"data":"Description","title":"Description"},{"data":"Status","title":"Status"},{"data":"MeetingType","title":"Meeting Type"},{"data":"MeetingHash","title":"Meeting #"},{"data":"Location","title":"Location"},{"data":"startdate","title":"Start Date"},{"data":"enddate","title":"End Date"},{"data":"DurationHours","title":"Duration Hours"},{"data":"DurationMinutes","title":"Duration Minutes"},{"data":"datecreated","title":"Date Created"},{"data":"datemodified","title":"Date Modified"}],"types":{"1st Presentation \/ Meeting":"first_time","Follow-On Meetings":"follow_up","Hold\/Uncategorized":""}},"opportunity":{"data":[],"ColModels":[{"data":"Username","title":"User Name"},{"data":"Geo","title":"Geo"},{"data":"OpportunityGeo","title":"Opportunity Geo"},{"data":"CompanyName","title":"Company Name"},{"data":"SalesStage","title":"Sales Stage"},{"data":"Probability","title":"Probability (%)"},{"data":"PipelineValue","title":"Pipeline Value"},{"data":"CustomerAccountType","title":"Customer Account Type"},{"data":"OpportunityType","title":"Opportunity Type"},{"data":"TeamType","title":"Team Type"},{"data":"LeadSource","title":"Lead Source"},{"data":"ServiceLine","title":"Service Line\/Vertical"},{"data":"datecreated","title":"Date Created"},{"data":"datemodified","title":"Date Modified"},{"data":"salesstagelastmodified","title":"Sales Stage Last Modified"}],"types":{"Identified Opportunities":"Identified","QO under evaluation":"QO_to be approved"}},"reaches":{"data":[],"ColModels":[{"data":"Username","title":"User Name"},{"data":"Geo","title":"Geo"},{"data":"Subject","title":"Subject"},{"data":"Description","title":"Description"},{"data":"Relatedto","title":"Related To"},{"data":"Calloutcome","title":"Call out come"},{"data":"Status","title":"Status"},{"data":"startdate","title":"Start Date"},{"data":"enddate","title":"End Date"},{"data":"Duration","title":"Duration"},{"data":"datecreated","title":"Date Created"},{"data":"datemodified","title":"Date Modified"}],"types":{"Reaches":"Reaches"}},"activities":{"data":[],"ColModels":[{"data":"Username","title":"User Name"},{"data":"Geo","title":"Geo"},{"data":"Subject","title":"Subject"},{"data":"Description","title":"Description"},{"data":"Relatedto","title":"Related To"},{"data":"From","title":"From"},{"data":"datesent","title":"Date Sent"},{"data":"Status","title":"Status"},{"data":"datecreated","title":"Date Created"},{"data":"datemodified","title":"Date Modified"}],"types":{"Activities":"Activities"}},"category":{"leads":{"RGL":"RGL","SGL":"Named Lead","MGL":"SAL","PGL":"PGL","BGL":"BGL","Back to marketing":"Back to marketing","Uncategorized lead":""},"meeting":{"1st Presentation \/ Meeting":"first_time","Follow-On Meetings":"follow_up","Hold\/Uncategorized":""},"opportunity":{"Identified Opportunities":"Identified","QO under evaluation":"QO_to be approved"},"reaches":{"Reaches":"Reaches"},"activities":{"Activities":"Activities"}},"Month":["June-2020"],"Week":["Week 1","Week 2","Week 3","Week 4"],"Team":null};
if((response.leads.data).length) {
var colModels = response.leads.ColModels;

var data = response.leads.data;
console.log(colModels);
console.log(data);
console.log(colModels.title);

colModels.forEach(tr => {
console.log(tr.title);
  const thString = tr.title.reduce((res, d) => res + '<td>' + d + '</td>', "");
  //$('#tbody').append("<tr>" + trString + "</tr>"); 
});
$('#thead').html(thString);
data.forEach(tr => {
  const trString = tr.data.reduce((res, d) => res + '<td>' + d + '</td>', "");
  $('#tbody').append("<tr>" + trString + "</tr>");
});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
 <thead id="thead"></thead>
 <tbody id="tbody"></tbody>
</table>

So it's telling you tr.data or tr.title is not an array. When you debug it do you see it as one for all instances? — charlietfl
– charlietfl, Commented Jul 6, 2020 at 5:39

Naga Sai A · Accepted Answer · 2020-07-06 06:10:15Z

To achieve expected result, use below option of string concatenation instead of reduce function

Issue from your code is, below mentioned tr is object and reduce works only for arrays.
Removed reduce function and added string concatenation using variable 'head'
```
 let head = '<tr>';  
 colModels.forEach(tr => {
 console.log("tr", tr);
 head = head + '<td>' + tr.title + '</td>';
 });
```

Other reduce function is also trying to loop through object instead of array and fixed that using Object.entries

 data.forEach((tr) => {
 const trString = Object.entries(tr).reduce(
   (res, d) => res + "<td>" + d[1] + "</td>",
   ""
 );
 $("#tbody").append("<tr>" + trString + "</tr>");

});

Working code for reference

const response={"leads":{"data":[{"UserName":"Arvind Partha","Geo":"US West","LeadStage":"SGL","Firstname":"Julie","Lastname":"Daly","CompanyName":"","Region":"North America","JobTitle":"VP Digital Commerce","Theme":"Digital Retail - Re-Inventing In-Sotre experience","Department":"","Designation":"Vice president","TargetSource":"Database","Medium":"Email","Status":"New","DigitalMarketingOwner":"kishore.natarajan","MQLCallingOwner":"","Practice":"Retail","ServiceLine":"Retail","datecreated":"02-Jun-2020","datemodified":"02-Jun-2020"},{"UserName":"Harish Rajagopalan","Geo":"US West","LeadStage":"MGL","Firstname":"preeti","Lastname":"viswanath","CompanyName":"","Region":"North America","JobTitle":"","Theme":"Oracle Retail - Maximize business value out of oracle retail solutions","Department":"","Designation":"Manager","TargetSource":"","Medium":"","Status":"New","DigitalMarketingOwner":"","MQLCallingOwner":"","Practice":"Retail","ServiceLine":"Retail","datecreated":"17-Jun-2020","datemodified":"18-Jun-2020"}],"ColModels":[{"data":"UserName","title":"User Name"},{"data":"Geo","title":"Geo"},{"data":"LeadStage","title":"Lead Stage"},{"data":"Firstname","title":"First Name"},{"data":"Lastname","title":"Last Name"},{"data":"CompanyName","title":"Company Name"},{"data":"Region","title":"Region"},{"data":"JobTitle","title":"Job Title"},{"data":"Theme","title":"Theme"},{"data":"Department","title":"Department"},{"data":"Designation","title":"Designation"},{"data":"TargetSource","title":"Target Source"},{"data":"Medium","title":"Medium"},{"data":"Status","title":"Status"},{"data":"DigitalMarketingOwner","title":"Digital Marketing Owner"},{"data":"MQLCallingOwner","title":"MQL Calling Owner"},{"data":"Practice","title":"Practice"},{"data":"ServiceLine","title":"Service Line\/Vertical"},{"data":"datecreated","title":"Date Created","formatter":"date","formatoptions":{"newformat":"d-M-yy"}},{"data":"datemodified","title":"Date Modified"}],"types":{"RGL":"RGL","SGL":"Named Lead","MGL":"SAL","PGL":"PGL","BGL":"BGL","Back to marketing":"Back to marketing","Uncategorized lead":""}},"meetings":{"data":[],"ColModels":[{"data":"UserName","title":"User Name"},{"data":"Geo","title":"Geo"},{"data":"RelatedTo","title":"Related to"},{"data":"Subject","title":"Subject"},{"data":"Description","title":"Description"},{"data":"Status","title":"Status"},{"data":"MeetingType","title":"Meeting Type"},{"data":"MeetingHash","title":"Meeting #"},{"data":"Location","title":"Location"},{"data":"startdate","title":"Start Date"},{"data":"enddate","title":"End Date"},{"data":"DurationHours","title":"Duration Hours"},{"data":"DurationMinutes","title":"Duration Minutes"},{"data":"datecreated","title":"Date Created"},{"data":"datemodified","title":"Date Modified"}],"types":{"1st Presentation \/ Meeting":"first_time","Follow-On Meetings":"follow_up","Hold\/Uncategorized":""}},"opportunity":{"data":[],"ColModels":[{"data":"Username","title":"User Name"},{"data":"Geo","title":"Geo"},{"data":"OpportunityGeo","title":"Opportunity Geo"},{"data":"CompanyName","title":"Company Name"},{"data":"SalesStage","title":"Sales Stage"},{"data":"Probability","title":"Probability (%)"},{"data":"PipelineValue","title":"Pipeline Value"},{"data":"CustomerAccountType","title":"Customer Account Type"},{"data":"OpportunityType","title":"Opportunity Type"},{"data":"TeamType","title":"Team Type"},{"data":"LeadSource","title":"Lead Source"},{"data":"ServiceLine","title":"Service Line\/Vertical"},{"data":"datecreated","title":"Date Created"},{"data":"datemodified","title":"Date Modified"},{"data":"salesstagelastmodified","title":"Sales Stage Last Modified"}],"types":{"Identified Opportunities":"Identified","QO under evaluation":"QO_to be approved"}},"reaches":{"data":[],"ColModels":[{"data":"Username","title":"User Name"},{"data":"Geo","title":"Geo"},{"data":"Subject","title":"Subject"},{"data":"Description","title":"Description"},{"data":"Relatedto","title":"Related To"},{"data":"Calloutcome","title":"Call out come"},{"data":"Status","title":"Status"},{"data":"startdate","title":"Start Date"},{"data":"enddate","title":"End Date"},{"data":"Duration","title":"Duration"},{"data":"datecreated","title":"Date Created"},{"data":"datemodified","title":"Date Modified"}],"types":{"Reaches":"Reaches"}},"activities":{"data":[],"ColModels":[{"data":"Username","title":"User Name"},{"data":"Geo","title":"Geo"},{"data":"Subject","title":"Subject"},{"data":"Description","title":"Description"},{"data":"Relatedto","title":"Related To"},{"data":"From","title":"From"},{"data":"datesent","title":"Date Sent"},{"data":"Status","title":"Status"},{"data":"datecreated","title":"Date Created"},{"data":"datemodified","title":"Date Modified"}],"types":{"Activities":"Activities"}},"category":{"leads":{"RGL":"RGL","SGL":"Named Lead","MGL":"SAL","PGL":"PGL","BGL":"BGL","Back to marketing":"Back to marketing","Uncategorized lead":""},"meeting":{"1st Presentation \/ Meeting":"first_time","Follow-On Meetings":"follow_up","Hold\/Uncategorized":""},"opportunity":{"Identified Opportunities":"Identified","QO under evaluation":"QO_to be approved"},"reaches":{"Reaches":"Reaches"},"activities":{"Activities":"Activities"}},"Month":["June-2020"],"Week":["Week 1","Week 2","Week 3","Week 4"],"Team":null};
if((response.leads.data).length) {
var colModels = response.leads.ColModels;

var data = response.leads.data;
console.log('colModels', colModels);
console.log("data", data);
console.log(colModels.title);
let head = '<tr>'
colModels.forEach(tr => {
console.log("tr", tr);
head = head + '<td>' + tr.title + '</td>';
});
  $('#thead').html(head + '</tr>');
data.forEach(tr => {
  const trString = Object.entries(tr).reduce((res, d) => res + '<td>' + d[1] + '</td>', "");
  $('#tbody').append("<tr>" + trString + "</tr>");
});
}

table, tr, td, th{
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
 <thead id="thead"></thead>
 <tbody id="tbody"></tbody>
</table>

Codepen for reference - https://codepen.io/nagasai/pen/qBbxJrj

Is is possible to clear the table data and append the concated data

Collectives™ on Stack Overflow

Create the table with json data

1 Answer 1

1 Comment

Hot Network Questions