.map usage in an object-CodePudding

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.

CodePudding user response：

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//")

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

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