I am new to coding and trying to get this problem right. I tried calling the index of the arrays but it prints out columns. Out dev environment is REPL.it, the virtual machine uses node v10.16.0 and help would be greatly appreciate
Input
tableData = [
["first_name", "last_name", "city", "state"],
["Elisabeth", "Gardenar", "Toledo", "OH"],
["Jamaal", "Du", "Sylvania", "OH"],
["Kathlyn", "Lavoie", "Maumee", "OH"]
]
Desired Output
output = [
{ first_name : "Elisabeth", last_name : "Gardenar", city: "Toledo", state : "OH" },
{ first_name : "Jamaal", last_name : "Du", city: "Sylvania", state : "OH" },
{ first_name : "Kathlyn", last_name : "Lavoie", city: "Maumee", state : "OH" }
]
What I have tried so far is this:
function convertTable(){
var p=console.log;
const [header,...rows] = tableData;
var tableObj = new Object;
var intermediateVal = [];
var finalArr = [];
for(var vals=0;vals<rows.length;vals++){
var row = rows[vals]
for (var key=0,val=0;key<header.length;key++,val++){
tableObj[header[key]]=row[val]
}
p(tableObj)
}
}
convertTable(tableData)
Here is a potential solution that uses array reduce.
const tableData = [
["first_name", "last_name", "city", "state"],
["Elisabeth", "Gardenar", "Toledo", "OH"],
["Jamaal", "Du", "Sylvania", "OH"],
["Kathlyn", "Lavoie", "Maumee", "OH"]
];
const keys = tableData.shift();
const formatted = tableData.reduce((agg, arr) => {
agg.push(arr.reduce((obj, item, index) => {
obj[keys[index]] = item;
return obj;
}, {}));
return agg;
}, [])
console.log(formatted);
You're pretty close, but you need to create a new object for each row of the result, and then push that object onto the finalArr
array.
There's also no need for both key
and val
variables, since they're always the same.
tableData = [
["first_name", "last_name", "city", "state"],
["Elisabeth", "Gardenar", "Toledo", "OH"],
["Jamaal", "Du", "Sylvania", "OH"],
["Kathlyn", "Lavoie", "Maumee", "OH"]
];
function convertTable() {
var p = console.log;
const [header, ...rows] = tableData;
var finalArr = [];
for (var vals = 0; vals < rows.length; vals++) {
var row = rows[vals]
var tableObj = {};
for (var key = 0; key < header.length; key++) {
tableObj[header[key]] = row[key]
}
finalArr.push(tableObj);
}
p(finalArr)
}
convertTable(tableData)
You can also leverage the reduce method which is included in arrays.
tableData = [
["Elisabeth", "Gardenar", "Toledo", "OH"],
["Jamaal", "Du", "Sylvania", "OH"],
["Kathlyn", "Lavoie", "Maumee", "OH"]
];
const obj = tableData.reduce((acc, cv, index) => {
acc.push({
first_name: cv[0],
last_name: cv[1],
city: cv[2],
state: cv[3]
});
return acc
},[]);
console.log(obj);
// [ { first_name: 'Elisabeth',
// last_name: 'Gardenar',
// city: 'Toledo',
// state: 'OH' },
// { first_name: 'Jamaal',
// last_name: 'Du',
// city: 'Sylvania',
// state: 'OH' },
// { first_name: 'Kathlyn',
// last_name: 'Lavoie',
// city: 'Maumee',
// state: 'OH' } ]
I'm a developer for the website Friconix, a collection of free icons. Users can include our JS file on their web pages as explain here : https://friconix.com/start/. I would like to gather statistics ...
I'm a developer for the website Friconix, a collection of free icons. Users can include our JS file on their web pages as explain here : https://friconix.com/start/. I would like to gather statistics ...
I'm new to React and am trying to figure out how to make a phonebook. I've gotten quite far but I'm having an issue I can't solve. I'm using React Hooks. Everything works fine, except for when I call ...
I'm new to React and am trying to figure out how to make a phonebook. I've gotten quite far but I'm having an issue I can't solve. I'm using React Hooks. Everything works fine, except for when I call ...
I'm using a lambda function to process a large amount of data (which exceeds 30s) and I am receicing a message from AWS Gateway: Endpoint request timed out I understand this is obviously because ...
I'm using a lambda function to process a large amount of data (which exceeds 30s) and I am receicing a message from AWS Gateway: Endpoint request timed out I understand this is obviously because ...
I'm developing an interactive map, where can be seen arrows. These arrows are made with SVG code. When the SVG container is clicked, a popup is showed like in the figure down below: The main issue, ...
I'm developing an interactive map, where can be seen arrows. These arrows are made with SVG code. When the SVG container is clicked, a popup is showed like in the figure down below: The main issue, ...