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](https://stackoverflow.com/questions/57206060/how-to-replace-array-of-object-property-name-in-javascript) — user120242, Jul 15 '20 at 15:26

mwilson · Accepted Answer · 2020-07-15T15:39:19.047

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.

Better to use destructuring and taking the desired properties instead of deleting them — Kunal Mukherjee, Jul 15 '20 at 15:27

score 1 · Answer 2 · answered Jul 15 '20 at 15:27

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);

user120242 · Answer 3 · 2020-07-15T15:39:56.893

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)

Unnesting array of object in JS

3 Answers3