Tips on transforming an object containing arrays into a single array

Question

Tips on transforming an object containing arrays into a single array

I'm facing a challenge with converting an object that contains an array into a simpler array. The backend I'm working with returns a list of dogs along with their prices in a format that's proving difficult to manipulate. I've attempted various methods to convert the object into a more manageable array, including attempting to reduce it.

For example, let's say I want to transform the following object:

const data = {
    dogs: [{
            "id": "dog1",
            "priceRange": [
                "low",
                "high"
            ],
            "vaccinated": true,
        },
        {
            "id": "dog2",
            "priceRange": [
                "low",
                "high"
            ],
            "vaccinated": false,
        }
    ],
    "cost": [{
            "id": "low",
            "cost": 200,
        },
        {
            "id": "mid",
            "cost": 400,
        },
        {
            "id": "high",
            "cost": 600,
        }
    ]
};

into this simplified array:

const newArray = [{
        "id": "dog1",
        "priceRange": [{
                "id": "low",
                "cost": 200,
            },
            {
                "id": "high",
                "cost": 600,
            }
        ],
        "vaccinated": true,
    },
    {
        "id": "dog2",
        "priceRange": [{
                "id": "low",
                "cost": 200,
            },
            {
                "id": "high",
                "cost": 600,
            }
        ],
        "vaccinated": false,
    }
]

I'm still exploring different approaches and solutions for this issue.

javascript arrays reduce

Answer 1

Answer №1

To get the accurate cost value, you should first loop through your array of dogs in a.dogs. During each iteration, iterate over the priceRange array as well to match its corresponding value inside the a.cost array and return that specific value instead of the generic strings "low" or "high".

a.dogs.map(dog => ({
    ...dog,
  priceRange: dog.priceRange.map(priceRange => a.cost.find(cost => cost.id === priceRange))
}))

Answer 2

To get the accurate cost value, you should first loop through your array of dogs in a.dogs. During each iteration, iterate over the priceRange array as well to match its corresponding value inside the a.cost array and return that specific value instead of the generic strings "low" or "high".

a.dogs.map(dog => ({
    ...dog,
  priceRange: dog.priceRange.map(priceRange => a.cost.find(cost => cost.id === priceRange))
}))

Answer 3

Answer №2

Utilizing the Array#reduce method, loop through the elements in the array a.cost while updating a Map where the key corresponds to the object's id and the value is the object itself.
Using Array#map, iterate over the elements in the array a.dogs and assign the priceRange values based on the Map using another iteration with Array#map.

const a = {
  "dogs": [ { "id": "dog1", "priceRange": [  "low", "high" ], "vaccinated": true }, { "id": "dog2", "priceRange": [ "low", "high" ], "vaccinated": false } ],
  "cost": [ { "id": "low", "cost": 200 }, { "id": "mid", "cost": 400 }, { "id": "high", "cost": 600 } ]
};

const costMap = a.cost.reduce((map, cost) => 
  map.set(cost.id, cost)
, new Map);

const reducedArray = a.dogs.map(dog => ({
  ...dog, 
  priceRange: dog.priceRange.map(range => {
    const { id, cost } = costMap.get(range) || {};
    return { id, cost};
  })
}));

console.log(reducedArray);

Answer 4

Utilizing the Array#reduce method, loop through the elements in the array a.cost while updating a Map where the key corresponds to the object's id and the value is the object itself.
Using Array#map, iterate over the elements in the array a.dogs and assign the priceRange values based on the Map using another iteration with Array#map.

const a = {
  "dogs": [ { "id": "dog1", "priceRange": [  "low", "high" ], "vaccinated": true }, { "id": "dog2", "priceRange": [ "low", "high" ], "vaccinated": false } ],
  "cost": [ { "id": "low", "cost": 200 }, { "id": "mid", "cost": 400 }, { "id": "high", "cost": 600 } ]
};

const costMap = a.cost.reduce((map, cost) => 
  map.set(cost.id, cost)
, new Map);

const reducedArray = a.dogs.map(dog => ({
  ...dog, 
  priceRange: dog.priceRange.map(range => {
    const { id, cost } = costMap.get(range) || {};
    return { id, cost};
  })
}));

console.log(reducedArray);

Tips on transforming an object containing arrays into a single array

Answer №1

Answer №2

Similar questions

What is the best way to retrieve a nested object array using a Signal in Angular/Typescript?

I desire for my advertisement to be showcased whenever I click on a href link

Tips for modifying the HTML generated on the server side before it is rendered on the client side in Quasar

Bovine without Redis to oversee queue operations

Three.js Ellipse Curve Rotation

Angular HTML is throwing an error related to object arrays

The connection between the type of request and the corresponding response in an Ajax function

javascript method to retrieve specific value from row column upon button click

I am having issues with the accuracy of my JavaScript number validation function

Data sent through AJAX messaging is not being acknowledged

Can components in Vue.js share functions?

CSS trick for masking line borders with parent corner radius

The Dropdownlist jQuery is having trouble retrieving the database value

Prevent JavaScript from sending a POST request to a specific URL

Is there a way to dynamically fetch and run JavaScript code from the server without resorting to the use of the

Tips for choosing the default first option in a select box or dropdown menu

Using a PHP for loop in conjunction with data from a database and an API yields a singular calculated result

Tips for efficiently storing multiple sets of border coordinates to generate a polyline

Is it better to use scale.set() or simply increase the size of the model in Three.js?

Intermittent issue with div background switching feature on Firefox