Accessing (nested) objects and arrays in Javascript

Question

I'm not sure if I have a misconception on how to organise my array or on how to access it.

Proposition is simple: Have an array of car makes and models and access them for display.

const carBrands = [
  {
    Audi: {
      models: ["A1", "A2", "A3", "A4"],
      unitsAvailable: 378,
    }
  },
  {
    BMW: {
      models: ["M1", "M2", "M3", "M4"],
      unitsAvailable: 413,
    },
  },
  {
    Honda: {
      models: ["H1", "H2", "H3", "H4"],
      unitsAvailable: 226,
    },
  }
];

I can access each model as such:

  carBrands.forEach((object, i) => {
    console.log(object, i)
  });

This a returns my objects and index fine:

Audi 0 BMW 1 Honda 2

What I can't figure out is how to return:

Make: Audi Models: A1, A2, A3, A4 Units available: 378

... for each of the 3 cars.

I know I have to loop over the array and return for each loop the object key/value pairs. But I'm having trouble with the correct syntax. Here's what I'm trying to figure out how to formulate:

  let modelsToDisplay = [];
  carBrands.forEach((object, i) => {
    modelsToDisplay.push(<li key={i}>Make/Model/Units of each object</li>);
  });

Thanks for helping out :)

Do you happen to know about Object.values() and Object.keys()? — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Nov 23, 2020 at 22:41
Since your expected output for given input is loosely described, you may get all sorts of guesses about how your problem may be solved, if you would provide expected result (would it be grouped array/object/whatever) you may get answers much closer to the point. — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Nov 23, 2020 at 22:47
I would either not do an array, and have carBrands be an object instead OR structure your objects where the make is a value, instead of a key. Such as: carBrands = [ { make: ‘Audi’, models: [‘A4’, ‘A5’] }, { make: ‘BMW’, models: [‘M3’, ‘M4’] } ]. — Jonathan Bowman
– Jonathan Bowman, Commented Nov 23, 2020 at 22:52
When I'm doing this kind of stuff, the method Object.getOwnPropertyNames (like this: Object.getOwnPropertyNames(carBrands)) is my good friend. — Davis Jones
– Davis Jones, Commented Nov 23, 2020 at 23:01
thanks @YevgenGorbunkov I have amended my post, hopefully to be clearer. — Chris
– Chris, Commented Nov 23, 2020 at 23:03

Rubydesic · Accepted Answer · 2020-11-23 22:54:18Z

1

carBrands.flatMap(Object.entries)
    .map(([key, { models, unitsAvailable }]) => `${key} ${models.join(", ")} ${unitsAvailable}`)
    .forEach(v => console.log(v))

answered Nov 23, 2020 at 22:54

Rubydesic

3,51716 silver badges30 bronze badges

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

Comments

mottek · Accepted Answer · 2020-11-23 23:09:36Z

1

Because your array consists of dict objects, you need to take into account that you need to iterate over the keys. Without modifying your input, you can use following code to address the inner values of your data structure:

// For all defined objects
carBrands.forEach((object) => {
  // Determine manufacturers inside the current object (only 1 manufacturer per object in your case)
  var manufacturers = Object.keys(object);
  // For each manufacturer
  manufacturers.forEach((manufacturer) => {
    // Print manufacturer name
    console.log("Manufacturer: " + manufacturer);
    console.log("Models:");
    // For all models
    var models = object[manufacturer].models;
    models.forEach((model) => {
      // print model name
      console.log("  " + model);
    });
    // print available units
    console.log("Available units:");
    console.log("  " + object[manufacturer].unitsAvailable + "\n");
  });
});

Output:

Manufacturer: Audi
Models:
  A1
  A2
  A3
  A4
Available units:
  378

Manufacturer: BMW
Models:
  M1
  M2
  M3
  M4
Available units:
  413

Manufacturer: Honda
Models:
  H1
  H2
  H3
  H4
Available units:
  226

answered Nov 23, 2020 at 23:09

mottek

9675 silver badges12 bronze badges

3 Comments

Chris Over a year ago

Thank you very much! That answers my question of how to access my array. Now I need detrmine whether I want to keepthe structure and use your solution or make the structure simpler as proposed by Jonathan below. Thanks for your great help both!

mottek Over a year ago

If the structure of the data is in your hands, it depends on how you think you need it in the future. If it's just fine to list everything, i suggest to go with what Jonathan proposed. If you need to Access data from a specific brand, e.g. due to user input, you are better off using a dict (carBrands={ Audi:{}, BMW:{}, Honda: {}, ... }) instead of an array because you will then be able to access data with carBrands[manufacturer]

paulsm4 Over a year ago

@Chris - Yes, I'd change from "BMW'" etc. (key) to "make" (field). But otherwise, I wouldn't necessarily change a thing. ANY data structure will have "limitations"; Javascript is rich in alternatives to manipulate data as you wish. Mottek gave an excellent example how to use Object.keys. Rubydesic gives a good example for using Array.prototype.map

Jonathan Bowman · Accepted Answer · 2020-11-23 23:23:05Z

1

The issue you’re running into is because the top level keys you’re using are unique. Instead of naming your keys Audi, BMW, etc. I would use a common key like make and set its value to your brands. That way, when you do a loop, you can ask for the same key every time:

const carBrands = [
  {
    make: 'Audi',
    models: ["A1", "A2", "A3", "A4"],
    unitsAvailable: 378
  },
  {
    make: 'BMW',
    models: ["M1", "M2", "M3", "M4"],
    unitsAvailable: 413
  },
];

carBrands.forEach(brand => {
    console.log(brand.make);

    brand.models.forEach(model => console.log(model));

});

Since you talked about wanting to maintain relationships in your object, I'd encourage you to think about how you would store this information in a database, and base your organization on that.

There are many carBrands. Each carBrand has a make, unitsAvailable, and has many models.

You wouldn't make a new table for each carBrand, right? You would add a new row. So, structuring it the way it is above is a closer parallel to how you would keep it in a database, which is good for data integrity and makes it more flexible.

In this structure, it's still easy to get things by make, too, like:

let audiModels = carBrands.filter(brand => brand.make == 'Audi').models;

edited Nov 23, 2020 at 23:23

answered Nov 23, 2020 at 22:58

Jonathan Bowman

1,6461 gold badge12 silver badges17 bronze badges

1 Comment

Chris Over a year ago

Thanks Jonathan. This is what I originally had and it worked but I thought the structure may be incorrect because I needed to make the car make parent to the models/units etc. Semantically and for future proofing. That's why I said I wasn't sure whether my problem waswith how I structured the array or with how I access it. I guess the strucuture was the first problem. Thanks for the help :)

Chris · Accepted Answer · 2020-11-24 07:28:35Z

0

All answers here are "correct", thanks very much guys! So there is not one to pick as better than the other.

I think Jonathan makes a good point about my overcomplicated data structure. I will go back to the simpler versions where "Audi" etc would be a value, not a key.

But I will also build a sample of the current structure and access data as suggested by Mottek.

When I get deeper into the project I will decide which will be the final version.

Thanks for the great help all!

answered Nov 24, 2020 at 7:28

Chris

1172 silver badges11 bronze badges

Collectives™ on Stack Overflow

Accessing (nested) objects and arrays in Javascript

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related