Mapping two objects and an array in Javascript can be achieved by utilizing the `map()` method

Question

Mapping two objects and an array in Javascript can be achieved by utilizing the `map()` method

I have an object and array with a response from my server that I need to convert to another format in order to display the value on the website. Do I need to use object mapping or parse JSON for this? If so, can someone please help?

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

,

Convert the above to the following:

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

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

The code above works fine by creating a variable and looping through the header to get its value and print it in html. The header and data are retrieved from the server, so when I enter something like "A", it will look for the SEOUL header and print 38 in the table below.

key value : A

header : SEOUL BUSAN NAMPODONG

data : 38 CAPITAL M31

I have a lot of data in the database, the above is just an example. So let's say I enter B, which is not in the database, I want to see the value "Not found" printed in html. However, this code currently prints nothing, so I am unsure if it is being processed correctly.

javascript arrays json mapping

Answer 1

Answer №1

In this code snippet, a variable is created to store the values of an object's properties. The code then loops over the keys in "myObj.header" and retrieves the corresponding values from "myObj.data[0]". These key-value pairs are stored in a temporary object called tempObj, which is displayed in the console at the end.

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

In this code snippet, a variable is created to store the values of an object's properties. The code then loops over the keys in "myObj.header" and retrieves the corresponding values from "myObj.data[0]". These key-value pairs are stored in a temporary object called tempObj, which is displayed in the console at the end.

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 3

Answer №2

Upon receiving from the server, it appears to be a JSON string.

This scenario involves two arrays that need to be combined into an object using the reduce method. Here is one way to achieve that:

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]; // Since there was a nested array, the first element needed to be accessed.
  return accumulator;
}, {});
console.log(result);

If the nested array within the data attribute is intentional and not a formatting error, you would need to map its elements before proceeding with the reduce operation.

Answer 4

Upon receiving from the server, it appears to be a JSON string.

This scenario involves two arrays that need to be combined into an object using the reduce method. Here is one way to achieve that:

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]; // Since there was a nested array, the first element needed to be accessed.
  return accumulator;
}, {});
console.log(result);

If the nested array within the data attribute is intentional and not a formatting error, you would need to map its elements before proceeding with the reduce operation.

Answer 5

Answer №3

To achieve this, you can utilize the zipObj function found in the Ramda library.

Here is an example of how the code would appear:

const result = {"header":["TOKYO","KYOTO","OSAKA"],"data":[[25,"METROPOLIS","K24"]]}

const object = R.zipObj(result.header, result.data[0])
console.log(object)

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

Answer 6

To achieve this, you can utilize the zipObj function found in the Ramda library.

Here is an example of how the code would appear:

const result = {"header":["TOKYO","KYOTO","OSAKA"],"data":[[25,"METROPOLIS","K24"]]}

const object = R.zipObj(result.header, result.data[0])
console.log(object)

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

Answer 7

Answer №4

To transform the new data into objects with specific keys, you can utilize a mapping technique.

The output will be an array of objects, given that your information is stored in a nested array structure, even though it appears that there could potentially be multiple rows of data.

var data = { header: ["TOKYO", "OSAKA", "SHIBUYA"], data: [[42, "METROPOLIS", "M21"]] },
    result = data.data.map(item => Object.assign(...data.header.map((key, index) => ({ [key]: item[index] }))));

console.log(result);

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

Answer 8

To transform the new data into objects with specific keys, you can utilize a mapping technique.

The output will be an array of objects, given that your information is stored in a nested array structure, even though it appears that there could potentially be multiple rows of data.

var data = { header: ["TOKYO", "OSAKA", "SHIBUYA"], data: [[42, "METROPOLIS", "M21"]] },
    result = data.data.map(item => Object.assign(...data.header.map((key, index) => ({ [key]: item[index] }))));

console.log(result);

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

Answer 9

Answer №5

To convert the array of arrays stored in the data variable into an array of objects, you can iterate over each sub-array and use the strings in the header array as keys:

function restructureData(inputObj) {
  return inputObj.data.map(function(subArray) {             
    return subArray.reduce(function(obj, value, index) {       
      obj[inputObj.header[index]] = value;                        
      return obj;
    }, {});
  });
}

var inputObj = {"header":["SEOUL","BUSAN","NAMPODONG"],"data":[[38,"CAPITAL","M31"], [10,"OTHER","M01"]]};
var modifiedData = restructureData(inputObj);

console.log(modifiedData);

Answer 10

To convert the array of arrays stored in the data variable into an array of objects, you can iterate over each sub-array and use the strings in the header array as keys:

function restructureData(inputObj) {
  return inputObj.data.map(function(subArray) {             
    return subArray.reduce(function(obj, value, index) {       
      obj[inputObj.header[index]] = value;                        
      return obj;
    }, {});
  });
}

var inputObj = {"header":["SEOUL","BUSAN","NAMPODONG"],"data":[[38,"CAPITAL","M31"], [10,"OTHER","M01"]]};
var modifiedData = restructureData(inputObj);

console.log(modifiedData);

Answer 11

Answer №6

While the responses provided above are indeed helpful, allow me to present an alternative solution that utilizes the reduce method.

var example = {
  "categories": ["FRUITS", "VEGETABLES", "DAIRY"],
  "details": [
    [10, "APPLE", "BANANA"]
  ]
};

var output = example.categories.reduce(function(accumulator, value, index) {
    accumulator[value] = example.details[0][index];
    return accumulator;
}, {})

console.log(output)

Answer 12

While the responses provided above are indeed helpful, allow me to present an alternative solution that utilizes the reduce method.

var example = {
  "categories": ["FRUITS", "VEGETABLES", "DAIRY"],
  "details": [
    [10, "APPLE", "BANANA"]
  ]
};

var output = example.categories.reduce(function(accumulator, value, index) {
    accumulator[value] = example.details[0][index];
    return accumulator;
}, {})

console.log(output)

Mapping two objects and an array in Javascript can be achieved by utilizing the `map()` method

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Is there a way to use Jackson to deserialize JSON into a Map<String, Object> as a member variable in Java?

How come HTML components are able to immediately access the updated value of useState, even though it operates asynchronously?

The full execution of Jquery show() does not pause until it finishes

Unable to locate a declaration file for the 'mymodule' module

Coinciding titles within flot pie chart

Dealing with null values in JAXB (MOXy) unmarshalling

Hide the selection box when hovering over the Div

Is there a way to programmatically prevent the back button from functioning if the previous route pathname in React was 'Login'?

Error: When attempting to utilize the Image-Slider, an issue arises with reading the property 'classList' which is undefined

Develop the react application: Determine the script tag URL based on the environment

What is the best way to use jQuery to show the initial hidden div that has a targeted class?

Issue with error handling while using HTML5 geolocation in Chrome browser

Tips for optimizing ajax performance and creating a speedy ajax-loaded reply text field, similar to the one on Orkut

What is the best way to JSON serialize a Django queryset in python?

The Laravel application is unable to accept the data packaged in JSON format

Is there a way to access data from a previous useState hook in a subsequent useState hook?

Leverage jQuery deferred objects to handle a dynamic amount of AJAX requests

Is it guaranteed that my callbacks will be executed sequentially and in order when iterating with a for loop in Node.js?

Expanding nested content with jQuery and JSON

How to use jQuery to dynamically add a variable to a request in Laravel 5.2