根据收到的建议类型拆分 JSON 数组答案

【问题标题】：Split JSON array based on the type of suggestion it's receiving根据收到的建议类型拆分 JSON 数组
【发布时间】：2022-01-07 06:39:59
【问题描述】：

所以我有以下 JSON 数组

[
  {
    "characterID": 0,
    "description": "Series 1",
    "id": 1,
    "seriesID": 0,
    "status": "ACCEPTED",
    "type": "SERIES",
    "userID": 1
  },
  {
    "characterID": 0,
    "description": "Series 2",
    "id": 2,
    "seriesID": 0,
    "status": "ACCEPTED",
    "type": "SERIES",
    "userID": 1
  },
  {
    "characterID": 0,
    "description": "Character 1",
    "id": 1,
    "seriesID": 25,
    "status": "ACCEPTED",
    "type": "CHARACTER",
    "userID": 1
  },
  {
    "URL": "https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg",
    "characterID": 853,
    "description": "Picture 1",
    "id": 1,
    "seriesID": 25,
    "status": "ACCEPTED",
    "type": "IMAGE",
    "userID": 1
  },
  {
    "URL": "https://c.tenor.com/uEjQxCwAWfgAAAAC/sample.gif",
    "characterID": 1,
    "description": "Gif 1",
    "id": 1,
    "seriesID": 1,
    "status": "ACCEPTED",
    "type": "GIF",
    "userID": 1
  },
  {
    "characterID": 0,
    "description": "Idea 1",
    "id": 1,
    "seriesID": 0,
    "status": "ACCEPTED",
    "type": "IDEA",
    "userID": 1
  }
]

但是我想实现如下拆分数组

[
  {
    "characterID": 0,
    "description": "Series 1",
    "id": 1,
    "seriesID": 0,
    "status": "ACCEPTED",
    "type": "SERIES",
    "userID": 1
  },
  {
    "characterID": 0,
    "description": "Series 2",
    "id": 2,
    "seriesID": 0,
    "status": "ACCEPTED",
    "type": "SERIES",
    "userID": 1
  }
]

[

  {
    "characterID": 0,
    "description": "Character 1",
    "id": 1,
    "seriesID": 25,
    "status": "ACCEPTED",
    "type": "CHARACTER",
    "userID": 1
  }
]

我想要实现的是根据数组中包含的 type 将 JSON 分割成段。

我正在使用 Javascript / Vue，如果有任何解决方案，将不胜感激。

【问题讨论】：

我会 JSON.parse 整个事情，遍历根据类型分配给单独数组的数组，然后对这些单独的结果进行字符串化。
解析后使用.filter提取出你需要的东西。您可以多次执行以获取不同的数据。 stackoverflow.com/questions/46085449/… 可能有帮助吗？

标签： javascript json vue.js

【解决方案1】：

Array.reduce，在这里可以很好地工作。

下面是一个例子。

var data = JSON.parse('[{"characterID":0,"description":"Series 1","id":1,"seriesID":0,"status":"ACCEPTED","type":"SERIES","userID":1},{"characterID":0,"description":"Series 2","id":2,"seriesID":0,"status":"ACCEPTED","type":"SERIES","userID":1},{"characterID":0,"description":"Character 1","id":1,"seriesID":25,"status":"ACCEPTED","type":"CHARACTER","userID":1},{"URL":"https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg","characterID":853,"description":"Picture 1","id":1,"seriesID":25,"status":"ACCEPTED","type":"IMAGE","userID":1},{"URL":"https://c.tenor.com/uEjQxCwAWfgAAAAC/sample.gif","characterID":1,"description":"Gif 1","id":1,"seriesID":1,"status":"ACCEPTED","type":"GIF","userID":1},{"characterID":0,"description":"Idea 1","id":1,"seriesID":0,"status":"ACCEPTED","type":"IDEA","userID":1}]');


const grouped = data.reduce((a, v) => {
  if (!a[v.type]) a[v.type] = [];
  a[v.type].push(v);
  return a;
}, {});

console.log(grouped);

【讨论】：

【解决方案2】：

你可以使用reduce来创建一个类型为key的新对象：

