Reputation: 364
I need to map an object of arrays. Once mapped I want to display the first row of content in a div. I have an object of arrays coming from the db and I'm only mapping 2 of the 4 arrays within the object.
What I want to be able to do is use the mapped arrays and then get all the data that corresponds with that mapped array and display it all in a div. The user can click an up or down arrow and then change what is displayed, but I'm having trouble getting it to show the next or prev data in the object. I have the clicking function properly set up (worked with test data) just think it's not working because I'm not mapping it correctly.
Original object coming from db:
object: {
PageNum: [array of items],
RowNum: [array of items],
CustomerName: [array of items],
FacilityName: [array of items]
}
mapping the arrays:
var delDS = [{
pageNum : delPageData["PageNum"],
rowNum : delPageData["RowNum"]
}];
var delMappedArray = delDS.map(function(obj) {
var rObj = {};
rObj[obj.pageNum] = obj.rowNum;
return rObj;
});
which returns something like this:
[object]
0: Object
2,2,4,4,6: Array(5)
0: "24"
1: "26"
2: "2"
3: "4"
4: "10"
length: 5
Upvotes: 1
Views: 143
Reputation: 1222
Try something like this:
//map the data
delPD = delPageData.PageNum.map((x,i) => ({
pageNum: x,
rowNum: delPageData["RowNum"][i],
cName: delPageData["CustomerName"][i],
fName: delPageData["FacilityName"][i],
}));
//sort the data
delPD.sort(function(a,b) {
if(a.pageNum == b.pageNum) {
return (a.rowNum - b.rowNum);
} else {
return (a.pageNum - b.pageNum);
}
});
//give the data an index number for ordering purposes later
for(var i=0; i<delPD.length; i++) {
delPD[i].index = i;
}
This is first mapping the array of objects and creating a new array. Then you are sorting the new array by page numbers and putting them in order. Then you're adding an index number to each object. This way you can use it later in your code if need be.
Hope this helps!
Upvotes: 1