запрос данных JSON с помощью JQuery в представлении asp.net MVC - PullRequest
Новая
       3

запрос данных JSON с помощью JQuery в представлении asp.net MVC

0 голосов
/ 03 июля 2019

Я получаю данные json из API и хочу вывести данные name, min_temp и max_temp в мое представление. Я получаю ошибку с моей JQuery. Я хочу получить все имена, данные о минимальной и максимальной температуре.

данные Json 

     {
    "message": "accurate",
    "cod": "200",
    "count": 5,
    "list": [
        {
            "id": 2643743,
            "name": "London",
            "coord": {
                "lat": 51.5073,
                "lon": -0.1277
            },
            "main": {
                "temp": 15.91,
                "pressure": 1025,
                "humidity": 93,
                "temp_min": 13.33,
                "temp_max": 18.33
            },
            "dt": 1562101758,
            "wind": {
                "speed": 2.6,
                "deg": 60
            },
            "sys": {
                "country": "GB"
            },
            "rain": null,
            "snow": null,
            "clouds": {
                "all": 0
            },
            "weather": [
                {
                    "id": 800,
                    "main": "Clear",
                    "description": "clear sky",
                    "icon": "01n"
                }
            ]
        },
        {
            "id": 6058560,
            "name": "London",
            "coord": {
                "lat": 42.9886,
                "lon": -81.2467
            },
            "main": {
                "temp": 26.13,
                "pressure": 1011,
                "humidity": 69,
                "temp_min": 22.22,
                "temp_max": 28.33
            },
            "dt": 1562101768,
            "wind": {
                "speed": 4.6,
                "deg": 270
            },
            "sys": {
                "country": "CA"
            },
            "rain": null,
            "snow": null,
            "clouds": {
                "all": 75
            },
            "weather": [
                {
                    "id": 803,
                    "main": "Clouds",
                    "description": "broken clouds",
                    "icon": "04d"
                }
            ]
        },
        {
            "id": 4298960,
            "name": "London",
            "coord": {
                "lat": 37.129,
                "lon": -84.0833
            },
            "main": {
                "temp": 26.08,
                "pressure": 1017,
                "humidity": 100,
                "temp_min": 22,
                "temp_max": 28.89
            },
            "dt": 1562101777,
            "wind": {
                "speed": 2.84,
                "deg": 283.644
            },
            "sys": {
                "country": "US"
            },
            "rain": null,
            "snow": null,
            "clouds": {
                "all": 1
            },
            "weather": [
                {
                    "id": 211,
                    "main": "Thunderstorm",
                    "description": "thunderstorm",
                    "icon": "11d"
                }
            ]
        },
        {
            "id": 4517009,
            "name": "London",
            "coord": {
                "lat": 39.8864,
                "lon": -83.4483
            },
            "main": {
                "temp": 32.92,
                "pressure": 1013,
                "humidity": 41,
                "temp_min": 27.78,
                "temp_max": 35
            },
            "dt": 1562101777,
            "wind": {
                "speed": 5.7,
                "deg": 260
            },
            "sys": {
                "country": "US"
            },
            "rain": null,
            "snow": null,
            "clouds": {
                "all": 1
            },
            "weather": [
                {
                    "id": 211,
                    "main": "Thunderstorm",
                    "description": "thunderstorm",
                    "icon": "11d"
                }
            ]
        },
        {
            "id": 4119617,
            "name": "London",
            "coord": {
                "lat": 35.329,
                "lon": -93.253
            },
            "main": {
                "temp": 29.93,
                "pressure": 1015,
                "humidity": 70,
                "temp_min": 28.89,
                "temp_max": 31.11
            },
            "dt": 1562101885,
            "wind": {
                "speed": 3.1,
                "deg": 250
            },
            "sys": {
                "country": "US"
            },
            "rain": null,
            "snow": null,
            "clouds": {
                "all": 1
            },
            "weather": [
                {
                    "id": 800,
                    "main": "Clear",
                    "description": "clear sky",
                    "icon": "01d"
                }
            ]
        }
    ]
}

По виду: 

<p id="name"></p>
<p id="temp"></p>
<p id="temp_min"></p>
<p id="temp_max"></p>

<button>Get Weather</button>
<script>
    $(document).ready(function () {
        $("button").click(function () {

            $.get("http://api.openweathermap.org/data/2.5/find?q=London&appid=b9acdc9c9950140623607d0a90eb40b7&units=metric",
                function (response) {
                    // response
                    $("#name").text(response.list.name);
                    //  $("#temp").text(response.main.temp);
                    //  $("#temp_min").text(response.main.temp_min);
                    // $("#temp_max").text(response.main.temp_max);
                    console.log(response);


                });
        });
    });

