JavaScript를 사용하여 JSON에서 객체의 객체를 추출하십시오.

Question

그래서 JSON 파일에 액세스 할 수 있으며 몇 가지 항목을 깔끔하게 나열해야합니다. JSON 파일은 익숙하지 않은 방식으로 작성되었습니다.

function readFile(file) { 
    var rawFile = new XMLHttpRequest(); 
    rawFile.open("GET", file, false); 
    rawFile.onreadystatechange = function() 
    { 
     if (rawFile.readyState === 4 && rawFile.status === 200) 
     { 
      window.openedFile = JSON.parse(rawFile.responseText); 
      console.log(JSON.stringify(openedFile, undefined, 4)); 
      createList(); 

     } 
    }; 
    rawFile.send(); 
} 


function createList() { 
    var table = document.createElement('table'); 
    var body = document.createElement('tbody'); 

    for (var i = 0; i < openedFile.sites.length; i++) { 
     var item = document.createElement('tr'); 
     var colSite = document.createElement('td'); 
     colSite.appendChild(document.createTextNode(openedFile.sites[i].name)); 
     item.appendChild(colSite); 
     body.appendChild(item); 
    } 

    table.appendChild(body); 
    document.getElementById('list').appendChild(table); 
} 

.. 그리고 그것은 배열 "사이트"를 주장대로 작동하지 않습니다이 비어 : 나는 다음과 같은 코드가 있습니다. 내가 "(1007)"를 JSON 파일을 변경하고 사이트 후 대괄호 ([])를 추가하고 제거 할 경우

{ 
    "sites": { 
     "1007": { 
      "id": 1007, 
      "name": "Location B", 
      "devices": { 
       "p3": { 
        "name": "p3", 
        "version": "5" 
       } 
      } 
     }, 
     "1337": { 
      "id": 1337, 
      "name": "Location A", 
      "devices": { 
       "p2": { 
        "name": "p2", 
        "version": "5" 
       }, 
       "p1": { 
        "name": "p1", 
        "version": "5" 
       } 
      } 
     } 
    }, 
} 

: 콘솔에서 출력에서 ​​JSON 파일에서 결과는 (변수 이름에 약간의 수정을) 제공 "1337"은 (예 : 일반 배열로) 익숙해 보이는 것처럼 보이며 작동합니다. 그러나 나는이 일을 할 수 없다고 확신한다. 그리고 장치에 관한 정보를 추출하려고 할 때 같은 문제가 다시 발생한다. 이 문제에 대한 도움을 주시면 감사하겠습니다. 그리고 명확히하기 위해 JSON 파일을 변경하지 않으려 고합니다. 다른 해결책이 있다면.

Answer 1

숫자 1007과 1337은 개체 sites의 속성입니다. 객체 속성을 반복하려면 for-in 루프를 사용하십시오. 당신이 개체의 속성이 아니라 배열의 요소를 반복 할 필요가 있으므로

var sites = openedFile.sites; 
for(var site in sites){ 
    console.log("Key: ", site); 
    console.log("Value: ", sites[site]); 
} 

Answer 2

사이트는 객체가 아닌 배열입니다.

해당 속성의 목록을 가져 오려면 Object.keys()를 사용할 수 있습니다. 그러면 속성 이름 배열을 얻을 수 있습니다.

배열을 가져 오면 해당 배열을 반복하고 매번 원본 요소의 속성 이름 인 현재 요소를 사용합니다.

function createList2() { 
    var len = Object.keys(openedFile.sites); //get array of property keys 
    for (var i of len) { //iterate over the array of property keys 
    console.log(openedFile.sites[i].name); /*retrieve properties by key from original object */ 
    } 
}