Using map to reformat objects in an array to new element array

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

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

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

StepUp · Accepted Answer · 2019-11-26 11:40:36Z

3

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

answered Nov 26, 2019 at 11:40

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Harish · Accepted Answer · 2019-11-26 11:37:25Z

1

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)

answered Nov 26, 2019 at 11:37

Harish

1,9111 gold badge15 silver badges26 bronze badges

Comments

Andy · Accepted Answer · 2019-11-26 11:37:27Z

0

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

answered Nov 26, 2019 at 11:37

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Comments

Saurabh Yadav · Accepted Answer · 2019-11-26 11:43:37Z

0

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

answered Nov 26, 2019 at 11:43

Saurabh Yadav

3,3861 gold badge12 silver badges21 bronze badges

Comments

JeffryHouser · Accepted Answer · 2019-11-26 12:27:22Z

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.

Collectives™ on Stack Overflow

Using map to reformat objects in an array to new element array

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related