如何在JavaScript中对两个对象和数组进行映射

Question

I have such a object and array which I received response from my server. I need to convert that to second format at below in order to print the value in the website. Is this something need to do object mapping? or parse JSON or please kindly help.

{"header":["SEOUL","BUSAN","NAMPODONG"],"data":[[38,"CAPITAL","M31"]]} ,

Convert from Above to below

'{"SEOUL" : "38", "BUSAN" : "CAPITAL", "NAMPODONG" : "M31"}'

var finalObj = {};
response.header.forEach(function(item, index) {
finalObj[item] = response.data[0][index];
});

Above code is working fine as it create variable and loop for header and get its value and printed in html. the header and data are from the server so when I enter something let say "A" then it will look for SEOUL header then print 38 in html as tables are looks below.

key value : A

header : SEOUL BUSAN NAMPODONG

data : 38 CAPITAL M31

I do have a lot of data in the database, above is just an example. So let say I enter B then the B is not in database so I want to see the value "No found" in html but this code printing nothing so not sure whether it was proceed or not.

Answer 1

Create a variable & loop over the object.header to get each key and object.data[0] to get its value

 var myObj = { "header": ["SEOUL", "BUSAN", "NAMPODONG"], "data": [ [38, "CAPITAL", "M31"] ] } var tempObj = {}; myObj.header.forEach(function(item, index) { tempObj[item] = myObj.data[0][index] }) console.log(tempObj) 

Answer 2

As you received it from server – I assume that it is JSON string.

Basically you have two arrays here that you want to reduce to an object. So I would do it like this:

 const object = JSON.parse('{"header":["SEOUL","BUSAN","NAMPODONG"],"data":[[38,"CAPITAL","M31"]]}'); const result = object.header.reduce(function(accumulator, element, i){ accumulator[element] = object.data[0][i] // You had nested array here so I have to get first element. return accumulator; }, {}); console.log(result); 

I assumed that nested array for data attribute is some kind of formatting mistake. If it's not – you have to map though it's elements first and only then reduce.

Answer 3

You can use zipObj from Ramda library.

The code would look like this:

 const res = {"header":["SEOUL","BUSAN","NAMPODONG"],"data":[[38,"CAPITAL","M31"]]} const obj = R.zipObj(res.header, res.data[0]) console.log(obj) 

 <script src="//cdn.jsdelivr.net/npm/ramda@latest/dist/ramda.min.js"></script> 

Answer 4

You could map the new objects with the wanted keys.

The result is an array with objects, because your data is a nested array with actually only one array. But it looks like taht data could contain more than one row.

 var data = { header: ["SEOUL", "BUSAN", "NAMPODONG"], data: [[38, "CAPITAL", "M31"]] }, result = data.data.map(a => Object.assign(...data.header.map((k, i) => ({ [k]: a[i] })))); console.log(result); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 5

You can map the data array of arrays into another array of object using as keys the strings in header array:

 function transform(obj) { return obj.data.map(function(subArray) { // for each subArray in the data array return subArray.reduce(function(o, val, i) { // create a new object o which... o[ obj.header[i] ] = val; // has key-value pairs where value is the current element of subArray and key is its equivalent (item at the same index) from header array return o; }, {}); }); } var obj = {"header":["SEOUL","BUSAN","NAMPODONG"],"data":[[38,"CAPITAL","M31"], [10,"OTHER","M01"]]}; var result = transform(obj); console.log(result); 

Answer 6

I think the responses above are good as they are, but here is an alternative using reduce in case you didn't know about it

 var response = { "header": ["SEOUL", "BUSAN", "NAMPODONG"], "data": [ [38, "CAPITAL", "M31"] ] }; var result = response.header.reduce(function(accum, v, i) { accum[v] = response.data[0][i]; return accum; }, {}) console.log(result)