Unnesting array of object in JS

Question

Nested Array

[
        {
            "id": 16,
            "created_at": "2020-07-01T14:09:14.066Z",
            "file": {
                "name": "Annotation 2020-04-08 135240.jpg"
            }
        },
        {
            "id": 15,
            "created_at": "2020-07-01T14:08:31.558Z",
            "file": {
                "name": "Annotation 2020-04-08 135240.jpg"
            }
        },
        {
            "id": 14,
            "created_at": "2020-07-01T14:07:32.869Z",
            "file": {
                "name": "Annotation 2020-04-08 135240.jpg"
            }
        }]

What I'm trying to achieve

[
        {
            "id": 16,
            "created_at": "2020-07-01T14:09:14.066Z",
            "name": "Annotation 2020-04-08 135240.jpg"           
        },
        {
            "id": 15,
            "created_at": "2020-07-01T14:08:31.558Z",
            "name": "Annotation 2020-04-08 135240.jpg"
        },
        {
            "id": 14,
            "created_at": "2020-07-01T14:07:32.869Z",
            "name": "Annotation 2020-04-08 135240.jpg"
        }]

Does this answer your question? How to replace array of object property name in javascript — user120242
– user120242, Commented Jul 15, 2020 at 15:26

mwilson · Accepted Answer · 2020-07-15 15:39:19Z

4

You can easily just map the file.name property to it's parent and then delete d.file when finished.

Basic Example:

const data = [{
    "id": 16,
    "created_at": "2020-07-01T14:09:14.066Z",
    "file": {
      "name": "Annotation 2020-04-08 135240.jpg"
    }
  },
  {
    "id": 15,
    "created_at": "2020-07-01T14:08:31.558Z",
    "file": {
      "name": "Annotation 2020-04-08 135240.jpg"
    }
  },
  {
    "id": 14,
    "created_at": "2020-07-01T14:07:32.869Z",
    "file": {
      "name": "Annotation 2020-04-08 135240.jpg"
    }
  }
];

// [Option 1] Map and return new object
const targetData = data.map(d => ({ id: d.id, created_at: d.created_at, name: d.file.name }));

// [Option 2] Create new property and delte old one
const targetData2 = data.map(d => {
  d.name = d.file.name;
  delete d.file;
  return d;
});



console.log(targetData);
console.log(targetData2);

You could also use something like Array.reduce or some other method, but that's the basic idea.

edited Jul 15, 2020 at 15:39

answered Jul 15, 2020 at 15:26

mwilson

13.1k10 gold badges65 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kunal Mukherjee Over a year ago

Better to use destructuring and taking the desired properties instead of deleting them

xMayank · Accepted Answer · 2020-07-15 15:27:20Z

1

Here you can use map function.

This will create new array. You can assign value to keys.

This will not delete your original array.

const arr = [{
  "id": 16,
  "created_at": "2020-07-01T14:09:14.066Z",
  "file": {
   "name": "Annotation 2020-04-08 135240.jpg"
  }
 },
 {
  "id": 15,
  "created_at": "2020-07-01T14:08:31.558Z",
  "file": {
   "name": "Annotation 2020-04-08 135240.jpg"
  }
 },
 {
  "id": 14,
  "created_at": "2020-07-01T14:07:32.869Z",
  "file": {
   "name": "Annotation 2020-04-08 135240.jpg"
  }
 }
]

var newArr = arr.map(function(elem) {
 return {
  id: elem.id,
  created_at: elem.created_at,
  name: elem.file.name
 }
});

console.log(newArr);

answered Jul 15, 2020 at 15:27

xMayank

1,9852 gold badges8 silver badges20 bronze badges

Comments

user120242 · Accepted Answer · 2020-07-15 15:39:56Z

Destructure out {file: name} property and use rest operator to put rest of properties in object o.
Merge object o with property name name using spread operator. Uses shorthand properties.

Makes copies of all objects. Does not modify original objects in data.

data = [{
    "id": 16,
    "created_at": "2020-07-01T14:09:14.066Z",
    "file": {
      "name": "Annotation 2020-04-08 135240.jpg"
    }
  },
  {
    "id": 15,
    "created_at": "2020-07-01T14:08:31.558Z",
    "file": {
      "name": "Annotation 2020-04-08 135240.jpg"
    }
  },
  {
    "id": 14,
    "created_at": "2020-07-01T14:07:32.869Z",
    "file": {
      "name": "Annotation 2020-04-08 135240.jpg"
    }
  }
];

data = data.map( ({file: {name}, ...o}) => ({...o, name}) )

console.log(data);

fast in-place mutation (modifies objects in-place) using a for-of loop. set name property and delete file property:

data = [{
    "id": 16,
    "created_at": "2020-07-01T14:09:14.066Z",
    "file": {
      "name": "Annotation 2020-04-08 135240.jpg"
    }
  },
  {
    "id": 15,
    "created_at": "2020-07-01T14:08:31.558Z",
    "file": {
      "name": "Annotation 2020-04-08 135240.jpg"
    }
  },
  {
    "id": 14,
    "created_at": "2020-07-01T14:07:32.869Z",
    "file": {
      "name": "Annotation 2020-04-08 135240.jpg"
    }
  }
];

for(const x of data) {
  x.name = x.file.name
  delete x.file
}

console.log(data)

Collectives™ on Stack Overflow

Unnesting array of object in JS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related