loop through associative array of objects

Question

I have an array of objects, and I want to get the name of the cars with the same id and display their name and year like this:

ferrai 01-02-2000, 10-23-2010

lambo 08-12-2018, 02-02-2012

NOT like this:

ferrai 01-02-2000

ferrai 10-23-2010

lambo 08-12-2018

lambo 02-02-2012

cars = [

[0] : { year: "01-02-2000"
 sport:{id: "1111",  name: "ferrai"}

}

[1] : { year: "10-23-2010"
 sport:{id: "1111", name: "ferrari"}

}

[2] : {year: "08-12-2018"
 sport:{id: "2222", name: "lambo"}

}

[3] : {year: "02-02-2012"
 sport:{id: "2222", name: "lambo"}

}

]

how would I be able to do this in angular2+? I have tried this code:

.html file

<div *ngFor="let obj of cars">
  <div *ngFor="let name of obj.sport">
   <div>{{getCars(name)}}</div>
  </div>
</div>

.ts file

getCars(obj){
var sport = obj.sport;
var year = obj.year;

//do stuff

}

I appreciate any help!

you should consider massaging the data a little first before trying to render. It may be cleaner to go through your array and combine all cars with the same name value first, and maybe the years into an array, then when you iterate through you'll have a nice data structure to work with. — Sgnl
– Sgnl, Commented Sep 23, 2017 at 2:13
well I created this cause I thought it would be easier to solve. The real Json is in my other question that I asked a couple days ago from "get ids from json array", but i want the same result to display. — Jason
– Jason, Commented Sep 23, 2017 at 2:15

mrmaclean89 · Accepted Answer · 2017-09-23 23:48:01Z

1

That answer with reduce is beautiful, and I recommend learning that solution because .reduce is one of the most powerful and versatile methods in native JS.

Here is a more vanilla solution, without using high order functions:

var cars = [
  {
    year: "01-02-2000",
    sport:{id: "1111",  name: "ferrari"}

  },
  {
    year: "10-23-2010",
    sport:{id: "1111", name: "ferrari"}
  },
  {
    year: "08-12-2018",
    sport:{id: "2222", name: "lambo"}
  },
  {
    year: "02-02-2012",
    sport:{id: "2222", name: "lambo"}
  }
]


function simplifyInventory(cars) {
var objList = {};
for (var i = 0; i < cars.length; i++) {
  if (objList.hasOwnProperty(cars[i].sport.name) === false) {
    objList[cars[i].sport.name] = [cars[i].year];
  } else {
    objList[cars[i].sport.name].push(cars[i].year)
  }
}
return objList;
}

console.log(simplifyInventory(cars));

=====console=====

{ ferrari: [ '01-02-2000', '10-23-2010' ], lambo: [ '08-12-2018', '02-02-2012' ] }

Then you could easily put this into almost any form.

answered Sep 23, 2017 at 23:48

mrmaclean89

5846 silver badges5 bronze badges

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

1 Comment

Jason Over a year ago

thank you guys! i've been trying to figure this out for days.

Sgnl · Accepted Answer · 2017-09-23 02:20:41Z

1

I personally would "massage" the data first before having the DOM render things. I personally like to do a lot of the work to the data (either on the server side or before it reaches some DOM iterator to build elements) so that the view can be as simple as possible. Here's what I would do (fixed a typo and this is vanilla javascript):

cars = [
  {
    year: "01-02-2000",
    sport:{id: "1111",  name: "ferrari"}

  },
  {
    year: "10-23-2010",
    sport:{id: "1111", name: "ferrari"}
  },
  {
    year: "08-12-2018",
    sport:{id: "2222", name: "lambo"}
  },
  {
    year: "02-02-2012",
    sport:{id: "2222", name: "lambo"}
  }
]

newCarsData = cars.reduce((acc, curr) => {
  if (!acc.hasOwnProperty(curr.sport.name)) {
    acc[curr.sport.name] = {};
    acc[curr.sport.name].years = []
  }

  acc[curr.sport.name].years.push(curr.year);
  return acc;
}, {});

console.log(newCarsData);

Now you'll have this data structure:

{
  ferrari: { 
    years: [ '01-02-2000', '10-23-2010' ]
  },
  lambo: {
    years: [ '08-12-2018', '02-02-2012' ]
  }
}

and that's easy for a repeat in angular or any framework

answered Sep 23, 2017 at 2:20

Sgnl

1,97123 silver badges31 bronze badges

1 Comment

Sgnl Over a year ago

Although, now the car names are key names... so you aren't working with an array (at the top level) anymore... lmk if this doesn't work for you

Collectives™ on Stack Overflow

loop through associative array of objects

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related