Having issue with getting value from object variable. No errors showing

Question

I created an array called animals containing two objects. I want to get a value from the name variable in the object animals and insert that value in a return statement in the map method. I used ${} to access the variable.

const Animals = [{
    name: "Lion",
    type: "Carnivore",
  },
  {
    name: "Cow",
    type: "Herbivore",
  },
];


window.addEventListener("DOMContentLoaded", function() {
  let display = Animals.map(function(item) {
    return '<h1>${item.name}</h1>';
  });
  console.log(display);
});

Now I'm supposed to get in the console an array of two items containing the values of the variables -- the result should look like this ['<h1>Lion</h1>', '<h1>Cow</h1>']. But instead I get this ['<h1>${item.name}</h1>', '<h1>${item.name}</h1>']. As you can clearly see, for some reason the ${} was unable to access the variable and get the value. I don't know why this's happening. Console log shows no errors. Plz help me resolve this issue. Thanks in advance.

Yosvel Quintero · Accepted Answer · 2022-05-24 04:26:20Z

1

Check in your code instead of:

'<h1>${item.name}</h1>'

Should be:

`<h1>${item.name}</h1>`

Here is the documentation for Template literals (Template strings)

Demo:

const Animals = [{
    name: "Lion",
    type: "Carnivore",
  },
  {
    name: "Cow",
    type: "Herbivore",
  },
]

const display = Animals.map(({ name }) => `<h1>${name}</h1>`)

console.log(display)

edited May 24, 2022 at 4:26

answered May 24, 2022 at 4:20

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

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

Comments

Andy · Accepted Answer · 2022-05-24 04:29:18Z

0

Variables inside ${...} structures are template/string literals syntax but in order for them to work they need to be enclosed with backticks instead of single/double quotes.

const animals=[{name:"Lion",type:"Carnivore"},{name:"Cow",type:"Herbivore"}];

window.addEventListener("DOMContentLoaded", function() {
  const display = animals.map(function(item) {
    return `<h1>${item.name}</h1>`;
  });
  console.log(display);
});

answered May 24, 2022 at 4:29

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Comments

Madasamy M · Accepted Answer · 2022-05-24 06:37:16Z

0

const Animals = [{
    name: "Lion",
    type: "Carnivore",
  },
  {
    name: "Cow",
    type: "Herbivore",
  },
];


window.addEventListener("DOMContentLoaded", function() {
  let display = Animals.map(function(item) {
   return '<h1>'+item.name+'</h1>';
  // return `<h1>${item.name}</h1>`;
  });
  console.log(display);
});

answered May 24, 2022 at 6:37

Madasamy M

11 bronze badge

Collectives™ on Stack Overflow

Having issue with getting value from object variable. No errors showing

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related