Parse php json to javascript

Question

Donc, je dois analyser un php json en javascript.

Le code ressemble à ceci:

$thumbnails = []; 
foreach ($images as $key => $image) 
{ 
    $thumbnails[$image->time] = [ 
    'src' => MovieEntity::getImageWithPublicPath(
     $movie->id, $image->filename, 130, 0, false 
    ), 
    'width' => '165px', 
    'height' => '95px' 
    ]; 
} 

return json_encode($thumbnails, JSON_UNESCAPED_SLASHES); 

et le résultat est:

{"5":{"src":"google.ro","width":"165px","height":"95px"},"7": 

Je veux prendre le src, width et height et les insérer comme des images comme:

<a href=""> 
    <img src="src of image" width="" height=""> 
</a> 

Que dois-je faire? Cette variable en PHP est appelée $thumbnails, ce qui renvoie le JSON que j'ai montré ci-dessus.

<?php echo $thumbnails ?> 

LE: Ma solution est:

<?= '<script>var json='.$thumbnails.'</script>' ?> 
console.log(json); 

Cela vous ramènera JSON dans la console.

Answer 1

Si vous utilisez jQuery: $.parseJSON().

Si vous utilisez javascript simple: JSON.parse()

// jQuery snipet 
var thumbnails = $.parseJSON('<?php echo $thumbnails; ?>'); 
console.log(thumbnails.src); 
console.log(thumbnails.width); 
console.log(thumbnails.height); 

Answer 2

Vous pouvez le faire en JavaScript plaine.

Echo JSON dans une balise script

<script type="application/json" id="json"> 
    <?php echo $thumbnails; ?> 
</script> 

cible ensuite avec JavaScript

var json = JSON.parse(document.getElementById('json').innerHTML); 

var img = document.querySelector('img'); 

img.src = json.src; 
img.width = json.width; 
img.height = json.height; 

Answer 3

Dans votre javascript, vous devez demander votre fonction php en faisant une requête get (supposons que vous utilisez jQuery). Après cela, dans le rappel de succès, vous avez les données. Donc, essayez quelque chose comme ça:

$.ajax({ 
    url : 'file.php', // your php file 
    type : 'GET', // type of the HTTP request 
    success : function(data){ 
     var obj = jQuery.parseJSON(data); 
     console.log(obj); 
    } 
}); 

Vous pouvez aller here pour plus d'informations