JSON get childrenプロパティの値

Question

私はAPI呼び出しを行い、データを戻しています。私が実行している問題は、JSONの2番目のレベルである "logos_here []"にアクセスすることです。目標は、すべてのオブジェクトからURLデータのみを返すことです。私はデータを添付しています。私が今使っているものは、私を近づけています。

私はちょうど "URL" の値を抽出し、李にそれらを表示したいと思いますどのようなここでデータ

{ 
    "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" 
         } 
        } 
       ] 
      } 
     } 
    } 
} 

ここでコード

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

。どんな助けもありがとうございます。

Answer 1

このコードでは、logos_here配列内の各オブジェクトに1つのプロパティが含まれていることを前提としています。 Object.keys()を使用してプロパティ名を取得し、それを使用してオブジェクトとその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; 
}; 

各オブジェクトに複数のプロパティがある場合は、ネストループを使用できます。

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