html 페이지의 배열에서 출력

Question

배열 내의 배열 내용을 HTML 페이지의 작은 영역에 출력하려고합니다. 한 차원의 배열 만 출력 할 수 있습니다.

간략하게, 의도 한 배열은 많은 속성을 가지고 있지만 배열 안에 중첩 된 배열을 출력하기위한 올바른 코드를 찾기 위해 고심하고 있습니다.

속성은 다음과 같습니다. ID (정수) 위치 (문자열) 우편 번호 다른 속성이 줄에 추가 될 수 있습니다. I는 다음과 같은 코드가 사용하고있는 정보 출력에

(I는 단일 어레이에서 작동시킬 수있다 - I 변경하더라도 사용하기를 [I] [X])

document.write("<tr><td>ID " + i + " is:</td>");

document.write("<td>" + LocationArray[i] + "</td></tr>");

정보를 저장하고 특정 부분을 출력 할 수있는 배열을 어떻게 올바르게 만들 수 있습니까? 예 : LocationArray [2] [3]의 내용 표시

document.write는 효율적인 방법입니까, 아니면 더 좋은 방법이 있습니까?

Answer 1

내가 함께 넣어 놓으면 도움이 될 것입니다. 궁극적으로 배열을 만드는 방법에 대한 질문에 대답하려면 '올바른 방법'을 선택하십시오. 두 가지 가능성이 있습니다

• 이 property' 기반 속성 '과 배열을 만들기 : 내가 처음 사용 내 예에서
  var locationsArray = [{'ID':123,'Location':'blabla','Postalcode':'1234'}];

:
var locationsArray = [{ID:123,Location:'blabla',Postalcode:'1234'}];

는 문자열 키 배열을 생성 시도.

두 번째 질문 : document.write 그냥 문서의 끝에 씁니다. 웹 사이트의 특정 영역에 글을 쓰고 싶다면 컨테이너 (예 :)를 만들고 id으로 지정하십시오. 그런 다음 예제에서와 마찬가지로 생성 된 컨테이너의 innerHTML 속성을 변경하십시오.

HTML :

<div id="locations"></div> 
<button onclick="printLocations()">Print Locations</button> 

자바 스크립트가 :

function printLocations() { 
    var locationsArray = [{ 
    ID : 123, 
    Location : 'Candyland', 
    Postalcode : '1234' 
    }, { 
    ID : 456, 
    Location : 'Middle-Earth', 
    Postalcode : '4567' 
    } 
    ]; 

    var locationsHtml = ''; 
    for (var index in locationsArray) { 
     locationsHtml += 'ID: ' + locationsArray[index].ID + ', ' + 
         'Location: ' + locationsArray[index].Location + ', ' + 
         'Postalcode: ' + locationsArray[index].Postalcode + '<br />'; 
    } 
    console.log(locationsHtml); 
    document.getElementById('locations').innerHTML = locationsHtml; 
} 

그냥 (귀하의 예를 하나의 특정 위치에서) 배열의 특정 부분을 작성하려면 단지를 사용 인덱스를 사용하여 예제의 for 루프와 동일한 방식으로 액세스하십시오.

var locationsHtml = locationsArray[1].ID + locationsArray[1].Location + etc...; 
    /*with string-keys: var locationsHtml = locationsArray[1]['ID'] + etc...;*/ 
    document.getElementById('locations').innerHTML = locationsHtml;