Ontvangen JSON uitlezen met Javascript

var array = JSON.parse(string);
array.forEach(function(object) {
  console.log(object.title);
});

Zoiets?

Was toevallig met iets vergelijkbaars bezig.
De JSON data wordt met AJAX opgehaald.

Dat ziet er zo uit :

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

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

[size=xsmall]Toevoeging op 26/05/2020 23:33:34:[/size]

Nu ik toch bezig ben :

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

pro tip: in JavaScript kun je zoiets doen:

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.

Bedankt Adoptive Solution,

Even snel een file gemaakt zonder de AJAX.

<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

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

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.

zet

var htmltabel = '';

in je loop erbij ;-)