Parse JSON fichier html

Question

Je JSON comme ceci:

5:{src: "#", width: "165px", height: "95px"} 
7:{src: "#", width: "165px", height: "95px"} 
13:{src: "#", width: "165px", height: "95px"} 
20:{src: "#", width: "165px", height: "95px"} 
26:{src: "#", width: "165px", height: "95px"} 
33:{src: "#", width: "165px", height: "95px"} 
39:{src: "#", width: "165px", height: "95px"} 
46:{src: "#", width: "165px", height: "95px"} 
52:{src: "#", width: "165px", height: "95px"} 
59:{src: "#", width: "165px", height: "95px"} 
65:{src: "#", width: "165px", height: "95px"} 
72:{src: "#", width: "165px", height: "95px"} 
78:{src: "#", width: "165px", height: "95px"} 
85:{src: "#", width: "165px", height: "95px"} 

Et je veux mettre toutes les images à partir du fichier JSON en html comme ceci:

<img src="" width="" height=""> 

Comment puis-je faire ?

Merci

Answer 1

Qu'est-ce que vous avez posté est pas un JSON valide, mais je suppose que juste par erreur - Vous n'avez probablement pas de chiffres au début de chaque ligne, n'est-ce pas?

Alors, pour réaliser ce que vous avez décrit, vous devez utiliser javascript et créer un code qui:

1. Ouvrez un fichier JSON et analyser son contenu (article on that):

   function loadJSON(callback) { 
       var xobj = new XMLHttpRequest(); 
       xobj.overrideMimeType("application/json"); 
       xobj.open('GET', 'my_data.json', true); // Replace 'my_data' with the path to your file 
       xobj.onreadystatechange = function() { 
        if (xobj.readyState == 4 && xobj.status == "200") { // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode 
         callback(xobj.responseText); 
        } 
       }; 
       xobj.send(null); 
   } 
   
   loadJSON(function(response) { // Parse JSON string into object 
       var actual_JSON = JSON.parse(response); 
   }); 
   

2. Ajoutez chaque image à DOM, take a look at this response.

3. Lors de la génération des éléments img (ci-dessus), vous devez régler la largeur hauteur & il faut utiliser css:

   img.style.width = '165px'; 
   img.style.height = '95px'; 
   

   ou, en utilisant les données de JSON:

   img.style.width = actual_JSON[n].width; 
   img.style.height = actual_JSON[n].height; 
   

   où n est le nombre de chaque ligne dans les données JSON.

Answer 2

vous pouvez utiliser la fonction map. Ex:

var arr = [ 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"} 
] 
var html = '' 
arr.map(function (imageInfo) { 
    html += '<img src="' + imageInfo.src + '" width="' + imageInfo.width + '" height="'+ imageInfo.height+'">' 
}) 

console.log(html) 

P/S: Notez que « la carte » ne fonctionne qu'avec tableau, pas objet

Answer 3

En supposant que les données JSON est correctement structuré:

let jsonData = [ 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"} 
]; 

Vous pouvez le faire en quelques différentes façons, dans le code suivant, nous créons d'abord un récipient div puis boucle sur le tableau JSON créer un nouvel élément image, puis l'ajouter au conteneur. Enfin, cette div est ajouté l'élément du corps:

let jsonData = [ 
     {src: "http://via.placeholder.com/165x95", width: "165px", height: "95px"}, 
     {src: "http://via.placeholder.com/165x95", width: "165px", height: "95px"}, 
     {src: "http://via.placeholder.com/165x95", width: "165px", height: "95px"}, 
     {src: "http://via.placeholder.com/165x95", width: "165px", height: "95px"}, 
     {src: "http://via.placeholder.com/165x95", width: "165px", height: "95px"}, 
     {src: "http://via.placeholder.com/165x95", width: "165px", height: "95px"}, 
     {src: "http://via.placeholder.com/165x95", width: "165px", height: "95px"} 
    ]; 

const container = document.createElement('div'); 
const bodyElement = document.querySelector('body'); 

const images = jsonData.map(image => { 
    let imageEl = document.createElement('img'); 
    imageEl.setAttribute('src', image.src); 
    imageEl.setAttribute('height', image.height); 
    imageEl.setAttribute('width', image.width); 
    return imageEl; 
}); 

for (let image of images) { 
    container.appendChild(image); 
} 

bodyElement.appendChild(container); 

https://jsbin.com/qokilubeze/edit?html,js,output

Ceci peut être encore simplifiée:

const container = document.createElement('div'); 
const bodyElement = document.querySelector('body'); 

for (let i = 0; i < jsonData.length; i++) { 
    let imageEl = document.createElement('img'); 
    imageEl.setAttribute('src', jsonData[i].src); 
    imageEl.setAttribute('height', jsonData[i].height); 
    imageEl.setAttribute('width', jsonData[i].width); 
    container.appendChild(imageEl); 
} 

bodyElement.appendChild(container); 

Ou:

const container = document.createElement('div'); 
const bodyElement = document.querySelector('body'); 

jsonData.map(image => { 
    let imageEl = document.createElement('img'); 
    imageEl.setAttribute('src', image.src); 
    imageEl.setAttribute('height', image.height); 
    imageEl.setAttribute('width', image.width); 
    container.appendChild(imageEl); 
}); 

bodyElement.appendChild(container); 

Answer 4

Vous avez déjà savoir que ce n'est pas un JSON valide, son aspect comme un objet javascript donc je suis assez sûr que c'est la réponse des données du serveur analysé.

Si je ne me trompe pas, votre réponse ressemble à ceci

// Lets put it in a variable 
var myResponse = { 
    5:{src: "#", width: "165px", height: "95px"}, 
    7:{src: "#", width: "165px", height: "95px"}, 
    13:{src: "#", width: "165px", height: "95px"}, 
    20:{src: "#", width: "165px", height: "95px"}, 
    26:{src: "#", width: "165px", height: "95px"}, 
    33:{src: "#", width: "165px", height: "95px"}, 
    39:{src: "#", width: "165px", height: "95px"}, 
    46:{src: "#", width: "165px", height: "95px"}, 
    52:{src: "#", width: "165px", height: "95px"}, 
    59:{src: "#", width: "165px", height: "95px"}, 
    65:{src: "#", width: "165px", height: "95px"}, 
    72:{src: "#", width: "165px", height: "95px"}, 
    78:{src: "#", width: "165px", height: "95px"}, 
    85:{src: "#", width: "165px", height: "95px"} 
}; 

// then create a div element 
var elm = document.createElement('div'); 

// then append it to (your parent element) , for example: body element 
document.body.appendChild(elm); 
// then create a image element 
var img = document.createElement('img'); 

/* Now we need the values, not the numbers, 
    there is an Object method 'Object.values()' 
    which return an array of values of given Object like 
    [{src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}...] 
    then loop through with forEach method 
    and set it with image attributes 
*/ 
Object.values(myresponse).forEach(function(obj){ 
    var img = document.createElement('img'); 
    img.src = obj.src; 
    img.style.width = obj.width 
    img.style.height= obj.height 
    elm.appendChild(img) 
});