使用 map 将数组中的对象重新格式化为新元素数组

Question

 getCardList() {
    this.http
      .get<CardList>
      (BACKEND_IP + CARD_LIST)
      .subscribe(data => {
        console.log(data);
        this.cardList = data;
        console.log(this.cardList);
        return this.cardList;
      });
    return this.cardList;
  }

---

我从后端得到答案：

0:
mass: (2) [25, 50]
name: "Tanks"
__proto__: Object

1:
mass: (2) [10, 15]
name: "Car"
__proto__: Object


----------

如何获取数组格式

mass: (25) 
name: "Tanks"

mass: (50)
name: "Tanks"

mass: (10)
name: "Car"

mass: (15)
name: "Car"

通过this.cardList.map

Answer 1

你可以map你想要的对象，然后通过flatMap方法来扁平化数据：

const arr = [
  { mass: [25, 50], name: "Tanks"  },
  { mass: [10, 15], name: "Car"  }
];

const result = arr.flatMap(a => a.mass.map(s=> ({mass: s, name: a.name})));

console.log(result);

Answer 2

尝试解决方案

  let cardList = [{mass: [25,50], name: 'tank'}, {mass: [10,15], name: 'Car'}]  

    const res =  cardList.map(({mass, name})=> {
        return mass.map(m => ({mass: m, name}))
    }).flat()
    console.log(res)

Answer 3

这是使用map 和reduce 的解决方案：

const cardList = [
  { mass: [25, 50], name: 'Tanks' },
  { mass: [10, 15], name: 'Car' }
];

const out = cardList.reduce((acc, c) => {

  // Destructure the mass and name
  // from the current object
  const { mass, name } = c;

  // Create a new array of objects by mapping
  // over the mass array and creating a new object for each
  const temp = mass.map((n) => ({ mass: n, name }));

  // Spread out the new array and concatentate
  // to the accumulator
  return acc.concat(...temp);
}, []);

console.log(out);

Answer 4

let list = [
	{'mass': [25, 50], 'name': 'Tanks'},
	{'mass': [10, 15], 'name': 'Car'}
];

let result = list.reduce((acc, o) => (acc.push(...[...o.mass.map(v => ({'mass': v, 'name': o.name}))]), acc) , []);

console.log(result);

Answer 5

由于您使用 Angular 标记了它，我假设您正在使用带有 rxjs 的 Observables。我可以使用管道运算符，例如map，以及map 和flat 的JavaScript 运算符

getCardList() {
    return this.http
      .get<CardList>
      (BACKEND_IP + CARD_LIST).pipe(
       map(result => {
          // conversion routine borrowed for @Harish
          const newArray =  result.map(({mass, name})=> {
              return mass.map(m => ({mass: m, name}))
          }).flat()
         return newArray;
        }
      )
      .subscribe(data => {
        console.log(data);
      });
  }

我还从subscribe() 中取出了您的退货，因为订阅不需要退货。我还从方法返回了 observable 而不是 this.cardlist;因为在异步服务返回结果之前，将从此方法返回一个空数组（或未初始化的值）。