I'm really struggling with getting my json data to show up in a table using javascript

Question

I've got a source model script which when I try and replicate doesn't seem to work how it is supposed to do. Can anyone tell me where I'm going wrong?

HTML (This is just saying where the table is supposed to go and the JS script right at the end so the full HTML runs before running the script so I don't think there's anything wrong here):

<!DOCTYPE html>
<html>
<head>
    <title>Weather App</title>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <header>
        <h1>'>Weather App</h1>
    </header>
    <section>
        <table id="weather"></table>
        <div id="info"></div>
    </section>
<footer>
</footer>
<script src="weather.js" type="text/javascript"></script>
</body>
</html>

JavaScript (I am pretty sure the problem is here but I don't know why. I know the problem is likely going to be in the response section with the formatting of the tables but I'm confused as to how and why):

(function updateWeather()) {
    setTimeout(function() {
        $.ajax({
            url: "weather.json",
            type: "GET",
            dataType: "json",
            success: function(response) {
                let sTxt = "";
                $("#weather").html("");
                $.each(response.cities, function(index) {
                    sTxt += "<tr class='weather'><td>" + response.cities[index].cityName +
                        "</td><td>" + response.cities[index].currentConditions +
                        "</td><td>" + response.cities[index].temperature + "</td><td>" +
                        response.cities[index].windSpeed + "</td><td>" + response.cities[
                            index].windDirection + "</td><td>" + response.cities[index].windChillFactor +
                        "</td>" + "</td><td></td><td></td></tr>";;
                })
                $("#weather").append(sTxt);
                updateWeather();
            },
            error: function() {
                $("#info").html("<p>An error has occured</p>");)
        });
    }, 250);
})();

JSON (I don't think there's anything wrong here):

{
    "cities": [
      {
        "cityID": "1",
        "cityName": "London",
        "currentConditions": "Warm and Windy",
        "temperature": "28",
        "windSpeed": "12",
        "windDirection": "North East",
        "windChillFactor": "0"
      },
      {
        "cityID": "2",
        "cityName": "Canterbury",
        "currentConditions": "Light Showers",
        "temperature": "26",
        "windSpeed": "4",
        "windDirection": "North",
        "windChillFactor": "0"
      },
      {
        "cityID": "3",
        "cityName": "Margate",
        "currentConditions": "Windy",
        "temperature": "27",
        "windSpeed": "5",
        "windDirection": "South East",
        "windChillFactor": "5"
      },
      {
        "cityID": "4",
        "cityName": "Whitstable",
        "currentConditions": "Rain",
        "temperature": "21",
        "windSpeed": "6",
        "windDirection": "West",
        "windChillFactor": "7"
      },
      {
        "cityID": "5",
        "cityName": "Herne Bay",
        "currentConditions": "Rain",
        "temperature": "19",
        "windSpeed": "8",
        "windDirection": "South",
        "windChillFactor": "0"
      },
      {
        "cityID": "6",
        "cityName": "Ramsgate",
        "currentConditions": "Light Showers",
        "temperature": "22",
        "windSpeed": "4",
        "windDirection": "South East",
        "windChillFactor": "-2"
      },
      {
       "cityID": "7",
        "cityName": "Dover",
        "currentConditions": "Strong Winds",
        "temperature": "36",
        "windSpeed": "12",
        "windDirection": "South West",
        "windChillFactor": "3"
      },
      {
        "cityID": "8",
        "cityName": "Folkestone",
        "currentConditions": "Cloudy",
        "temperature": "27",
        "windSpeed": "9",
        "windDirection": "North",
        "windChillFactor": "-10"
      },
      {
        "cityID": "9",
        "cityName": "Deal",
        "currentConditions": "Hot",
        "temperature": "29",
        "windSpeed": "7",
        "windDirection": "North East",
        "windChillFactor": "-5"
      },
      {
        "cityID": "10",
        "cityName": "Ashford",
        "currentConditions": "Strong Showers",
        "temperature": "17",
        "windSpeed": "5",
        "windDirection": "South East",
        "windChillFactor": "-7"
      },
    ]
  }

Thank you for any suggestions.

it seems you have an extra closing tag `` in your string concatenation. After adding `response.cities[index].windChillFactor`, you have two closing tags. you also have an extra semicolon in the same statement :) — khuynh, Jan 14 '20 at 00:10
As @khuynh notes, you do have an extra closing after `index].windDirection +...`. What are you actually seeing? — see sharper, Jan 14 '20 at 00:12
@seesharper well all I can see is the header from the HTML page and no table. I've removed the extra semi-colon and the extra but it didn't change the output. — riizwaan, Jan 14 '20 at 00:24

score 0 · Answer 1 · answered Jan 14 '20 at 00:27

I think you may be experiencing this issue due to some missing brackets and other javascript syntax errors.

Since your entire javascript function declaration is followed by a pair of ()'s, I assume the intent of the updateWeather() function is to automatically run. See this answer for more info about ()'s.

Please try this updated javascript code.

