JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】カンマ区切りの文字列配列をオブジェクト配列に変換する方法

カンマ区切りの文字列（JSON形式の文字列）で構成される配列を、オブジェクトの配列に変換したいケースはよくあります。そんなときに役立つのが、JavaScriptのJSON.parse()メソッドです。このメソッドを使えば、文字列として格納されたJSONデータを簡単にJavaScriptオブジェクトへ変換できます。

以下は、文字列の配列をオブジェクトの配列に変換するサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .result {
        color: red;
    }
</style>
</head>
<body>
<h1>Convert array of comma separated strings to array of object</h1>
<div class="sample"></div>
<br />
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click the above button to convert the above array of strings to objects</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let arr = [
        '{ "name":"Rohan", "age":12}',
        '{ "name":"Mohit", "age":22}',
        '{ "name":"Shawn", "age":18}',
        '{ "name":"Michael", "age":19}',
    ];
    sampleEle.innerHTML = arr;
    BtnEle.addEventListener("click", () => {
        arr.forEach((item, index) => {
            arr[index] = JSON.parse(item);
        });
        arr.forEach((item) => {
            resEle.innerHTML += "Name = " + item.name + " : Age = " + item.age + "<br>";
        });
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、ブラウザには次のように表示されます。

【JavaScript】カンマ区切りの文字列配列をオブジェクト配列に変換する方法

「CLICK HERE」ボタンをクリックすると、各文字列がオブジェクトに変換され、名前と年齢が出力されます。

【JavaScript】カンマ区切りの文字列配列をオブジェクト配列に変換する方法

コードのポイント

  • JSON.parse()：JSON形式の文字列を解析し、JavaScriptのオブジェクトに変換します。
  • forEach()：配列の各要素に対して繰り返し処理を行い、元の配列内の文字列を順番にオブジェクトへ置き換えています。
  • innerHTML：変換後のオブジェクトからnameプロパティとageプロパティの値を取り出し、画面に表示しています。
  1. JavaScriptでIDごとにオブジェクトの配列をグループ化する方法

    JavaScriptでオブジェクトの配列をidなどの特定のキーごとにグループ化したい場合、reduce()メソッドを使うと簡潔に実装できます。この記事では、どのプロパティにも対応できる汎用的なgroupBy関数を作成し、実際のサンプルコードとともにその仕組みを詳しく解説します。 reduce()によるグループ化の考え方 reduce()は、配列の各要素を順番に処理しながら、1つの累積値（ここではオブジェクト）を組み立てていくメソッドです。各要素からキーの値を取り出し、その値がまだ結果オブジェクトに存在しなければ新しい配列を作成して、そこへ要素を追加していくことでグループ化を実現します。 サ

  2. 【Android】配列をArrayListに変換する方法をサンプルコード付きで解説

    このチュートリアルでは、Androidアプリ開発において配列（Array）をArrayListに変換する方法を、実際のサンプルコードとともにわかりやすく解説します。 配列からArrayListへの変換の基本 Javaでは、Arrays.asList()メソッドを使うことで、配列をリスト形式に変換できます。さらに、その結果をArrayListのコンストラクタに渡すことで、要素の追加や削除が自由に行える本格的なArrayListとして扱えます。 String[] array = new String[]{ANDROID, JSP, JAVA, STRUTS, HADOOP, JSF}; Arra