\
**Category:** General\
**Created:** [November 27, 2017, 12:35pm UTC](https://forum.freecodecamp.org/t/weather-app-converting-json-data-to-html/161075 "2017-11-27T12:35:31Z")\
**Posts on this page:** 13\
**Page:** 1
**Author:**  [@virtualdesigner](https://forum.freecodecamp.org/u/virtualdesigner)\
**Post date:** [November 27, 2017, 12:35pm UTC](https://forum.freecodecamp.org/t/weather-app-converting-json-data-to-html/161075/1 "2017-11-27T12:35:32Z")
I can’t understand how to convert the JSON data to HTML. Kindly watch this [https://codepen.io/CreatorInCloud/pen/BmrbKM](https://codepen.io/CreatorInCloud/pen/BmrbKM). Thank you.
---
**Author:**  [@John-freeCodeCamp](https://forum.freecodecamp.org/u/John-freeCodeCamp)\
**Post date:** [November 27, 2017, 12:57pm UTC](https://forum.freecodecamp.org/t/weather-app-converting-json-data-to-html/161075/2 "2017-11-27T12:57:14Z")
Try targeting the HTML of message. `$("#message").html(val)`
Make sure you have jQurey added too (settings).
---
**Author:**  [@virtualdesigner](https://forum.freecodecamp.org/u/virtualdesigner)\
**Post date:** [November 27, 2017, 1:02pm UTC](https://forum.freecodecamp.org/t/weather-app-converting-json-data-to-html/161075/3 "2017-11-27T13:02:24Z")
@John-freeCodeCamp Everything seems to be correct but nothing appears to be converted.
---
**Author:**  [@lionel-rowe](https://forum.freecodecamp.org/u/lionel-rowe)\
**Post date:** [November 27, 2017, 3:05pm UTC](https://forum.freecodecamp.org/t/weather-app-converting-json-data-to-html/161075/4 "2017-11-27T15:05:57Z")
Check your console:
```nohighlight
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)`.
---
**Author:**  [@John-freeCodeCamp](https://forum.freecodecamp.org/u/John-freeCodeCamp)\
**Post date:** [November 28, 2017, 2:58am UTC](https://forum.freecodecamp.org/t/weather-app-converting-json-data-to-html/161075/5 "2017-11-28T02:58:17Z")
I get my weather.
You have some errors
---
**Author:**  [@TomerPacific](https://forum.freecodecamp.org/u/TomerPacific)\
**Post date:** [November 28, 2017, 5:56pm UTC](https://forum.freecodecamp.org/t/weather-app-converting-json-data-to-html/161075/6 "2017-11-28T17:56:37Z")
@virtualdesigner,
as others have mentioned, you have several issues with your Javascript code.
First, let’s look at these following lines of code:
```auto
$("#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.
---
**Author:**  [@John-freeCodeCamp](https://forum.freecodecamp.org/u/John-freeCodeCamp)\
**Post date:** [November 29, 2017, 1:39am UTC](https://forum.freecodecamp.org/t/weather-app-converting-json-data-to-html/161075/7 "2017-11-29T01:39:53Z")
Also you have 2 bootstraps added in your js?
---
**Author:**  [@virtualdesigner](https://forum.freecodecamp.org/u/virtualdesigner)\
**Post date:** [November 29, 2017, 2:39am UTC](https://forum.freecodecamp.org/t/weather-app-converting-json-data-to-html/161075/8 "2017-11-29T02:39:39Z")
@TomerPacific
Thank you for your reply 🙂
But i did the same as here -\>[https://www.freecodecamp.org/challenges/convert-json-data-to-html](https://www.freecodecamp.org/challenges/convert-json-data-to-html)
If’s it’s really wrong , Do you know any solution for this?
---
**Author:**  [@TomerPacific](https://forum.freecodecamp.org/u/TomerPacific)\
**Post date:** [November 29, 2017, 5:40am UTC](https://forum.freecodecamp.org/t/weather-app-converting-json-data-to-html/161075/10 "2017-11-29T05:40:27Z")
@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).
---
**Author:**  [@virtualdesigner](https://forum.freecodecamp.org/u/virtualdesigner)\
**Post date:** [November 29, 2017, 6:41am UTC](https://forum.freecodecamp.org/t/weather-app-converting-json-data-to-html/161075/11 "2017-11-29T06:41:50Z")
@TomerPacific
My JS code is this-
```auto
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 += "";
keys.forEach(function(key) {
html += "" + key + ": " + val[key] + "
";
});
html += "
";
});
$("#message").html(html);
});
});
};
```
This is my HTML code-
```auto
Why does nothing appear Here?
```
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. ☹
Where is the problem?
Please visit the link -\>[https://codepen.io/CreatorInCloud/pen/BmrbKM](https://codepen.io/CreatorInCloud/pen/BmrbKM).
Thank you. 🙂
---
**Author:**  [@camperextraordinaire](https://forum.freecodecamp.org/u/camperextraordinaire)\
**Post date:** [November 29, 2017, 7:49pm UTC](https://forum.freecodecamp.org/t/weather-app-converting-json-data-to-html/161075/12 "2017-11-29T19:49:15Z")
As it has been explained numerous times already, json is an object and not an array, so doing:
```auto
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.
---
**Author:**  [@virtualdesigner](https://forum.freecodecamp.org/u/virtualdesigner)\
**Post date:** [November 30, 2017, 3:48am UTC](https://forum.freecodecamp.org/t/weather-app-converting-json-data-to-html/161075/13 "2017-11-30T03:48:59Z")
Friends , Thank you so much for your support. 😍 And my problem is solved 🙂
---
**Author:**  [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:59pm UTC](https://forum.freecodecamp.org/t/weather-app-converting-json-data-to-html/161075/14 "2021-01-16T17:59:25Z")
Closed on January 16, 2021, 5:59pm UTC