ループですべてのjavascript配列要素を印刷するには？

私は現在JavaScriptについて学んでいます。ループを使ってすべての配列要素を出力することについて質問したかったのです。どんな種類のループ/条件を使うべきですか？誰も私にスニペット/例を教えてくれますか？ありがとうございます。ループですべてのjavascript配列要素を印刷するには？

var newObj = [ 
 
    { 
 
     id : "1", 
 
     name: "one" 
 
    }, 
 
    { 
 
     id : "2", 
 
     name: "two" 
 
    }, 
 
    { 
 
     id : "3", 
 
     name: "three" 
 
    }, 
 
    { 
 
     id : "4", 
 
     name: "four" 
 
    }, 
 
    { 
 
     id : "5", 
 
     name: "five" 
 
    }, 
 
] 
 

 
console.log(newObj); 
 
window.onload = function() 
 
{ 
 
    var x; 
 
    
 
    x = newObj[0].name; 
 
    //x = newObj[0].id; 
 
    document.getElementById("id").innerHTML = x; 
 
    
 
};

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="1.js"></script> 
 
</head> 
 
<body> 
 

 
    <h3 align="center" id="id"></h3> 
 

 
</body> 
 
</html>

出典

2017-10-27 Wira Xie

何JSONはありません...あなたは**配列**私の悪い 'newObj' –

というJavaScriptを持って、私はあなたがいることを知っているように見えるあなたの質問内のコードから –

それを編集します'newObj [0]'は最初の配列要素を返し、 'newObj [0] .name'はその要素の名前を返します。ハードコードされた '0'とBobのおじさんの代わりにループカウンタを使って基本的な' for'ループと組み合わせます。必ずしもベストな解決策ではありませんが、あなたが理解するまで勉強しなければなりません。入門的なJSチュートリアルで配列のループを使用していないと、私は驚いています。 – nnnnnn

JavaScriptがa for...of loopをサポートしています。配列内の各オブジェクトをループする

for (obj of newObj) 
    results += obj.name + " " 

document.getElementById("id").innerHTML = results;

出典

2017-10-27 02:16:57

：あなたのケースでは、ループはこのような何かを見ることができる

newObj.forEach(function (item) { 
    // print the object 
    console.log(item); 

    // print each object property individually 
    for (var key in item) { 
     console.log(key, ':', item[key]); 
    } 
});

出典

2017-10-27 02:17:05 Brian

あなたはhtmlに例を挙げてください。 –

何を印刷しますか？ 'someElement.innerHtml = JSON.stringify（object、null、4）;'文字列を印刷するために何かをループする必要はなく、正しくフォーマットするだけです。 – Brian

は私のお気に入りのアプローチはこれ一つであり、私は快適得ているという理由だけでそれと。

var newObj = [ { id : "1", name: "one" }, { id : "2", name: "two" }, { id : "3", name: "three" }, { id : "4", name: "four" }, { id : "5", name: "five" }, ] 

for(var i=0; i<newObj.length; i++){ 
    console.log(newObj[i].id + ': ' + newObj[i].name); 
}

出典

2017-10-27 02:28:00

@WiraXieあなたのコメントから編集したと思います。 –

は私がW3Schoolsの、hereで提示された例は、あなたに役立つはずだと思います。彼らは異なるサイズの見出しを作成するためにループしています。

ここにはあなたのための変更されたコードがあります。

window.onload = function() { 
    var x = ''; 
    for (let i = 0; i < newObj.length; i++) { 
     x = x + "<h2>"+ newObj[i].name + "</h2>"; 
    } 
    document.getElementById("demo").innerHTML = x; 
};

出典

2017-10-27 02:29:41 Palash

map（）は、配列を反復処理するのに便利な関数です。

newObj.map((o)=> { 
    document.write('id:'+o.id+' '+'name:'+o.name); 
});

あなたはこのES2017（現代のJavaScript）で

var newObj = [ 
    { 
     id : "1", 
     name: "one" 
    }, 
    { 
     id : "2", 
     name: "two" 
    }, 
    { 
     id : "3", 
     name: "three" 
    }, 
    { 
     id : "4", 
     name: "four" 
    }, 
    { 
     id : "5", 
     name: "five" 
    }, 
].map((o)=> { 
    document.write('id:'+o.id+' '+'name:'+o.name); 
});

出典

2017-10-27 02:54:21

のようにまっすぐにあなたの配列をオフ、それをチェーンすることができますので、それは素晴らしいことだ：

newObj.forEach((obj) => { 
    console.log(obj); // log each object in the array 

    Object.entries(obj).forEach(([key, value]) => { 
     console.log(`${key}: ${value}`); // log each value in each object 
    }); 
});

内訳：

出典

2017-10-27 02:55:01 SamVK

（コメントの一部が示すように）あなたのHTMLドキュメントへの書き込みを探しているなら：

const newObj = [ 
 
    { 
 
     id : "1", 
 
     name: "one" 
 
    }, 
 
    { 
 
     id : "2", 
 
     name: "two" 
 
    }, 
 
    { 
 
     id : "3", 
 
     name: "three" 
 
    }, 
 
    { 
 
     id : "4", 
 
     name: "four" 
 
    }, 
 
    { 
 
     id : "5", 
 
     name: "five" 
 
    }, 
 
] 
 

 
const element = document.getElementById("id"); 
 

 
newObj.forEach((obj) => { 
 
    Object.entries(obj).forEach(([key, value]) => { 
 
     element.innerHTML+=(`<p>${key}: ${value}</p>`); // write each key-value pair as a line of text 
 
    }); 
 
    element.innerHTML+=('<br>'); // add another line break after each object for better readability 
 
});

<div id='id'></div>

出典

2017-10-27 03:40:42 SamVK

ループですべてのjavascript配列要素を印刷するには？

答えて

関連する問題