More than 3 years have passed since last update.

JavaScriptでオブジェクトの配列に入っている要素をHTMLに一つずつ表示する

Posted at 2020-09-18

まず、オブジェクトの配列を用意する

var array = [{id:1, name:"Ramen"}, {id:2, name:"Somen"}];

HTMLを書く

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- ここのgetDataの部分にjsからデータを表示する -->
    <div id="getData"></div>
    <script src="code.js"></script>
</body>

</html>

オブジェクトの配列を表示するためのJavaScriptのコード

 // 配列の長さの文だけループを回す
    for (var i = 0; i < array.length; i++) {
        // まず、idを表示する
        // Htmlのdivの部分を指定する
        var getData = document.getElementById('getData');
        // 表示したいデータを指定する
        var arrayId = document.createTextNode(array[i].id);
        // 要素を指定し、その要素の子要素としてデータを表示する
        getData.appendChild(arrayId);

        // 次に、nameを表示する
        var arrayName = document.createTextNode(array[i].name);
        getData.appendChild(arrayName);
    }

最終的なJavaScriptのコード

window.onload = function () {
    // オブジェクトの配列を用意
    var array = [{ id: 1, name: "Ramen" }, { id: 2, name: "Somen" }];

    // 配列の長さの文だけループを回す
    for (var i = 0; i < array.length; i++) {
        // まず、idを表示する
        // Htmlのdivの部分を指定する
        var getData = document.getElementById('getData');
        // 表示したいデータを指定する
        var arrayId = document.createTextNode(array[i].id);
        // 要素を指定し、その要素の子要素としてデータを表示する
        getData.appendChild(arrayId);

        // 次に、nameを表示する
        var arrayName = document.createTextNode(array[i].name);
        getData.appendChild(arrayName);
    }
}

最終的に

Htmlを開くとこのようにJavaScriptからのデータを表示することができます。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up