just wondering if someone could point me in the right direction of .map functionality. This is unfortunately something I'm struggling to get my head around.

If I had an object, lets say the following:

const myPetsAndFood = {
    pets:[
    { 
        species: "dog",
        breed: "Labrador",
        age: 12
    },
    {
        species: "cat",
        breed: "unknown",
        age: 7,
    },
    {
        species: "fish",
        breed: "goldfish",
        age: 1,
    }
],
    food: [
        {
            dogfood: 15.00,
        },
        {
            catfood: 11.00,
        },
        {
            fishfood: 4.00,
        }
    ],
}; 

Could anyone explain how I'd utilise .map to obtain the data values of age and price if possible please? A brief explanation or example is more than suffice, I'd appreciate any time/input possible. In all probability, I'll be sat here reading and trying to figure it out in the mean time.

If you got this far - Thank you for your time.

just wondering if someone could point me in the right direction of .map functionality. This is unfortunately something I'm struggling to get my head around.

If I had an object, lets say the following:

const myPetsAndFood = {
    pets:[
    { 
        species: "dog",
        breed: "Labrador",
        age: 12
    },
    {
        species: "cat",
        breed: "unknown",
        age: 7,
    },
    {
        species: "fish",
        breed: "goldfish",
        age: 1,
    }
],
    food: [
        {
            dogfood: 15.00,
        },
        {
            catfood: 11.00,
        },
        {
            fishfood: 4.00,
        }
    ],
}; 

Could anyone explain how I'd utilise .map to obtain the data values of age and price if possible please? A brief explanation or example is more than suffice, I'd appreciate any time/input possible. In all probability, I'll be sat here reading and trying to figure it out in the mean time.

If you got this far - Thank you for your time.

• javascript
• object
• array.prototype.map

Share Improve this question Follow asked Feb 17, 2022 at 18:40 larizlariz 1511 gold badge11 silver badge66 bronze badges 2

• 3 It would be better if food were an object like {dogfood: 15.00, catfood: 11.00, fishfood: 4.00}. Why use an array of objects with different keys? – Barmar Commented Feb 17, 2022 at 18:42
• here is it guaranteed that the order is same for pets and foods. if not Barmar's approach makes things much easier – cmgchess Commented Feb 17, 2022 at 18:46

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

So the .map can only be used with arrays. This way you can not do something similar to:

myPetsAndFood.map()

Let's say you want do console.log the age. You would have to get the array first. So:

myPetsAndFood.pets.map((pet) => {
   console.log(pet.age)
})

And it would print 12, followed by 7 followed by 1. If you want to store it inside an array you can create an array and use .push("//infos wanted to be pushed//")

Object.keys(myPetsAndFood).map(function(key, index) {
  console.log(myPetsAndFood[key][0].dogfood);
  console.log(myPetsAndFood[key][0].age);
});

You are going to have to figure out a way to replace the 0 with some sort of counter that will increment.

map is a method of arrays, it doesn't exist on objects. You could use it on the arrays within the object ( myPetsAndFood.pets.map( /* ... */ ) ) but you'd have to use a for loop or some other technique to parse each item in the object.

An example of how to use the map function for one of your arrays:

const agesArray = myPetsAndFood.pets.map((item) => {
    return item.age;
});

So you have imbricated arrays here. This makes it so you have to go into your wanted array first before being able to execute your map.

For example: myPetsAndFood.pets.map(function)

The way that .map works is it executes your function on every element in your array and returns an array with the equivalency(source).

Therefore, in order to get the age of every pet, you have to tell your function to get your age property of your objects.

For example: myPetsAndFood.pets.map((pet) => pet.age)

This will return an array containing only the age of every one of your pets.

Now the problem with this is your second array. We cannot call the .map function on that array because your different properties don't have the same name. Therefore, your .map won't have any mon ground to return a sensible array.

We can fix this issue by splitting your one variable into two: name and price for example. After this change, we can now call the .map on your array properly by telling it which property you need.

For example: myPetsAndFood.foods.map((food) => food.price)

Below is a full code snippet which should show off the above description.

const myPetsAndFood = {
  pets:[
    { 
      species: "dog",
      breed: "Labrador",
      age: 12
    },
    {
      species: "cat",
      breed: "unknown",
      age: 7,
    },
    {
      species: "fish",
      breed: "goldfish",
      age: 1,
    }
  ],
  foods: [
    {
      name: "dog",
      price: 15.00,
    },
    {
      name: "cat",
      price: 11.00,
    },
    {
      name: "fish",
      price: 4.00,
    }
  ],
};

const catAge = myPetsAndFood.pets.map((pet) => pet.age)
const foodPrice = myPetsAndFood.foods.map((food) => food.price)


console.log(catAge)
console.log(foodPrice)