取消嵌套JS中的对象数组

Question

嵌套数组

[
        {
            "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"
            }
        }]

我想要实现的目标

[
        {
            "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"
        }]

Answer 1

您可以轻松地将 file.name 属性映射到它的父对象，然后在完成后 delete d.file。

基本示例：

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

您也可以使用 Array.reduce 之类的方法或其他方法，但这是基本思路。

Answer 2

这里可以使用map功能。

这将创建新数组。您可以为键赋值。

这不会删除您的原始数组。

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

Answer 3

Destructure out {file: name} property and use rest operator 将其余属性放入对象 o.
使用 spread operator. Uses shorthand properties.

合并对象 o 与属性名称 name

复制所有对象。不修改数据中的原始对象。

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

使用 for-of 循环快速就地突变（就地修改对象）。设置名称属性并删除文件属性:

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)

取消嵌套JS中的对象数组

Unnesting array of object in JS

javascript

arrays

unnest