What is the best way to fill an array with objects that each contain an internal array using data retrieved from a REST API?

Question

What is the best way to fill an array with objects that each contain an internal array using data retrieved from a REST API?

I've been searching for a solution online for about an hour now, but I haven't found the right answer yet. So, I decided to share the response I'm getting from the API with you:

[
  {
    "Name": "name1",
    "Title": "Name One",
    "Children": [
      {
        "Name": "Name 1.1",
        "Title": "Name one point one"
      },
     ]

Now, I need this data to fit into a specific format like this:

{
title: 'Name One',
value: 'name1',
key: '1',
children: [
  {
    title: 'Name one point one',
    value: 'Name 1.1',
    key: 'key1',
  },

I have been trying to achieve this using a foreach loop, but it's not working as expected because I need to do all of this within one instance of a loop. Here is what I tried (using vue2):

   created() {
    getData().then(response => {
      const formattedResponse = []
      response.forEach((el, key) => {
        formattedResponse.title = response.Title
        formattedResponse.name = response.Name
        formattedResponse.children = response.Children
      })
    })

javascript arrays foreach vuejs2

Answer 1

Answer №1

Utilize the map method on the main array and employ destructuring assignment to extract properties by key, rename them, and repeat this process with the children array as well. Finally, return the updated array of objects.

const data=[{Name:"name1",Title:"Name One",Children:[{Name:"Name 1.1",Title:"Name one point one"}]},{Name:"name2",Title:"Name Two",Children:[{Name:"Name 1.2",Title:"Name one point two"}]];

const result = data.map((obj, key) => {

  const { Title: title, Name: value } = obj;
  
  const children = obj.Children.map(obj => {
    const { Title: title, Name: value } = obj;
    return { title, value, key: (key + 1).toString() };
  });
  
  return { title, value, children };
   
});

console.log(result);

Answer 2

Utilize the map method on the main array and employ destructuring assignment to extract properties by key, rename them, and repeat this process with the children array as well. Finally, return the updated array of objects.

const data=[{Name:"name1",Title:"Name One",Children:[{Name:"Name 1.1",Title:"Name one point one"}]},{Name:"name2",Title:"Name Two",Children:[{Name:"Name 1.2",Title:"Name one point two"}]];

const result = data.map((obj, key) => {

  const { Title: title, Name: value } = obj;
  
  const children = obj.Children.map(obj => {
    const { Title: title, Name: value } = obj;
    return { title, value, key: (key + 1).toString() };
  });
  
  return { title, value, children };
   
});

console.log(result);

Answer 3

Answer №2

Your API reply is in JSON format. Simply follow these steps:

var data=JSON.parse(API response);

Answer 4

Your API reply is in JSON format. Simply follow these steps:

var data=JSON.parse(API response);

What is the best way to fill an array with objects that each contain an internal array using data retrieved from a REST API?

Answer №1

Answer №2

Similar questions

The ng-click event in AngularJS does not function as expected when nested within another ng-repeat loop

Opening a browser tab discreetly and extracting valuable data from it

develop a Java 2D array

Storing extensive JSON data with AJAX, jQuery, and Java

Tips for creating a non-blocking sleep function in JavaScript/jQuery

Basic event listener function, functional in CodePen but not operating in Chrome web browser

Use Google Maps to plan your route and find out the distance in kilometers as well as the

Is it feasible to access reference images contained within a zip/tar file using html/javascript with the help of a library?

Creating separate Vuex stores for dynamic components

Utilize three.js to set the camera's position and rotation

A guide to using JavaScript to retrieve a CSV file in HTML and store its contents in an array

Here are some steps for generating a non-integer random number that is not in the format of 1.2321312312

What is the process for appending a value to an array of JSON objects?

Combine various input data and store it in a variable

Seamless Axios operations even without internet connection in Vue.js

retrieving the result from an asynchronous function in Node.js

Creating a scrolling effect similar to the Nest Thermostat

Troubleshooting a JQuery accordion malfunction within a table

Iterating through a JSON object to verify the presence of a specific value

Unexpected behavior observed with callback function when inserting a query in Node.js