I am relatively new to the world of JavaScript, so please be patient with me!
Currently, I am retrieving data from an AWS DynamoDB using a lambda script connected to an API gateway.
The JavaScript function on my page successfully issues a GET request for this data. Here is how the retrieved data looks:
{"Items":[{"issue":"my issue","email":"john.doe@example.com","caseDate":1496543576984,"phone":"1234567890","status":"queueing","enterpriseID":"john.doe"},{"issue":"Test issue 02","email":"jane.smith@example.com","caseDate":1496543945585,"phone":"1234567890","status":"queueing","enterpriseID":"jane.smith"}],"Count":2,"ScannedCount":2}
My objective is to dynamically populate a table on a webpage with this data. Below is the code where I attempt to reorder the data items to align with specific column headings:
var API_URL = 'https://myapi.execute-api.us-west-2.amazonaws.com/dev/cases';
var table = document.createElement("table");
$(document).ready(function(){
$.ajax({
type: 'GET',
url: API_URL,
success: function(data){
//alert(data);
table.setAttribute("id", "myTable");
var tableHeader = document.createElement("thead");
var headerNames = ["Date", "Enterprise ID", "Client Phone", "Client Email",
"Case Status", "Client Issue"];
headerNames.forEach(function(header){
var tableHeaderItem = document.createElement("th");
var headerText = document.createTextNode(header.toString());
tableHeaderItem.appendChild(headerText);
tableHeader.appendChild(tableHeaderItem);
});
table.appendChild(tableHeader);
data.Items.forEach(function(queueItem){
var myTableRow = document.createElement("tr");
myTableRow.setAttribute("id", queueItem.date);
var arr1 = $.map(queueItem, function(value, index) {
return [value];
});
const map =[2,5,3,1,4,0]
const arr3 = Array.apply(null, Array(map.length))
arr3.map((d, i) => arr3[map[i]] = arr1[i]);
arr3.forEach(function(item){
var tableItem = document.createElement("td");
var itemText = document.createTextNode(item);
tableItem.appendChild(itemText);
myTableRow.appendChild(tableItem);
});
table.appendChild(myTableRow);
})
document.getElementById("queueTable").appendChild(table);
}
});
});After retrieving the data and placing it into an array for iteration, I noticed that the order was not correct. Despite trying various solutions online, including the map function, I still couldn't achieve the desired result:
I expect:
mapping["ID","phone","issue","caseDate","status","email"]
But, unfortunately, I'm getting:
mapping["caseDate","ID","phone","email","status","issue"]
This issue has left me frustrated after hours of searching and tinkering. Any assistance would be greatly appreciated!