Getting the Data explainer

Aim of the puzzle: Use JavaScript to import an array of animals and add the name of each animal to your webpage.

Walk through of solution: Start the puzzle by adding import { animals } from 'animalShelter.data' to the top of the JS tab. animals is an array containing arrays.

Then, add a for loop to iterate through animals, for example: for (let animal of animals)

Inside the for loop, use document.createElement() to create a new h2 element, and store this in a variable named animalName.

Then, set the .textContent of animalName to animal[0]. Finally, use the .appendChild() method to add animalName to the body.

Javascript Concepts: Document object, document.createElement, document.body. .appendChild(), For Loops

Hi,

I should have missed something because I have the following error message :
The animalName.textContent is in the wrong place. Make sure it’s inside the for…of loop below the animalName variable declaration.

But I don’t see the error in my following code :

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

Did I miss anything ?..

Thank you !
Sylvain

Hey there, looks like the problem is this line.

animal[0] is surrounded by quotes, which means you are setting the text content to the string with the text 'animal[0]' instead of the text stored at animal[0].

Try removing the quotes and the puzzle should complete.

Hope this helps!
Ben

Well it was as simple as that…

Thanks a lot ! :slight_smile:

Regards,
Sylvain

1 Like

Hi! I am getting the following error message:
The <h1> and <h2> elements have been appended in the wrong order. Make sure document.body.appendChild(animalName) comes after document.body.appendChild(title);

But it looks correct in my code:

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

What am I missing? I am also getting this in the console: TypeError: e[t].apply is not a function

Hey there, try posting a screenshot of your code. It’s a bit easier to debug. Also, for large code blocks, you can use 3 backticks ``` above and below your code block. That way you don’t have to go line by line.

That TypeError message suggests that something is misspelled or mis-capitalized, like document, body, or appendChild.

Hope this helps!
Ben

Hello,
Ive been getting error as dani_test
The <h1> and <h2> elements have been appended in the wrong order. Make sure document.body.appendChild(animalName) comes after document.body.appendChild(title);
I have attached a screen shot.
What should I do to correct my code?

Hey there, very strange… I’m running the same code and it’s working for me.

Do you have any browser extensions that might interact with HTML or CSS elements on websites you visit?

This puzzle’s validation works by looking at the elements you created, rather than looking just at your code. It’s looking for an <h1> element followed by 3 <h2> elements.

It’s possible that these elements were changed somehow by your browser or by a browser extension. Try the following things:

  1. Refresh the page and try running the code again. If some part of the puzzle’s code didn’t download properly, this will fix that.
  2. Check the zoom levels in your browser (on Mac, press command+ or command-, or on Windows: control+ and control-). Make sure these are both at 100%.
  3. Disable browser extensions, and re-enable one by one
  4. Try completing the puzzle in a different browser

Hope this helps! If any of these solutions work, be sure to update us here so any other users with the same problem can see the solution.

Thanks!
Ben

Hi,
Thanks for your help. I ended up trying again the next day after rebooting my computer and it worked for me.

1 Like

I’ve tried every suggested solution in the forums, but with no avail. Please help!

Hey there,

In the for loop, you are declaring a variable named animals, but then referring to it as animal. Change the for loop so it looks like: for (let animal of animals)

Hope this helps!
Ben

hey there im having the same problem. no matter how the code is wrote it wont allow it to pass. tried every way in the forum. still stuck. help please.

have tried all those suggestions but still stuck, what next? are you fixing the bugs or
any skip function to move to next?

Hi there,

I also got a problem I cannot solve with the displayed solutions. I currently get the following error:

Does anyone have an idea what I need to adapt?

Hey there,

Your for loop doesn’t have a code block {} after it. It should look like this:

for (let animal of animals) {
    // code goes here
}

Also, JavaScript is case sensitive, so animalName and animalname are not the same.

Hope this helps!
Ben

for anyone who is stuck