Ontvangen JSON uitlezen met Javascript

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Stefan Janssen

Stefan Janssen

26/05/2020 22:20:42
Quote Anchor link
Goede avond,


Met de onderstaande AJAX call krijg ik vanuit PHP een json array terug

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("results").innerHTML = this.responseText;
     }
}
xhttp.open("POST", "results.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send('search='+q);


De JSON

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "45":
        {
            "id":"45",
            "firstname":"Remy",
            "lastname":"Janssen",
            "age":"32"
        },
    "72":
        {
            "id":"72",
            "firstname":"Anita",
            "lastname":"Janssen",
            "age":45
        }
}


Deze data wil ik netjes stylen en plaatsen in een element #results.

Het is de bedoeling dat voor elke nieuwe ID een geheel nieuw element word gemaakt bijvoorbeeld
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<div class="person">
    <div class="fname" id="fname"></div>
    <div class="lname" id="lname"></div>
    <div class="age" id="age"></div>
</div>


Hoe kan ik dit het beste doen met Javascript? Ik weet dat het een foreach loop moet worden maar waar begin ik?
 
PHP hulp

PHP hulp

28/03/2024 22:47:36
 
- Ariën  -
Beheerder

- Ariën -

26/05/2020 22:28:52
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
var array = JSON.parse(string);
array.forEach(function(object) {
  console.log(object.title);
});


Zoiets?
 
Adoptive Solution

Adoptive Solution

26/05/2020 23:12:41
Quote Anchor link
Was toevallig met iets vergelijkbaars bezig.
De JSON data wordt met AJAX opgehaald.

Dat ziet er zo uit :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$json = json_encode($data);
echo '<p style="word-wrap: break-word;"><code>' . $json . '</code></p>';
echo "<script>var jsondata = " . $json . "; display(jsondata);</script>";


Is gebaseerd op dit topic.

https://www.phphulp.nl/php/forum/topic/mysql-zoek-query-filter-op-waarde-maar-geen-alle-metavalue-terug/103551/last/

Kijk maar of je hiermee uit de voeten kan.
Code kan je plakken in een html bestand en in een voorvertoning bekijken.
In plaats van een html table moet je dan je eigen divs gebruiken.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script>
var jsondata = {"45":{"id":"45","firstname":"Remy","lastname":"Janssen","age":"32"},"72":{"id":"72","firstname":"Anita","lastname":"Janssen","age":45}};
</script>

<script>
function display( jsdata )
{
    for ( var key in jsdata )
    {
    var datanode = document.createElement("div");
    datanode.style.border  = '1px solid ivory';
    datanode.style.padding = '0.500em';
    datanode.style.margin  = '0.500em';
    datanode.style.width   = '450px';
    var result  = '';
    var titel   = '';
    var content = '';
    var value = jsdata[key];
    result +=  key + '<br />'+ "\n";
    if ( typeof value === 'object' )
    {
        for (var key1 in value)
        {
            var value2 = value[key1];
            result +=  '-- ' + key1 + ' = ' + value2 + '<br />'+ "\n";
        }
    } else {
        result +=  key + ' = ' + value + '<br />'+ "\n";
    }
    var htmltabel = '';
    htmltabel  = '<table border="1">';
    htmltabel += '<thead>';
    htmltabel += '<tr><th>id</th><th>first name</th><th>last name</th><th>age</th></tr>';
    htmltabel += '</thead>';
    htmltabel += '<tbody>';
    htmltabel += '<tr>';
    htmltabel += '<td>' + jsdata[key]['id']    + '</td>';
    htmltabel += '<td>' + jsdata[key]['firstname']   + '</td>';
    htmltabel += '<td>' + jsdata[key]['lastname'] + '</td>';
    htmltabel += '<td>' + jsdata[key]['age']  + '</td>';
    htmltabel += '</tr>';
    htmltabel += '</tbody>';
    htmltabel += '<tfoot><tr><td colspan="5">&copy;</td></tr></tfoot>';
    htmltabel += '</table>';
    content    = htmltabel + "\n\n" + '<p>' + result + '</p>' + "\n\n";
    datanode.innerHTML = content;
    document.getElementById("data").appendChild(datanode);
    }
}
</script>

<div class="person">
    <div class="fname" id="fname"></div>
    <div class="lname" id="lname"></div>
    <div class="age" id="age"></div>
</div>

<div id="data"></div>
<script>display(jsondata);</script>


Toevoeging op 26/05/2020 23:33:34:

Nu ik toch bezig ben :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
var divcellen = '';
divcellen  = '<div class="person">' + "\n";
divcellen += '<div class="fname" id="fname_' + jsdata[key]['id'] + '">' + jsdata[key]['firstname'] + '</div>' + "\n";
divcellen += '<div class="lname" id="lname_' + jsdata[key]['id'] + '">' + jsdata[key]['lastname'] + '</div>' + "\n";
divcellen += '<div class="age" id="age_'     + jsdata[key]['id'] + '">' + jsdata[key]['age'] + '</div>' + "\n";
divcellen += '</div>' + "\n\n";
Gewijzigd op 26/05/2020 23:15:06 door Adoptive Solution
 
Thomas van den Heuvel

Thomas van den Heuvel

27/05/2020 00:09:41
Quote Anchor link
pro tip: in JavaScript kun je zoiets doen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
var html = '<div>\
               <span>hello<\/span>\
               ... etc ...\
            <\/div>';

Dat leest wellicht wat prettiger dan al die html += '...' teksten.

Ook wil je waarschijnlijk HTML-entiteiten escapen (of wellicht ge-escaped aanleveren?). Hiervoor zijn waarschijnlijk ook wel standaard snippets beschikbaar.

Je wilt namelijk niet dat een bepaalde waarde je volledige layout breekt.
Gewijzigd op 27/05/2020 00:10:18 door Thomas van den Heuvel
 
Stefan Janssen

Stefan Janssen

27/05/2020 00:15:15
Quote Anchor link
Bedankt Adoptive Solution,

Even snel een file gemaakt zonder de AJAX.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
var jsondata = {"45":{"id":"45","firstname":"Remy","lastname":"Janssen","age":"32"},"72":{"id":"72","firstname":"Anita","lastname":"Janssen","age":45}};
    
function display( jsdata ){
    var htmltabel = '';
    for ( var key in jsdata ){
        var datanode = document.createElement("div");
        htmltabel += '<div class="id">' + jsdata[key]['id']    + '</div>';
        content    = htmltabel;
        datanode.innerHTML = content;
        document.getElementById("result").appendChild(datanode);
    }
}
</script>
<div class="result" id="result"></div>
<script>display(jsondata);</script>


Ik kan hiermee verder :-) maar ik zit nog met een dingetje

het resultaat van bovenstaande code is
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<div class="result" id="result">
    <div>
        <div class="id">45</div>
    </div>
    <div>
        <div class="id">45</div>
        <div class="id">72</div>
    </div>
</div>


Zoals je ziet krijg ik de eerste ID 2x terug en zet hij de laatste ID samen met de eerste.
 
Thomas van den Heuvel

Thomas van den Heuvel

27/05/2020 01:43:14
Quote Anchor link
Dit komt omdat htmltabel alleen maar groter wordt, dus als er meerdere items zijn krijg je op den duur steeds meer dubbele items. Voeg elke stap van de loop één record toe, of doe dit eenmalig na afloop, maar niet allebei wat je dus nu min of meer doet.

Introduceer ook geen variabelen (content) die in wezen niets toevoegen.
 
Jop B

Jop B

27/05/2020 19:26:17
Quote Anchor link
zet
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
var htmltabel = '';
in je loop erbij ;-)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.