Ontvangen JSON uitlezen met Javascript
Met de onderstaande AJAX call krijg ik vanuit PHP een json array terug
Code (php)
1
2
3
4
5
6
7
8
9
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);
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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
}
}
"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)
1
2
3
4
5
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>
<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?
Code (php)
1
2
3
4
2
3
4
var array = JSON.parse(string);
array.forEach(function(object) {
console.log(object.title);
});
array.forEach(function(object) {
console.log(object.title);
});
Zoiets?
De JSON data wordt met AJAX opgehaald.
Dat ziet er zo uit :
Code (php)
1
2
3
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>";
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)
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
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">©</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>
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">©</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)
1
2
3
4
5
6
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";
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
Code (php)
1
2
3
4
2
3
4
var html = '<div>\
<span>hello<\/span>\
... etc ...\
<\/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
Even snel een file gemaakt zonder de AJAX.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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>
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)
1
2
3
4
5
6
7
8
9
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>
<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.
Introduceer ook geen variabelen (content) die in wezen niets toevoegen.
Code (php)
1
var htmltabel = '';