Convert JSON Data to HTML(problem with forEach method)

JavaScript
1

Tell us what’s happening:

Hello, coders! Can’t understand, why json.forEach method works in exercises but doesn’t work in codepen, for example? I do all the same, but get an error in console: json.forEach is not a function. And yes, I understand, that forEach is method for arrays, not for objects. I’m just confused, why it works in exercises then. It’s obviously, that data in lesson is not an array, but it is an object.

this problem appears during I create a random quote machine

Your code so far

<script>
  $(document).ready(function() {

    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {

        var html = "";
        // Only change code below this line.
        json.forEach(function(val) {
          var keys = Object.keys(val);
          console.log(keys);
          html += "<div class = 'cat'>";
          keys.forEach(function(key) {
            html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
          });
          html += "</div><br>";
        });        
        
        // Only change code above this line.

        $(".message").html(html);

      });
    });
  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
   </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36.

Link to the challenge:

2

The JSON that you get in the exercises happens to be an array, so forEach works there. If the data that you get from the API that you’re using is an array, you can use forEach as well.

3

how it can be array, if it looks like this:
id: 0
imageLink: https://s3.amazonaws.com/freecodecamp/funny-cat.jpg
altText: A white cat wearing a green helmet shaped melon on it’s head.
codeNames: Juggernaut,Mrs. Wallace,Buttercup

Could you explain? I can’t understand. Array should looks like this [id, imageLink, altText, codeNames] etc. Isn’t it?

4

Each object looks like that, but the entire JSON is an array:

source: https://www.freecodecamp.org/json/cats.json

[
  {
    "id": 0,
    "imageLink": "https://s3.amazonaws.com/freecodecamp/funny-cat.jpg",
    "altText": "A white cat wearing a green helmet shaped melon on it's head. ",
    "codeNames": [
      "Juggernaut",
      "Mrs. Wallace",
      "Buttercup"
    ]
  },
  {
    "id": 1,
    "imageLink": "https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg",
    "altText": "A white cat with blue eys, looking very grumpy. ",
    "codeNames": [
      "Oscar",
      "Scrooge",
      "Tyrion"
    ]
  },
  {
    "id": 2,
    "imageLink": "https://s3.amazonaws.com/freecodecamp/mischievous-cat.jpg",
    "altText": "A ginger cat with one eye closed and mouth in a grin-like expression. Looking very mischievous. ",
    "codeNames": [
      "The Doctor",
      "Loki",
      "Joker"
    ]
  }
]
5

:open_mouth::hushed::disappointed_relieved:
so, it will be good, if subscription in the random quote machine challenge mention it. Because of I’m very new in programming, I’ve spent a huge time for understanding, how to use unfited code from exercise…))) It would be better to get a hint, like this: “use your own way for this challenge, don’t pay attention to methods from exercises”.

And thanks for your help… You put me in a right way!)

6

The structure of data that you’ll get varies between different APIs. It helps to consult an API’s documentation before using it.

7

thanks, I’ll consider it!

8

in the array shown above, is the array considered the json, or is that an array of json objects?