query json data using jquery in the view asp.net mvc

Question

I am retrieving json data from an api, and i want to pull the name, min_temp and max_temp data into my view. I am getting an error with my jquery. I want to retrieve all the first names, min temp and max temp data.

Json data

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

In the view:

<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>

This is created in asp.net mvc

Expected result: All the names,temp_min,temp_max

As you can see in the json data there are many instances of this data

Appreciate your help. Thanks

Answer 1

You can use map function and join to display response in your paragraph.

 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>