var res = data.reduce((acc, val) => {
if (!acc[val.type]) {
    acc[val.type] = [val];
} else {
    acc[val.type].push(val)
}
return acc;

}, {})

结果将类似于：

{
   "SERIES":[
      {
         "characterID":0,
         "description":"Series 1",
         "id":1,
         "seriesID":0,
         "status":"ACCEPTED",
         "type":"SERIES",
         "userID":1
      },
      {
         "characterID":0,
         "description":"Series 2",
         "id":2,
         "seriesID":0,
         "status":"ACCEPTED",
         "type":"SERIES",
         "userID":1
      }
   ],
   "CHARACTER":[
      {
         "characterID":0,
         "description":"Character 1",
         "id":1,
         "seriesID":25,
         "status":"ACCEPTED",
         "type":"CHARACTER",
         "userID":1
      }
   ],
   "IMAGE":[
      {
         "URL":"https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg",
         "characterID":853,
         "description":"Picture 1",
         "id":1,
         "seriesID":25,
         "status":"ACCEPTED",
         "type":"IMAGE",
         "userID":1
      }
   ],
   "GIF":[
      {
         "URL":"https://c.tenor.com/uEjQxCwAWfgAAAAC/sample.gif",
         "characterID":1,
         "description":"Gif 1",
         "id":1,
         "seriesID":1,
         "status":"ACCEPTED",
         "type":"GIF",
         "userID":1
      }
   ],
   "IDEA":[
      {
         "characterID":0,
         "description":"Idea 1",
         "id":1,
         "seriesID":0,
         "status":"ACCEPTED",
         "type":"IDEA",
         "userID":1
      }
   ]
}

【讨论】：

【解决方案3】：

我不确定您是否要拆分并存储到单独的数组中，但是，如果是这种情况，您可以试试这个：

const obj = [
  {
    "characterID": 0,
    "description": "Series 1",
    "id": 1,
    "seriesID": 0,
    "status": "ACCEPTED",
    "type": "SERIES",
    "userID": 1
  },
  {
    "characterID": 0,
    "description": "Series 2",
    "id": 2,
    "seriesID": 0,
    "status": "ACCEPTED",
    "type": "SERIES",
    "userID": 1
  },
  {
    "characterID": 0,
    "description": "Character 1",
    "id": 1,
    "seriesID": 25,
    "status": "ACCEPTED",
    "type": "CHARACTER",
    "userID": 1
  },
  {
    "URL": "https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg",
    "characterID": 853,
    "description": "Picture 1",
    "id": 1,
    "seriesID": 25,
    "status": "ACCEPTED",
    "type": "IMAGE",
    "userID": 1
  },
  {
    "URL": "https://c.tenor.com/uEjQxCwAWfgAAAAC/sample.gif",
    "characterID": 1,
    "description": "Gif 1",
    "id": 1,
    "seriesID": 1,
    "status": "ACCEPTED",
    "type": "GIF",
    "userID": 1
  },
  {
    "characterID": 0,
    "description": "Idea 1",
    "id": 1,
    "seriesID": 0,
    "status": "ACCEPTED",
    "type": "IDEA",
    "userID": 1
  }
];

const seriesTypeObjs = [];

obj.map(eachObj => {
  if (eachObj.type === 'SERIES'){
    seriesTypeObjs.push(eachObj);
  }
});
console.log('Series Type Objs =>', seriesTypeObjs);

您也可以使用相同的代码来测试其他 type 值。

【讨论】：

【解决方案4】：

最简单的方法是使用像 lodash 这样的实用程序库具体方法groupBy

_.groupBy(data, 'type');// {SERIES: Array(2), CHARACTER: Array(1), IMAGE: Array(1), GIF: Array(1), IDEA: Array(1)}

更新：（没有任何库的普通方法） 使用对象 Map 的解决方案 键值对 键是类型 和 value 是它们的该类型的条目组，?. Optional chaining 和 ?? Nullish coalescing operator

let map = new Map()
for(entry of data){
    const type = entry?.type ?? "untyped";
    map.set(type, [...map.get(type)??[],entry])
}
// Map(5) {'SERIES' => Array(2), 'CHARACTER' => Array(1), 'IMAGE' => Array(1), 'GIF' => Array(1), 'IDEA' => Array(1)}

【讨论】：