JSON에서 children 속성의 값을 얻습니다.

Question

API 호출을하고 일부 데이터를 반환하고 있습니다. 내가 겪고있는 문제는 JSON "logos_here []"의 두 번째 레벨에 액세스하는 것입니다. 목표는 모든 개체에서 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" 
         } 
        } 
       ] 
      } 
     } 
    } 
} 

난 그냥 "URL"값을 추출하고, 리튬에이를 표시하고자하는 어떤 여기

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 배열의 각 개체에는 하나의 속성 만 포함되어 있다고 가정합니다. 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; 
};