在 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 :)

Answer 1

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

Answer 2

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;

Answer 3

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

Answer 4

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!