(function updateWeather(){

    $.ajax({
            url: "weather.json",
            type: "GET",
            dataType: "json",
            success: function(response) {
                let sTxt = "";
                $("#weather").html("");
                $.each(response.cities, function(index) {
                    sTxt += "<tr class='weather'><td>" + response.cities[index].cityName +
                        "</td><td>" + response.cities[index].currentConditions +
                        "</td><td>" + response.cities[index].temperature + "</td><td>" +
                        response.cities[index].windSpeed + "</td><td>" + response.cities[
                            index].windDirection + "</td><td>" + response.cities[index].windChillFactor +
                        "</td>" + "</td><td></td><td></td></tr>";;
                })
                $("#weather").append(sTxt);
                //updateWeather();
            },
            error: function() {
                $("#info").html("<p>An error has occured</p>")
            }
        })

})();

P.S. You'll run into a CORS error if testing with a local json file as I was "Access to XMLHttpRequest at 'file:///C:/Users/blah/blah/blah/weather.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https" You may already have this worked out but you'll need to get your json on an server or something that is allowed by CORS policy. See this answer

Good Luck!

I tried this, The success is that I at least get the error function but I'm still not getting data into a table. Thank you for your support. — riizwaan, Jan 14 '20 at 00:54

score 0 · Answer 2 · answered Jan 14 '20 at 19:08

I'm able to get a table rendering with the following function. You had some syntax errors that needed to be corrected. I've omitted the ajax for the moment since, as Rob mentioned, you're getting a CORS error.

(function updateWeather() {
  setTimeout(function() {
    let sTxt = "";
    $("#weather").html("");
    $.each(response.cities, function(index) {
      sTxt += "<tr class='weather'><td>" + response.cities[index].cityName +
              "</td><td>" + response.cities[index].currentConditions +
              "</td><td>" + response.cities[index].temperature + 
              "</td><td>" + response.cities[index].windSpeed + 
              "</td><td>" + response.cities[index].windDirection +
              "</td><td>" + response.cities[index].windChillFactor +
              "</td><td></td><td></td></tr>";
    })
    $("#weather").append(sTxt);
  }, 250)
})()

Here's the full file for context:

<!DOCTYPE html>
<html>
<head>
    <title>Weather App</title>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <header>
        <h1>Weather App</h1>
    </header>
    <section>
        <table id="weather"></table>
        <div id="info"></div>
    </section>
<footer>
</footer>
<script>
const response = {
    "cities": [
      {
        "cityID": "1",
        "cityName": "London",
        "currentConditions": "Warm and Windy",
        "temperature": "28",
        "windSpeed": "12",
        "windDirection": "North East",
        "windChillFactor": "0"
      },
      {
        "cityID": "2",
        "cityName": "Canterbury",
        "currentConditions": "Light Showers",
        "temperature": "26",
        "windSpeed": "4",
        "windDirection": "North",
        "windChillFactor": "0"
      },
      {
        "cityID": "3",
        "cityName": "Margate",
        "currentConditions": "Windy",
        "temperature": "27",
        "windSpeed": "5",
        "windDirection": "South East",
        "windChillFactor": "5"
      },
      {
        "cityID": "4",
        "cityName": "Whitstable",
        "currentConditions": "Rain",
        "temperature": "21",
        "windSpeed": "6",
        "windDirection": "West",
        "windChillFactor": "7"
      },
      {
        "cityID": "5",
        "cityName": "Herne Bay",
        "currentConditions": "Rain",
        "temperature": "19",
        "windSpeed": "8",
        "windDirection": "South",
        "windChillFactor": "0"
      },
      {
        "cityID": "6",
        "cityName": "Ramsgate",
        "currentConditions": "Light Showers",
        "temperature": "22",
        "windSpeed": "4",
        "windDirection": "South East",
        "windChillFactor": "-2"
      },
      {
       "cityID": "7",
        "cityName": "Dover",
        "currentConditions": "Strong Winds",
        "temperature": "36",
        "windSpeed": "12",
        "windDirection": "South West",
        "windChillFactor": "3"
      },
      {
        "cityID": "8",
        "cityName": "Folkestone",
        "currentConditions": "Cloudy",
        "temperature": "27",
        "windSpeed": "9",
        "windDirection": "North",
        "windChillFactor": "-10"
      },
      {
        "cityID": "9",
        "cityName": "Deal",
        "currentConditions": "Hot",
        "temperature": "29",
        "windSpeed": "7",
        "windDirection": "North East",
        "windChillFactor": "-5"
      },
      {
        "cityID": "10",
        "cityName": "Ashford",
        "currentConditions": "Strong Showers",
        "temperature": "17",
        "windSpeed": "5",
        "windDirection": "South East",
        "windChillFactor": "-7"
      },
    ]
  };

(function updateWeather() {
  setTimeout(function() {
    let sTxt = "";
    $("#weather").html("");
    $.each(response.cities, function(index) {
      sTxt += "<tr class='weather'><td>" + response.cities[index].cityName +
              "</td><td>" + response.cities[index].currentConditions +
              "</td><td>" + response.cities[index].temperature + 
              "</td><td>" + response.cities[index].windSpeed + 
              "</td><td>" + response.cities[index].windDirection +
              "</td><td>" + response.cities[index].windChillFactor +
              "</td><td></td><td></td></tr>";
    })
    $("#weather").append(sTxt);
  }, 250)
})()


</script>   
<!-- <script src="weather.js" type="text/javascript"></script> -->
</body>
</html>

I'm really struggling with getting my json data to show up in a table using javascript

2 Answers2