</script>

Это создано в asp.net mvc

Ожидаемый результат: все имена, temp_min, temp_max

Как видно из данных json, существует множество экземпляров этих данных

Ценю вашу помощь. Спасибо

1 Ответ

0 голосов
/ 03 июля 2019

Вы можете использовать функцию map и join для отображения ответа в вашем абзаце. 

var response =   {
    "message": "accurate",
    "cod": "200",
    "count": 5,
    "list": [
        {
            "id": 2643743,
            "name": "London",
            "coord": {
                "lat": 51.5073,
                "lon": -0.1277
            },
            "main": {
                "temp": 15.91,
                "pressure": 1025,
                "humidity": 93,
                "temp_min": 13.33,
                "temp_max": 18.33
            },
            "dt": 1562101758,
            "wind": {
                "speed": 2.6,
                "deg": 60
            },
            "sys": {
                "country": "GB"
            },
            "rain": null,
            "snow": null,
            "clouds": {
                "all": 0
            },
            "weather": [
                {
                    "id": 800,
                    "main": "Clear",
                    "description": "clear sky",
                    "icon": "01n"
                }
            ]
        },
        {
            "id": 6058560,
            "name": "London",
            "coord": {
                "lat": 42.9886,
                "lon": -81.2467
            },
            "main": {
                "temp": 26.13,
                "pressure": 1011,
                "humidity": 69,
                "temp_min": 22.22,
                "temp_max": 28.33
            },
            "dt": 1562101768,
            "wind": {
                "speed": 4.6,
                "deg": 270
            },
            "sys": {
                "country": "CA"
            },
            "rain": null,
            "snow": null,
            "clouds": {
                "all": 75
            },
            "weather": [
                {
                    "id": 803,
                    "main": "Clouds",
                    "description": "broken clouds",
                    "icon": "04d"
                }
            ]
        },
        {
            "id": 4298960,
            "name": "London",
            "coord": {
                "lat": 37.129,
                "lon": -84.0833
            },
            "main": {
                "temp": 26.08,
                "pressure": 1017,
                "humidity": 100,
                "temp_min": 22,
                "temp_max": 28.89
            },
            "dt": 1562101777,
            "wind": {
                "speed": 2.84,
                "deg": 283.644
            },
            "sys": {
                "country": "US"
            },
            "rain": null,
            "snow": null,
            "clouds": {
                "all": 1
            },
            "weather": [
                {
                    "id": 211,
                    "main": "Thunderstorm",
                    "description": "thunderstorm",
                    "icon": "11d"
                }
            ]
        },
        {
            "id": 4517009,
            "name": "London",
            "coord": {
                "lat": 39.8864,
                "lon": -83.4483
            },
            "main": {
                "temp": 32.92,
                "pressure": 1013,
                "humidity": 41,
                "temp_min": 27.78,
                "temp_max": 35
            },
            "dt": 1562101777,
            "wind": {
                "speed": 5.7,
                "deg": 260
            },
            "sys": {
                "country": "US"
            },
            "rain": null,
            "snow": null,
            "clouds": {
                "all": 1
            },
            "weather": [
                {
                    "id": 211,
                    "main": "Thunderstorm",
                    "description": "thunderstorm",
                    "icon": "11d"
                }
            ]
        },
        {
            "id": 4119617,
            "name": "London",
            "coord": {
                "lat": 35.329,
                "lon": -93.253
            },
            "main": {
                "temp": 29.93,
                "pressure": 1015,
                "humidity": 70,
                "temp_min": 28.89,
                "temp_max": 31.11
            },
            "dt": 1562101885,
            "wind": {
                "speed": 3.1,
                "deg": 250
            },
            "sys": {
                "country": "US"
            },
            "rain": null,
            "snow": null,
            "clouds": {
                "all": 1
            },
            "weather": [
                {
                    "id": 800,
                    "main": "Clear",
                    "description": "clear sky",
                    "icon": "01d"
                }
            ]
        }
    ]
};

let result = response.list.map(function(item){
  return {
     name: item.name,
     temp: item.main.temp,
     temp_min: item.main.temp_min,
     temp_max: item.main.temp_max
  }
});

//console.log(result.map(c=>c.name).join())

$('#name').text(result.map(c=>c.name).join());
$('#temp').text(result.map(c=>c.temp).join());
$('#temp_min').text(result.map(c=>c.temp_min).join());
$('#temp_max').text(result.map(c=>c.temp_max).join());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="name"></p>
<p id="temp"></p>
<p id="temp_min"></p>
<p id="temp_max"></p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...