Creé una matriz llamada animales que contiene dos objetos. Quiero obtener un valor de la variable de nombre en el objeto animales e insertar ese valor en una declaración de retorno en el método de mapa. Usé ${} para acceder a la 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); }); Ahora se supone que debo obtener en la consola una matriz de dos elementos que contengan los valores de las variables: el resultado debería verse así ['<h1>Lion</h1>', '<h1>Cow</h1>'] . Pero en cambio obtengo esto ['<h1>${item.name}</h1>', '<h1>${item.name}</h1>'] . Como puede ver claramente, por alguna razón, ${} no pudo acceder a la variable y obtener el valor. No sé por qué sucede esto. El registro de la consola no muestra errores. Por favor, ayúdame a resolver este problema. Gracias por adelantado.
Verifique su código en lugar de:
'<h1>${item.name}</h1>'Debiera ser:
`<h1>${item.name}</h1>`Aquí está la documentación para los literales de plantilla (cadenas de plantilla)
Manifestación:
const Animals = [{ name: "Lion", type: "Carnivore", }, { name: "Cow", type: "Herbivore", }, ] const display = Animals.map(({ name }) => `<h1>${name}</h1>`) console.log(display)Las variables dentro de las estructuras ${...} son una sintaxis de literales de plantilla/cadena, pero para que funcionen deben encerrarse entre comillas invertidas en lugar de comillas simples/dobles.
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); });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); });