Question 49276 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to loop an object inside an object – Javascript

I am currently trying to extract the names, age and nation of each player inside the object. I used object keys and it was able to get the position name.

Note: This is vanilla Javascript

const arsenal = {
    name: "Arsenal",
    city: "London",
    startingLineup: {
        gk: { name: "Aaron Ramsdale", age: 24, country: "England" },
        lb: { name: "Oleksandr Zinchenko", age: 26, country: "Ukraine" },
        rb: { name: "Ben White", age: 25, country: "England" },
        lcb: { name: "Gabriel Magalhaes", age: 25, country: "Brazil" },
        rcb: { name: "William Saliba", age: 22, country: "France" },
        cdm: { name: "Thomas Partey", age: 29, country: "Ghana" },
        cm: { name: "Granit Xhaka", age: 30, country: "Switzerland" },
        cam: { name: "Martin Odegaard", age: 23, country: "Norway" },
        lw: { name: "Gabriel Martinelli", age: 21, country: "Brazil" },
        rw: { name: "Bukayo Saka", age: 21, country: "England" },
        st: { name: "Gabriel Jesus", age: 26, country: "Brazil" },
    },
};

Object.keys(arsenal.startingLineup).forEach((pos) => {
    const name = arsenal.startingLineup[pos.name];
    console.log(pos, name);
});

But when I try to get the other information it comes out as undefined. How can I get the rest of the player info?

gk undefined
lb undefined
rb undefined
lcb undefined
rcb undefined
cdm undefined
cm undefined
cam undefined
lw undefined
rw undefined
st undefined
Tags:

5

Answers


  1. 0

    There’s a small mistake. You’re using pos.name instead of just pos.

    Change [pos.name] to [pos].name:

    const name = arsenal.startingLineup[pos].name;
    Login or Signup to reply.
  2. 0

    It’s simpler to iterate over Object.entries to have access to both the key and the value.

    const arsenal = {
    name: "Arsenal",
    city: "London",
    startingLineup: {
        gk: { name: "Aaron Ramsdale", age: 24, country: "England" },
        lb: { name: "Oleksandr Zinchenko", age: 26, country: "Ukraine" },
        rb: { name: "Ben White", age: 25, country: "England" },
        lcb: { name: "Gabriel Magalhaes", age: 25, country: "Brazil" },
        rcb: { name: "William Saliba", age: 22, country: "France" },
        cdm: { name: "Thomas Partey", age: 29, country: "Ghana" },
        cm: { name: "Granit Xhaka", age: 30, country: "Switzerland" },
        cam: { name: "Martin Odegaard", age: 23, country: "Norway" },
        lw: { name: "Gabriel Martinelli", age: 21, country: "Brazil" },
        rw: { name: "Bukayo Saka", age: 21, country: "England" },
        st: { name: "Gabriel Jesus", age: 26, country: "Brazil" },
    },
};
Object.entries(arsenal.startingLineup).forEach(([k, v]) => {
  console.log(k, v.name);
});
    Login or Signup to reply.
  3. 0

    To fix it you should use only pos as key and access name like this:

     const name = arsenal.startingLineup[pos].name;

    However, for convenience you can use Object.entries with destructure syntax:

    const arsenal = {name: 'Arsenal',
              city: 'London',
              startingLineup: {
                gk: {name:'Aaron Ramsdale', age: 24, country:'England'},
                lb: {name:'Oleksandr Zinchenko', age: 26, country:'Ukraine'},
                rb: {name:'Ben White', age: 25, country:'England'},
                lcb: {name:'Gabriel Magalhaes', age: 25, country:'Brazil'},
                rcb: {name: 'William Saliba', age: 22, country:'France'},
                cdm: {name:'Thomas Partey',age: 29,country:'Ghana'},
                cm: {name:'Granit Xhaka',age:30,country:'Switzerland'},
                cam: {name:'Martin Odegaard',age:23,country:'Norway'},
                lw: {name:'Gabriel Martinelli',age:21, country:'Brazil'},
                rw: {name:'Bukayo Saka',age:21,country:'England'},
                st: {name:'Gabriel Jesus',age:26,country:'Brazil'}
  }
}


Object.entries(arsenal.startingLineup).forEach(([pos, { name, age, country }]) => {
  console.log(pos, name, age, country);
});
    Login or Signup to reply.
  4. 0 
         const name = arsenal.startingLineup[pos].name
     const age=arsenal.startingLineup[pos].age
     const country=arsenal.startingLineup[pos].country
     console.log(`pos:${pos},name:${name},age:${age},country:${country}`)
   })

    this code is correct due to the fact that pos is not an object.

    Login or Signup to reply.
  5. 0

    To fix your code you can just change [pos.name] to [pos].name, the problem is typeof(pos) is String, thus String.name gives you "undefined". I have listed the 4 new methods to loop an object - arsenal.startingLineup{} in an object - arsenal{}

    const arsenal = {
  name: "Arsenal",
  city: "London",
  startingLineup: {
    gk: {
      name: "Aaron Ramsdale",
      age: 24,
      country: "England"
    },
    lb: {
      name: "Oleksandr Zinchenko",
      age: 26,
      country: "Ukraine"
    },
    rb: {
      name: "Ben White",
      age: 25,
      country: "England"
    },
    lcb: {
      name: "Gabriel Magalhaes",
      age: 25,
      country: "Brazil"
    },
    rcb: {
      name: "William Saliba",
      age: 22,
      country: "France"
    },
    cdm: {
      name: "Thomas Partey",
      age: 29,
      country: "Ghana"
    },
    cm: {
      name: "Granit Xhaka",
      age: 30,
      country: "Switzerland"
    },
    cam: {
      name: "Martin Odegaard",
      age: 23,
      country: "Norway"
    },
    lw: {
      name: "Gabriel Martinelli",
      age: 21,
      country: "Brazil"
    },
    rw: {
      name: "Bukayo Saka",
      age: 21,
      country: "England"
    },
    st: {
      name: "Gabriel Jesus",
      age: 26,
      country: "Brazil"
    },
  },
};

//Method1 - for in loop
for (const key in arsenal.startingLineup) {
  console.log(`${key}: ${arsenal.startingLineup[key].name}`);
}

//Method 2 - Object.values
console.log("Method 2 - Object.values------------------");
Object.values(arsenal.startingLineup).forEach(val => console.log(val.name));

//Method 3 - Object.entries
console.log("Method 3 - Object.entries------------------");
const entries = Object.entries(arsenal.startingLineup);
Object.entries(arsenal.startingLineup).forEach(([key, value]) => {
  console.log(`${key}: ${value.name}`)
});

// Method 4 - Object.keys
console.log("Method 4 - Object.keys------------------");
const keys = Object.keys(arsenal.startingLineup);
keys.forEach((key, index) => {
  console.log(`${key}: ${arsenal.startingLineup[key].name}`);
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search