Extract core object from array of objects with lodash or javascript

Question

Extract core object from array of objects with lodash or javascript

In my code, I have an array of objects that each contain a base object with a set of values.

My goal is to remove the base object from all the data and achieve the Expected result shown below.

Here is an example of the array:

[
     {
        "100": {
            "id": "100",
            "name": "Test name 1"
        },
        "101": {
            "id": "101",
            "name": "Test name 2"
        },
        "102": {
            "id": "102",
            "name": "Test name 3"
        }
     }
]

Expected Result

[        
        {
            "id": "100",
            "name": "Test name 1"
        },
        {
            "id": "101",
            "name": "Test name 2"
        },
        {
            "id": "102",
            "name": "Test name 3"
        }         
]

javascript lodash

Answer 1

Answer №1

You can utilize the Array.map() method for iteration, extract object values using Object.values(), and merge the results into a single array by utilizing the spread operator along with Array.concat():

const data = [{"100":{"id":"100","name":"Test name 1"},"101":{"id":"101","name":"Test name 2"},"102":{"id":"102","name":"Test name 3"}}];

const result = [].concat(...
  data.map(o => Object.values(o))
);

console.log(result);

For those using lodash, _.flatMap() in combination with _.values() can achieve similar functionality:

const data = [{"100":{"id":"100","name":"Test name 1"},"101":{"id":"101","name":"Test name 2"},"102":{"id":"102","name":"Test name 3"}}];

const result = _.flatMap(data, _.values);

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

Answer 2

You can utilize the Array.map() method for iteration, extract object values using Object.values(), and merge the results into a single array by utilizing the spread operator along with Array.concat():

const data = [{"100":{"id":"100","name":"Test name 1"},"101":{"id":"101","name":"Test name 2"},"102":{"id":"102","name":"Test name 3"}}];

const result = [].concat(...
  data.map(o => Object.values(o))
);

console.log(result);

For those using lodash, _.flatMap() in combination with _.values() can achieve similar functionality:

const data = [{"100":{"id":"100","name":"Test name 1"},"101":{"id":"101","name":"Test name 2"},"102":{"id":"102","name":"Test name 3"}}];

const result = _.flatMap(data, _.values);

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

Extract core object from array of objects with lodash or javascript

Answer №1

Similar questions

Retrieving the real server response using Angular's $resource

Looking for assistance in adding some animated flair to your website as users scroll

Creating a new image by converting canvas to an image and displaying it in a separate window with Ruby on Rails and

How can jQuery help me load a lengthy webpage with various backgrounds that change according to the vertical scroll value?

Ways to pass a message from index.html to a Vue.js 3 instance

I am having trouble with a basic AJAX script using iframes. The first call returns a null element, but all subsequent calls work perfectly. What am I missing?

A guide to displaying a PDF preview using React Dropzone

Application with Single Page design has a Large DOM, leading to sluggish performance

I'm a beginner when it comes to working with MongoDB and I'm looking to insert a new field into a specific document. Can anyone advise me on how to accomplish this using Node

Transfer data from a child component to a parent component in a React application

Simple steps to turn off error highlighting for TypeScript code in Visual Studio Code

Resetting a form in React JS: A step-by-step guide

Conceal the nearest parent element above using JavaScript (or jQuery)

What distinguishes res.send from app.post?

Having trouble with the preview feature when resizing images

Extract the necessary fields from the JSON Schema

Why is my snapshot returning null, even though there are values in the Firebase Database?

Incorporating PHP arrays into JavaScript code within a PDO environment

There appears to be an issue with the onmousemove function

What is the correct way to display or hide a button based on my specific situation?