Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

hjortur17's avatar

AJAX data

Hi, I'm trying to get data from API. But I'm not sure how to print it out in my div. I'm not sure what I should change for console.log(response);

A link to the API is here: https://apis.is/weather/forecasts/is

And I'm trying to get the first Object T value

This is how the app.js file looks like:

$.ajax({
    'url': 'https://apis.is/weather/forecasts/is',
    'type': 'GET',
    'dataType': 'json',
    'data': {'stations': '1,422'},
    'success': function(response) {
        console.log(response);
    }
});

And the response is like this:

[Log] Object (app.js, line 36402)

results: Array (2)
0 Object

atime: "2019-01-29 12:00:00"

err: ""

forecast: Array (108)
0 {ftime: "2019-01-29 13:00:00", F: "1", D: "NA", T: "-7", W: "Heiðskírt", …}
1 {ftime: "2019-01-29 14:00:00", F: "2", D: "ANA", T: "-5", W: "Heiðskírt", …}
2 {ftime: "2019-01-29 15:00:00", F: "4", D: "A", T: "-4", W: "Heiðskírt", …}
3 {ftime: "2019-01-29 16:00:00", F: "4", D: "A", T: "-4", W: "Léttskýjað", …}
4 {ftime: "2019-01-29 17:00:00", F: "2", D: "A", T: "-4", W: "Léttskýjað", …}
5 {ftime: "2019-01-29 18:00:00", F: "3", D: "A", T: "-4", W: "Skýjað", …}
6 {ftime: "2019-01-29 19:00:00", F: "2", D: "ASA", T: "-5", W: "Léttskýjað", …}
7 {ftime: "2019-01-29 20:00:00", F: "2", D: "S", T: "-7", W: "Heiðskírt", …}
8 {ftime: "2019-01-29 21:00:00", F: "1", D: "SSA", T: "-8", W: "Heiðskírt", …}
9 {ftime: "2019-01-29 22:00:00", F: "2", D: "SSA", T: "-9", W: "Heiðskírt", …}
10 {ftime: "2019-01-29 23:00:00", F: "2", D: "SSA", T: "-9", W: "Heiðskírt", …}
11 {ftime: "2019-01-30 00:00:00", F: "2", D: "ASA", T: "-9", W: "Heiðskírt", …}
12 {ftime: "2019-01-30 01:00:00", F: "2", D: "ASA", T: "-9", W: "Heiðskírt", …}
13 {ftime: "2019-01-30 02:00:00", F: "3", D: "A", T: "-9", W: "Heiðskírt", …}
14 {ftime: "2019-01-30 03:00:00", F: "2", D: "A", T: "-9", W: "Heiðskírt", …}
15 {ftime: "2019-01-30 04:00:00", F: "1", D: "A", T: "-9", W: "Heiðskírt", …}
16 {ftime: "2019-01-30 05:00:00", F: "2", D: "A", T: "-8", W: "Heiðskírt", …}
17 {ftime: "2019-01-30 06:00:00", F: "2", D: "ASA", T: "-9", W: "Heiðskírt", …}
18 {ftime: "2019-01-30 07:00:00", F: "3", D: "ASA", T: "-7", W: "Heiðskírt", …}
19 {ftime: "2019-01-30 08:00:00", F: "5", D: "A", T: "-7", W: "Heiðskírt", …}
20 {ftime: "2019-01-30 09:00:00", F: "5", D: "A", T: "-6", W: "Heiðskírt", …}
21 {ftime: "2019-01-30 10:00:00", F: "5", D: "A", T: "-6", W: "Heiðskírt", …}
22 {ftime: "2019-01-30 11:00:00", F: "4", D: "A", T: "-6", W: "Heiðskírt", …}
23 {ftime: "2019-01-30 12:00:00", F: "4", D: "ASA", T: "-6", W: "Heiðskírt", …}
24 {ftime: "2019-01-30 13:00:00", F: "4", D: "A", T: "-6", W: "Léttskýjað", …}
25 {ftime: "2019-01-30 14:00:00", F: "4", D: "A", T: "-6", W: "Skýjað", …}
26 {ftime: "2019-01-30 15:00:00", F: "5", D: "A", T: "-5", W: "Alskýjað", …}
27 {ftime: "2019-01-30 16:00:00", F: "4", D: "A", T: "-6", W: "Skýjað", …}
28 {ftime: "2019-01-30 17:00:00", F: "4", D: "A", T: "-7", W: "Léttskýjað", …}
29 {ftime: "2019-01-30 18:00:00", F: "3", D: "A", T: "-8", W: "Heiðskírt", …}
30 {ftime: "2019-01-30 19:00:00", F: "2", D: "A", T: "-8", W: "Heiðskírt", …}
31 {ftime: "2019-01-30 20:00:00", F: "1", D: "ANA", T: "-10", W: "Heiðskírt", …}
32 {ftime: "2019-01-30 21:00:00", F: "1", D: "SA", T: "-10", W: "Heiðskírt", …}
33 {ftime: "2019-01-30 22:00:00", F: "1", D: "S", T: "-11", W: "Heiðskírt", …}
34 {ftime: "2019-01-30 23:00:00", F: "2", D: "S", T: "-11", W: "Heiðskírt", …}
35 {ftime: "2019-01-31 00:00:00", F: "2", D: "A", T: "-9", W: "Léttskýjað", …}
36 {ftime: "2019-01-31 01:00:00", F: "2", D: "ASA", T: "-9", W: "Skýjað", …}
37 {ftime: "2019-01-31 02:00:00", F: "4", D: "ANA", T: "-6", W: "Léttskýjað", …}
38 {ftime: "2019-01-31 03:00:00", F: "5", D: "ANA", T: "-4", W: "Heiðskírt", …}
39 {ftime: "2019-01-31 04:00:00", F: "6", D: "ANA", T: "-3", W: "Heiðskírt", …}
40 {ftime: "2019-01-31 05:00:00", F: "7", D: "ANA", T: "-3", W: "Heiðskírt", …}
41 {ftime: "2019-01-31 06:00:00", F: "8", D: "ANA", T: "-3", W: "Heiðskírt", …}
42 {ftime: "2019-01-31 07:00:00", F: "7", D: "NA", T: "-3", W: "Heiðskírt", …}
43 {ftime: "2019-01-31 08:00:00", F: "6", D: "NA", T: "-3", W: "Heiðskírt", …}
44 {ftime: "2019-01-31 09:00:00", F: "6", D: "NA", T: "-3", W: "Léttskýjað", …}
45 {ftime: "2019-01-31 10:00:00", F: "6", D: "NA", T: "-3", W: "Skýjað", …}
46 {ftime: "2019-01-31 11:00:00", F: "8", D: "NA", T: "-3", W: "Alskýjað", …}
47 {ftime: "2019-01-31 12:00:00", F: "8", D: "NA", T: "-2", W: "Alskýjað", …}
48 {ftime: "2019-01-31 13:00:00", F: "9", D: "NNA", T: "-2", W: "Skýjað", …}
49 {ftime: "2019-01-31 14:00:00", F: "9", D: "NNA", T: "-2", W: "Skýjað", …}
50 {ftime: "2019-01-31 15:00:00", F: "10", D: "NA", T: "-2", W: "Léttskýjað", …}
51 {ftime: "2019-01-31 16:00:00", F: "11", D: "NA", T: "-2", W: "Léttskýjað", …}
52 {ftime: "2019-01-31 17:00:00", F: "12", D: "NA", T: "-2", W: "Léttskýjað", …}
53 {ftime: "2019-01-31 18:00:00", F: "11", D: "NA", T: "-2", W: "Skýjað", …}
54 {ftime: "2019-01-31 19:00:00", F: "11", D: "NA", T: "-3", W: "Skýjað", …}
55 {ftime: "2019-01-31 20:00:00", F: "10", D: "NA", T: "-3", W: "Skýjað", …}
56 {ftime: "2019-01-31 21:00:00", F: "7", D: "NA", T: "-3", W: "Léttskýjað", …}
57 {ftime: "2019-01-31 22:00:00", F: "4", D: "NA", T: "-4", W: "Heiðskírt", …}
58 {ftime: "2019-01-31 23:00:00", F: "3", D: "NNA", T: "-5", W: "Heiðskírt", …}
59 {ftime: "2019-02-01 00:00:00", F: "4", D: "NNA", T: "-5", W: "Heiðskírt", …}
60 {ftime: "2019-02-01 01:00:00", F: "4", D: "NNA", T: "-5", W: "Heiðskírt", …}
61 {ftime: "2019-02-01 02:00:00", F: "4", D: "NNA", T: "-5", W: "Léttskýjað", …}
62 {ftime: "2019-02-01 03:00:00", F: "5", D: "NNA", T: "-5", W: "Skýjað", …}
63 {ftime: "2019-02-01 04:00:00", F: "7", D: "NNA", T: "-4", W: "Skýjað", …}
64 {ftime: "2019-02-01 05:00:00", F: "8", D: "NNA", T: "-4", W: "Skýjað", …}
65 {ftime: "2019-02-01 06:00:00", F: "7", D: "NNA", T: "-4", W: "Alskýjað", …}
66 {ftime: "2019-02-01 09:00:00", F: "4", D: "N", T: "-9", W: "Heiðskírt", …}
67 {ftime: "2019-02-01 12:00:00", F: "3", D: "N", T: "-9", W: "Heiðskírt", …}
68 {ftime: "2019-02-01 15:00:00", F: "2", D: "NNA", T: "-9", W: "Heiðskírt", …}
69 {ftime: "2019-02-01 18:00:00", F: "2", D: "ANA", T: "-11", W: "Heiðskírt", …}
70 {ftime: "2019-02-01 21:00:00", F: "2", D: "A", T: "-13", W: "Heiðskírt", …}
71 {ftime: "2019-02-02 00:00:00", F: "3", D: "ASA", T: "-13", W: "Heiðskírt", …}
72 {ftime: "2019-02-02 03:00:00", F: "3", D: "A", T: "-12", W: "Léttskýjað", …}
73 {ftime: "2019-02-02 06:00:00", F: "4", D: "A", T: "-10", W: "Skýjað", …}
74 {ftime: "2019-02-02 09:00:00", F: "5", D: "A", T: "-7", W: "Alskýjað", …}
75 {ftime: "2019-02-02 12:00:00", F: "5", D: "ASA", T: "-6", W: "Alskýjað", …}
76 {ftime: "2019-02-02 15:00:00", F: "5", D: "A", T: "-5", W: "Alskýjað", …}
77 {ftime: "2019-02-02 18:00:00", F: "6", D: "A", T: "-3", W: "Alskýjað", …}
78 {ftime: "2019-02-02 21:00:00", F: "6", D: "ASA", T: "-2", W: "Lítils háttar snjókoma", …}
79 {ftime: "2019-02-03 00:00:00", F: "8", D: "ASA", T: "0", W: "Snjókoma", …}
80 {ftime: "2019-02-03 03:00:00", F: "7", D: "ASA", T: "0", W: "Snjókoma", …}
81 {ftime: "2019-02-03 06:00:00", F: "5", D: "VNV", T: "1", W: "Slydda", …}
82 {ftime: "2019-02-03 09:00:00", F: "4", D: "V", T: "1", W: "Skýjað", …}
83 {ftime: "2019-02-03 12:00:00", F: "2", D: "VSV", T: "0", W: "Léttskýjað", …}
84 {ftime: "2019-02-03 15:00:00", F: "2", D: "S", T: "-1", W: "Léttskýjað", …}
85 {ftime: "2019-02-03 18:00:00", F: "3", D: "SA", T: "-4", W: "Skýjað", …}
86 {ftime: "2019-02-03 21:00:00", F: "3", D: "SA", T: "-3", W: "Alskýjað", …}
87 {ftime: "2019-02-04 00:00:00", F: "4", D: "ASA", T: "-3", W: "Skýjað", …}
88 {ftime: "2019-02-04 03:00:00", F: "4", D: "ASA", T: "-4", W: "Léttskýjað", …}
89 {ftime: "2019-02-04 06:00:00", F: "4", D: "ASA", T: "-4", W: "Heiðskírt", …}
90 {ftime: "2019-02-04 09:00:00", F: "4", D: "ASA", T: "-5", W: "Léttskýjað", …}
91 {ftime: "2019-02-04 12:00:00", F: "5", D: "ASA", T: "-3", W: "Skýjað", …}
92 {ftime: "2019-02-04 18:00:00", F: "6", D: "A", T: "-3", W: "Skýjað", …}
93 {ftime: "2019-02-05 00:00:00", F: "7", D: "A", T: "-3", W: "Alskýjað", …}
94 {ftime: "2019-02-05 06:00:00", F: "10", D: "A", T: "1", W: "Alskýjað", …}
95 {ftime: "2019-02-05 12:00:00", F: "8", D: "A", T: "1", W: "Lítils háttar snjókoma", …}
96 {ftime: "2019-02-05 18:00:00", F: "5", D: "A", T: "0", W: "Snjóél", …}
97 {ftime: "2019-02-06 00:00:00", F: "5", D: "A", T: "-1", W: "Léttskýjað", …}
98 {ftime: "2019-02-06 06:00:00", F: "4", D: "A", T: "-1", W: "Léttskýjað", …}
99 {ftime: "2019-02-06 12:00:00", F: "3", D: "A", T: "-2", W: "Léttskýjað", …}

