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

I get the answer from the backend:

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

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


----------

How do i get an array format

mass: (25) 
name: "Tanks"

mass: (50)
name: "Tanks"

mass: (10)
name: "Car"

mass: (15)
name: "Car"

by this.cardList.map

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

I get the answer from the backend:

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

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


----------

How do i get an array format

mass: (25) 
name: "Tanks"

mass: (50)
name: "Tanks"

mass: (10)
name: "Car"

mass: (15)
name: "Car"

by this.cardList.map

• javascript
• arrays
• angular

• What is this 0: mass ? I think you can use flat function instead, this is the documentation - developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – Pavlin Petkov Commented Nov 26, 2019 at 11:32
• I don't know how to split an existing array into several arrays – Alexandra Vitetsk Commented Nov 26, 2019 at 11:36

5 Answers 5

You can map your desired objects and then flat data through flatMap method:

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

try the solution

  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)

Here's a solution using map and 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);

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

Since you tagged this with Angular, I assume you are using Observables with rxjs. I you can use pipeable operators, such as map, along with JavaScript operators of map and flat

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

I also took out your return from inside the subscribe() because subscribes do not need a return. I also returned the observable from the method instead of this.cardlist; because then an empty array--or uninitialized value--would be returned from this method before the asynchronous service returned results.