Я действительно борюсь с тем, чтобы мои json данные отображались в таблице, используя javascript - PullRequest
Новая
       1

Я действительно борюсь с тем, чтобы мои json данные отображались в таблице, используя javascript

1 голос
/ 14 января 2020

У меня есть скрипт исходной модели, который, когда я пытаюсь выполнить репликацию, кажется, не работает так, как должен. Может кто-нибудь сказать мне, где я иду не так?

HTML (Это просто говорит, где таблица должна go и сценарий JS в конце, так что полный HTML запускается перед запуском скрипта, поэтому я не думаю, что здесь что-то не так): 

<!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 (я почти уверен, что проблема здесь, но я не знаю почему. Я знаю проблему скорее всего, будет в разделе ответов с форматированием таблиц, но я не понимаю, как и почему): 

(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 (я не думаю, что здесь что-то не так) : 

{
    "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"
      },
    ]
  }

Спасибо за любые предложения.

Ответы [ 2 ]

0 голосов
/ 14 января 2020

Я могу получить рендеринг таблицы с помощью следующей функции. У вас были некоторые синтаксические ошибки, которые нужно было исправить. Я опустил ajax на данный момент, так как, как упоминал Роб, вы получаете ошибку CORS. 

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

Вот полный файл для контекста: 

<!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>
0 голосов
/ 14 января 2020

Я думаю, что вы, возможно, испытываете эту проблему из-за некоторых пропущенных скобок и других синтаксических ошибок javascript.

Поскольку после объявления всей вашей функции javascript следует пара (), я Предположим, что функция updateWeather () предназначена для автоматического запуска. См. Этот ответ для получения дополнительной информации о () .

Пожалуйста, попробуйте этот обновленный javascript код. 

(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>")
            }
        })

})();

PS Вы столкнетесь с ошибкой CORS, если будете тестировать с локальным файлом json, как у меня было "Доступ к XMLHttpRequest в файле": /// C: / Users / blah / бла / бла / погода. json 'from origin' null 'был заблокирован политикой CORS: Запросы перекрестного происхождения поддерживаются только для схем протоколов: http, data, chrome, chrome -extension, https "Вы можете уже сработали, но вам нужно получить json на сервере или что-то, что разрешено политикой CORS. Смотри этот ответ

Удачи!

...