Array Prototype

id: "1"

link: "http://www.vedur.is/vedur/spar/stadaspar/hofudborgarsvaedid/#group=100&station=1"

name: "Reykjavík"

valid: "1"

Object Prototype
1 {name: "Akureyri", atime: "2019-01-29 12:00:00", err: "", link: "http://www.vedur.is/vedur/spar/stadaspar/nordurland_eystra/#group=15&station=422", forecast: Array, …}

Array Prototype

Object Prototype
0 likes
8 replies
burlresearch's avatar
burlresearch
7 years ago
Best Answer
Level 40

Here is my blade file (using jQuery, since that's what it looks like you were expecting) that might help you.

You simply need to loop over the response from the $ajax call, here using $.each() loop to render the nested lines on your page:

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <h3>Weather Report</h3>
            <ul id="report"></ul>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
      $(document).ready(function () {
        $.ajax({
          'url': 'https://apis.is/weather/forecasts/is',
          'type': 'GET',
          'dataType': 'json',
          'data': {'stations': '1,422'},
          'success': function (response) {
            let cities = '';
            $.each(response.results, function (key, res) {
              // console.log(res);
              cities += '<li>'
                + ' City name: ' + res.name
                + ' @ ' + res.atime
                + '<ul>'
              ;
              $.each(res.forecast, function (fkey, fore) {
                cities += '<li>'
                  + ' ftime: ' + fore.ftime
                  + ' F: ' + fore.F
                  + ' D: ' + fore.D
                  + ' T: ' + fore.T
                  + ' W: ' + fore.W
                  + '</li>'
                ;
              });
              cities += '</ul></li>';
            });
            $('#report').append(cities);
          },
        });
      });
    </script>
@endpush
Hectix's avatar
 $.each(response.results, function (item) {
    var div = document.getElementById('#yourDivContainer');
    div.append("<div>" + item.T + "</div>")
}

Try to understand this simple code. The logic is that you take each entry in results (response) and append it to parent container. It is that simple.

@burlresearch 's solution is correct.

Presmelito's avatar

Access the data on success like this


$.ajax({
            'url': 'https://apis.is/weather/forecasts/is',
            'type': 'GET',
            'dataType': 'json',
            'data': {'stations': '1,422'},
            'success': function(response) {
                console.log(response.results[0].forecast[0].T)
            }
        });
hjortur17's avatar

One simple question, have any of you guys idea how to get the last result for T

For example, now hardcoded 100 but I want to use i

let i;
for (i = 0; i < response.results[0].forecast.length; i++) {
    console.log(i);
}
            
let degrees     =   response.results[0].forecast[100].T                 // W = lýsing
let city    =   response.results[0].name                    // F = vindhraði
let wind    =   response.results[0].forecast[100].F                 // D = vindátt
let windd   =   response.results[0].forecast[100].D                 // T = gráður

$('#degrees').append(degrees);
$('#city').append(city);
$('#wind').append(wind);
$('#windd').append(windd);
Cronix's avatar

It's simply an array. Get the count of the array and use the count (minus 1) for the index, which would give you the last element of the array. jQuery also has a ton of helpful array methods in their docs.

Please or to participate in this conversation.