Weather app: converting JSON data to HTML

1

I can’t understand how to convert the JSON data to HTML. Kindly watch this https://codepen.io/CreatorInCloud/pen/BmrbKM. Thank you.

2

Try targeting the HTML of message. $("#message").html(val)

Make sure you have jQurey added too (settings).

1 Like
3

@John-freeCodeCamp Everything seems to be correct but nothing appears to be converted.

4

Check your console:

Uncaught TypeError: json.forEach is not a function

json is an object, not an array or array-like. If you want an array of the keys, consider using Object.keys(json).

1 Like
5

image
image1920×1040 65.1 KB

I get my weather.

image
image1920×1040 90.3 KB

You have some errors

1 Like
6

@virtualdesigner,
as others have mentioned, you have several issues with your Javascript code.
First, let’s look at these following lines of code:

 $("#data").html(JSON.stringify(json));
     // Only change code below this line.Please help me to convert the above JSON data to HTML.
        var html = "";
 json.forEach(function(val){

On the first line you are turning the json object returned from the API call to a string and then inserting it to the html of the #data element.

Please note that you are not saving the result of the stringify method and as such, the json object will still be an object and not a string.

It looks like this:
{coord: {…}, weather: Array(1), base: “stations”, main: {…}, visibility: 10000, …}

And if you want to access it you can use the object notation in Javascript.
For example, to get the coord object you would write json[‘coord’]…

Second, since json is an object you cannot call a for each loop on it as it is not an array.

I hope that helps.

1 Like
7

Also you have 2 bootstraps added in your js?

1 Like
8

@TomerPacific
Thank you for your reply :slight_smile:
But i did the same as here ->https://www.freecodecamp.org/challenges/convert-json-data-to-html
If’s it’s really wrong , Do you know any solution for this?

10

@virtualdesigner,
without seeing your code, I can’t really comment on anything. Telling me you did the same as a certain exercise doesn’t let me see what code you actually wrote.
Upload your code so we can see where the problem lies.

It is important for you to take notice that in the exercise you provided they are iterating over the keys of the json object (which you did not do previously).

1 Like
11

@TomerPacific
My JS code is this-

if(navigator.geolocation){
   navigator.geolocation.getCurrentPosition(function(position){   
       
 $.getJSON("https://fcc-weather-api.glitch.me/api/current?lat="+position.coords.latitude+"&lon="+position.coords.longitude, function(json){
  var myData = JSON.stringify(json);
$("#data").html(myData);
  
    // Only change code below this line.Please help me to convert the above JSON data to HTML.
     var html = "";
myData.forEach(function(val){
  var keys = Object.keys(val);
  html += "<div class = 'something'>";
 keys.forEach(function(key) {
   html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
 });
 html += "</div><br>";
});
     
   
$("#message").html(html);         
         });          
       });
};

This is my HTML code-

<div id="data">  
</div><br><br>
<div id="message">
Why does nothing appear Here?
</div>

i have added JQuery and JQuery UI to Codepen.
I used jSON.stringify(json) to convert the json data and stored it into a variable myData.
But still the problem persists. :frowning:
Where is the problem?
Please visit the link ->https://codepen.io/CreatorInCloud/pen/BmrbKM.
Thank you. :slight_smile:

12

As it has been explained numerous times already, json is an object and not an array, so doing:

var myData = JSON.stringify(json);

converts the json object into a string and assigns it to myData, so you can still not use the forEach function on myData.

If you take a look at the solution I provided above, you can iterate through the properties/values of the json object.

2 Likes
13

Friends , Thank you so much for your support. :heart_eyes: And my problem is solved :slight_smile: