JSON obtient la valeur de la propriété enfants

Question

Je lance un appel d'API et renvoie des données. Le problème que je rencontre est d'accéder au deuxième niveau du JSON "logos_here []". L'objectif est de renvoyer uniquement les données d'URL de tous les objets. J'ai joint les données et ce que j'utilise maintenant qui me rapproche même.

DONNEES

{ 
    "data": { 
     "object": { 
      "metadata": { 
       "logos_here": [ 
        { 
         "logo1": { 
          "url": "https://cosmicjs.com/upload/logo1.jpg", 
          "imgix_url": "https://cosmicjs.imgix.net/logo1.jpg" 
         } 
        }, 
        { 
         "logo2": { 
          "url": "https://cosmicjs.com/upload/logo2.jpg", 
          "imgix_url": "https://cosmicjs.imgix.net/logo2.jpg" 
         } 
        }, 
        { 
         "logo3": { 
          "url": "https://cosmicjs.com/upload/logo3.jpg", 
          "imgix_url": "https://cosmicjs.imgix.net/logo3.jpg" 
         } 
        }, 
        { 
         "logo4": { 
          "url": "https://cosmicjs.com/upload/logo4.jpg", 
          "imgix_url": "https://cosmicjs.imgix.net/logo4.jpg" 
         } 
        }, 
        { 
         "logo5": { 
          "url": "https://cosmicjs.com/upload/logo5.jpg", 
          "imgix_url": "https://cosmicjs.imgix.net/logo5.jpg" 
         } 
        } 
       ] 
      } 
     } 
    } 
} 

code

Ici

var response_json = JSON.parse(response.responseText); 
var page = response_json.data.object; 
var main_image = page.metadata.logos_here; 

function listData(main_image) { 
    var html = "<ul>"; 
    $.each(main_image, function(key, val) { 
    html += "</br>"; 
    if (typeof val === "object") 
     html += listData(val); 
    else 
     html += val; 
    html += "</br>"; 
    }); 
    html += "</ul>"; 
    return html; 
}; 

$(listData(main_image)).appendTo("body"); 

Ce que je voudrais extraire uniquement les valeurs "url" et les afficher dans un li. Toute aide est appréciée.

Answer 1

Ce code suppose que chaque objet de la baie logos_here ne contient qu'une seule propriété. Il utilise Object.keys() pour obtenir ce nom de propriété, puis l'utilise pour obtenir l'objet et sa propriété url.

function listData(main_image) { 
    var html = "<ul>"; 
    $.each(main_image, function(index, val) { 
    var key = Object.keys(val)[0]; 
    var url = val[key].url; 
    html += "<li>" + url + "</li>"; 
    }); 
    html += "</ul>"; 
    return html; 
}; 

S'il existe plusieurs propriétés dans chaque objet, vous pouvez utiliser une boucle imbriquée.

function listData(main_image) { 
    var html = "<ul>"; 
    $.each(main_image, function(index, val) { 
    $.each(val, function(key, obj) { 
     html += "<li>" + obj.url + "</li>"; 
    }); 
    }); 
    html += "</ul>"; 
    return html; 
};