What is the best way to bring a nested object to the top level without deleting the original top level

Question

What is the best way to bring a nested object to the top level without deleting the original top level

Imagine having the following dataset:

data = [{
    "_id" : "2fApaxgiPx38kpDLA",
    "profile" : {
        "name" : "Karina 1",
        "avatar" : "avatar1.jpg",
        "bio" : "my bio 1"
},
{
    "_id" : "NXM6H4EWfeRAAhB7c",
    "profile" : {
        "name" : "Karina 2",
        "avatar" : "avatar2.jpg",
        "bio" : "my bio 2"
    },
}];

I used _.map(data, "profile") but it removed the top-level _id:

wrongResult = [{
    "name" : "Karina 1",
    "avatar" : "avatar1.jpg",
    "bio" : "my bio 1"
},
{
    "name" : "Karina 2",
    "avatar" : "avatar2.jpg",
    "bio" : "my bio 2"  
}];

How can I move the nested objects to the top level without removing the top level like this:

expectedResult = [{
    "_id" : "2fApaxgiPx38kpDLA",
    "name" : "Karina 1",
    "avatar" : "avatar1.jpg",
    "bio" : "my bio 1"
},
{
    "_id" : "NXM6H4EWfeRAAhB7c",
    "name" : "Karina 2",
    "avatar" : "avatar2.jpg",
    "bio" : "my bio 2"  
}];

Your help is greatly appreciated. Thank you!

javascript underscore.js lodash

Answer 1

Answer №1

Is this somewhat similar? (unverified)

_.map(data,function(d){
    d.profile._id = d._id;
    return d.profile;
});

Answer 2

Is this somewhat similar? (unverified)

_.map(data,function(d){
    d.profile._id = d._id;
    return d.profile;
});

Answer 3

Answer №2

Recently, I encountered a similar task and crafted a versatile function to flatten all object values (including nested ones) to the top level:

const flattenObjectValues = (obj, cache = {}) => {
    const objectValues = Object.keys(obj).reduce((acc, cur) => {
        if (!Array.isArray(obj[cur]) && typeof obj[cur] === 'object') {
            return flattenObjectValues({ ...acc, ...obj[cur] }, cache);
        }
        acc[cur] = obj[cur];

        return acc;
    }, {});

    return {
        ...objectValues,
        ...cache,
    };
}
flattenObjectValues({
  a: {
    b: 'a',
    c: 'b',
  },
  d: {
    e: 'a',
    f: {
      g: {
        h: [
          1,
          2,
          3,
        ]
      }
    }
  }
});
=> { b: 'a', c: 'b', e: 'a', h: [ 1, 2, 3 ] }

An drawback of this function is that it may overwrite keys with the same name.

Answer 4

Recently, I encountered a similar task and crafted a versatile function to flatten all object values (including nested ones) to the top level:

const flattenObjectValues = (obj, cache = {}) => {
    const objectValues = Object.keys(obj).reduce((acc, cur) => {
        if (!Array.isArray(obj[cur]) && typeof obj[cur] === 'object') {
            return flattenObjectValues({ ...acc, ...obj[cur] }, cache);
        }
        acc[cur] = obj[cur];

        return acc;
    }, {});

    return {
        ...objectValues,
        ...cache,
    };
}
flattenObjectValues({
  a: {
    b: 'a',
    c: 'b',
  },
  d: {
    e: 'a',
    f: {
      g: {
        h: [
          1,
          2,
          3,
        ]
      }
    }
  }
});
=> { b: 'a', c: 'b', e: 'a', h: [ 1, 2, 3 ] }

An drawback of this function is that it may overwrite keys with the same name.

Answer 5

Answer №3

Utilize the flatten function to bring the nested object up to the parent level...

Answer 6

Utilize the flatten function to bring the nested object up to the parent level...

Answer 7

Answer №4

If you're utilizing lodash, I've devised a versatile function to flatten any deeply nested object.

const flattener = obj => {
        const toPairs = obj => _.entries(obj).map(([key, val]) => typeof val === 'object' ? toPairs(val) : [key, val]);
        return _.chain(toPairs(obj)).flattenDeep().chunk(2).fromPairs().value();
    }

For instance, consider an array like this:

data = [
{
    "_id" : "2fApaxgiPx38kpDLA",
    "profile" : {
        "name" : "Karina 1",
        "avatar" : "avatar1.jpg",
        "bio" : "my bio 1"
    }
},
{
    "_id" : "NXM6H4EWfeRAAhB7c",
    "profile" : {
        "name" : "Karina 2",
        "avatar" : "avatar2.jpg",
        "bio" : "my bio 2"
    },
}
]

You can then execute:

data.map(obj => flattener(obj))

This will yield:

[
    {
        "_id": "2fApaxgiPx38kpDLA",
        "name": "Karina 1",
        "avatar": "avatar1.jpg",
        "bio": "my bio 1"
    },
    {
        "_id": "NXM6H4EWfeRAAhB7c",
        "name": "Karina 2",
        "avatar": "avatar2.jpg",
        "bio": "my bio 2"
    }
]

Note: The flattener function eliminates duplicate object keys. So, for an object like;

myObj = { name: 'rick', age: 10, country: { name: 'uganda' } }

Calling flattener(myObj) would result in:

{ name: 'uganda', age: 10 }

instead of:

{ name: 'uganda', age: 10, name: 'rick' }

as an object cannot have two identical keys even with unique values assigned to them.

Answer 8

If you're utilizing lodash, I've devised a versatile function to flatten any deeply nested object.

const flattener = obj => {
        const toPairs = obj => _.entries(obj).map(([key, val]) => typeof val === 'object' ? toPairs(val) : [key, val]);
        return _.chain(toPairs(obj)).flattenDeep().chunk(2).fromPairs().value();
    }

For instance, consider an array like this:

data = [
{
    "_id" : "2fApaxgiPx38kpDLA",
    "profile" : {
        "name" : "Karina 1",
        "avatar" : "avatar1.jpg",
        "bio" : "my bio 1"
    }
},
{
    "_id" : "NXM6H4EWfeRAAhB7c",
    "profile" : {
        "name" : "Karina 2",
        "avatar" : "avatar2.jpg",
        "bio" : "my bio 2"
    },
}
]

You can then execute:

data.map(obj => flattener(obj))

This will yield:

[
    {
        "_id": "2fApaxgiPx38kpDLA",
        "name": "Karina 1",
        "avatar": "avatar1.jpg",
        "bio": "my bio 1"
    },
    {
        "_id": "NXM6H4EWfeRAAhB7c",
        "name": "Karina 2",
        "avatar": "avatar2.jpg",
        "bio": "my bio 2"
    }
]

Note: The flattener function eliminates duplicate object keys. So, for an object like;

myObj = { name: 'rick', age: 10, country: { name: 'uganda' } }

Calling flattener(myObj) would result in:

{ name: 'uganda', age: 10 }

instead of:

{ name: 'uganda', age: 10, name: 'rick' }

as an object cannot have two identical keys even with unique values assigned to them.

What is the best way to bring a nested object to the top level without deleting the original top level

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Steps for handling errors in Node.js when the query result rowCount is 0 and throwing an error in response

How can we display data from the database in a table if the data is stored as a string separated by commas using Ajax?

What is the best way to implement OTP expiration time in Next.js using Firebase?

Removing the gap between the clicked point and the draw point in Html5 canvas

Tips for refreshing the modified toggle in angular2

Using JavaScript to enhance event handling for a `select` element in a progressive manner

What is the best way to structure Vue.js components for optimal organization?

"Cross-origin resource sharing problem while working with NodeJs, Express, and React on

Tips for preventing timeouts when posting data to Heroku servers

Create unique identifiers for the TD elements of Viz.js that will be displayed within the SVG elements

Define the format for the output file name in TypeScript

Customize the appearance of the Vue.js datepicker starting from today's date

The error was thrown at line 800 in the loader.js file of the internal modules

Tips for creating animations using parent and child components in Angular

Unreliable Raycasting with Three.js

Tips for creating a responsive Youtube embedded video

Ensure that the loader remains visible until all data has been successfully retrieved from the AngularJS service

Error: Unexpected termination of data in JSON file on line 2, starting at the first character

Is it possible to trigger the setState() function of a parent component when a child component is clicked?

Can anyone help me figure out the best way to test for observable errors in Angular2?