Getting The Data es-419 Explainer

Explicador de Obtención de datos

Objetivo de este acertijo: Usar JavaScript para importar un arreglo de animales y agregar el nombre de cada animal a tu página web.

Tutorial de la solución: Comienza el acertijo agregando import { animals } from 'animalShelter.data' a la parte superior de la pestaña de JS. animals` es un arreglo que contiene arreglos.

Luego, agrega un for loop para iterar por animals, por ejemplo: for (let animal of animals)

Dentro del ciclo, usa document.createElement() para crear un nuevo elemento h2, y almacenarlo en una variable llamada animalName.

Luego, define .textContent de animalName`` como animal[0]. Por último usa el método .appendChild()para agregaranimalNameabody`.

Conceptos de JavaScript: objeto de documento, document.createElement, document.body. .appendChild(), for loops

ALGUIEN ME PUEDE AYUDAR PORQUE NO ME CORRE CUAL ES EL ERROR
import {animals} from ‘animalShelter.data’;

let title = document.createElement(‘h1’);
title.textContent = ‘Adoptable Animals’;
document.body.appendChild(title);

for(var animal of animals) {
let animalName = document.createElement(‘h2’);

animalName.textContent = animal[0];
document.body.appendChild(animalName);
}

el codigo import {animals} from ’animalShelter.data’; debe en primer lugar como lo inf¡dica la instruccion luego en la parte inferior del codigo se agrega el for of loop

import{animals} from’animalShelter.data’;
let title = document.createElement(‘h1’);
title.textContent = ‘Adoptable Animals’;
document.body.appendChild(title);
for (let animal of animals){
let animalName = document.createElement(‘h2’);
animalName.textContent = animal[0];

document.body.appendChild(animalName);

}

1 Like

Esta es la solucion de obtencion de datos

for (var animal of animals){
let animalName = document.createElement(‘h2’)
animalName.textContent = animal[0];
document.body.appendChild(animalName);
}

import {animals} from ‘animalShelter.data’;
let title = document.createElement(‘h1’);
title.textContent = ‘Adoptable Animals’;
document.body.appendChild(title);

for(var animal of animals){
let animalName = document.createElement(‘h2’);
animalName.textContent = animal [0];

document.body.appendChild(animalName);

}

3 Likes

Hola hay que tener cuidado en el orden de las instrucciones dos errores yo cometi

  1. el primero que no estaba colocando las comillas adecuadas y por eso no me reconocia el string.
  2. el orden de las instrucciones hay que leer bien por que el titulo me salia de ultimas y lo demas de primeras.

La solución del codigo o la que me funciono a mi es:

import{animals} from ‘animalShelter.data’;

let title = document.createElement(‘h1’);
title.textContent = ‘Adoptable Animals’;
document.body.appendChild(title);

for (let animal of animals){

let animalName = document.createElement(‘h2’);
animalName.textContent = animal[0];
document.body.appendChild(animalName);
}

1 Like

Te puede pasar que, cuando lees:

Comienza el acertijo agregando import { animals } de 'animalShelter.data'

no te das cuenta que te esta diciendo: import {animals} from ‘animalShelter.data’;

Tarde 5 minutos en darme cuenta.

2 Likes

La clave está en usar las comillas adecuadamente y el orden de nuestro código

import{animals} from “animalShelter.data”;

let title = document.createElement(“h1”);
title.textContent = “Adoptable Animals”;
document.body.appendChild(title);
for (let animal of animals){
let animalName = document.createElement(“h2”);
animalName.textContent = animal[0];

document.body.appendChild(animalName);
}

hola… a dia de hoy 05/07/2022 no me funciona, probe todos los codigos de los comentarios y ninguno funciona, alguien sabe si la pagina tendra algun error?

1 Like

import { animals } from ‘animalShelter.data’;
let title = document.createElement(‘h1’);
title.textContent = ‘Adoptable Animals’;
document.body.appendChild(title);
for (let animal of animals) {
var animalName = document.createElement(‘h2’)
animalName.textContent = animal[0]
document.body.appendChild(animalName)
}
ese es correcto espero les sirva

ALGUIEN ME PUEDE AYUDAR? ME SALE ESTE ERROR " Los elementos <h1> y <h2> se anexaron en el orden incorrecto. Asegúrate de que document.body.appendChild(animalName) se encuentre después de document.body.appendChild(title);"

MI CODIGO ES ESTE:
import{animals} from “animalShelter.data”;

let title = document.createElement(“h1”);
title.textContent = “Adoptable Animals”;
document.body.appendChild(title);

for (let animal of animals){
let animalName = document.createElement(“h2”);
animalName.textContent = animal[0];
document.body.appendChild(animalName);
}

Alguien me podría ayudar en que esta mal mi código?

import {animals} from ‘animalShelter.data’;
let title = document.createElement(‘h1’);
title.textContent = ‘Adoptable Animals’;
document.body.appendChild(title);
for (let animal of animals) {
var animalName = document.createElement(‘h2’);
animalName.textContent = animal[0];
document.body.appendChild(animalName);
}

import{animals} from ‘animalShelter.data’;
let title = document.createElement(‘h1’);
title.textContent = ‘Adoptable Animals’;
document.body.appendChild(title);

for(let animal of animals){
let animalName = document.createElement(‘h2’)
animalName.textContent = animal[0]

document.body.appendChild(animalName);

}

the correct answer
import { animals } from ‘animalShelter.data’;
let title = document.createElement(‘h1’);
title.textContent = ‘Adoptable Animals’;
document.body.appendChild(title);
for(let animal of animals){
let animalName=document.createElement(‘h2’);
animalName.textContent=animal[0];
document.body.appendChild(animalName);
}