I'm trying to use two arrays to populate a couple of each statements instead of writing it out 20 times for every attribute.
Here's what I was thinking. The idea here is to get the data (stored in mainData
). I need a number of objects from this data, so I put those in an array ($dataPoints
). I'm taking all of this data an appending it to a table. I'm adding the data to specific rows with specific id
s (stored in $tableIds
).
So, the basic idea...for every item in $dataPoints
, look up that part of the data and append it to the table in the place indicated by the id
s in the same position in the array. Like so...
var $dataPoints = ['name','description','subtitle'];
var $tableIds = ['mNames','mDescription','mSubtitle'];
$.each($dataPoints, function(index, val) {
$.each(mainData.val[index].source_values, function(index, val) {
$("#matrix_datatable").find('#'+$tableIds[index])
.append($('<td class="tableCells">')
.append(val.value + '</td>')
)
});
});
However, this line:
$.each(mainData.val[index].source_values, function(index, val) {
is throwing an error:
Uncaught TypeError: Cannot read property '0' of undefined
What am I missing here? Is there a simpler way to do this?
EDIT: Note that this works perfectly.
$.each(mainData.subtitle.source_values, function(index, val) {
$("#matrix_datatable").find('#mSubtitle')
.append($('<td class="tableCells">')
.append(val.value + '</td>')
)
});
However, I don't want to write this out for the 20 different objects within mainData
.