JSON への JavaScript マップ
-
JavaScript の
map()関数 - JavaScript でマップを使用する
-
JSON へのマッピングで
JSON.stringify()メソッドを使用する -
JSON へのマップで
object.fromEntries()メソッドを使用する - マップを JSON 文字列に変換する
- まとめ
JavaScript Object Notation (JSON) は、構造化データを一般的に表示するためのテキストベースの形式です。 JavaScript では、map() 関数を使用してコードを簡素化できます。
JavaScript の map() 関数
map() として知られるキーと値のペアのコレクションは、任意のデータを使用でき、挿入された順序を呼び出します。
そのような素晴らしい新しい構文は map() です。 JavaScript 配列のすべての要素を変更するための優れたツールです。
すべての配列をループするために使用します。 結果に応じて、最近完成した要素から作成したり、配列の要素を変更して新しい範囲を形成したりできます。
配列、オブジェクト、整数を含むすべてのキーは、map() にすることができます。
以下の例では、firstName と middleName の値を map() メソッドを使用して結合し、配列をループすることができます。
let users = [
{firstName: 'Bob', middleName: 'Mel', lastName: 'Lee'},
{firstName: 'Joanna', middleName: 'Kaccy', lastName: 'Smith'},
{firstName: 'Peter', middleName: 'Jone', lastName: 'Steward'}
];
let Fullnames = users.map(function(element) {
return `${element.firstName} ${element.middleName} ${element.lastName}`;
})
console.log(Fullnames);
上記のコードの出力は次のとおりです。
map() を使用すると、新規および既存のインターフェースを追加または削除し、それらの値を取得できます。 map メソッドの構文は次のとおりです。
arr.map(function(element, index, array) {}, this);
配列の各要素は、常に現在の要素、現在の要素のインデックス、および配列オブジェクト全体を渡すコールバック関数を呼び出します。
JavaScript でマップを使用する
マップを使用して出力を収集し、新しい配列に追加できます。 for ループまたは JavaScript のネストを使用して、同様のタスクを実行できます。
しかし、map() 関数を使用して、より読みやすい関数を作成できます。
新しい map() 構文を使用すると、map() を構築して初期化し、値を追加することができます。
firstMap と呼ばれる新しい map() を作成できます。
let firstMap = new Map()
出力は空のマップになります。
map() 関数に何らかの値を与えたい場合は、new Map() を使用して Map オブジェクトを作成する必要があります。
たとえば、新しいマップ favCharacter を使用してマップ オブジェクトを作成します。 以下はそれに関する議論です。
let favCharacter = new Map([
['Brett Lee', 'Australian'], ['Muttiah Muralitharan', 'SriLankan'],
['Chris Gayle', 'West Indian'], ['Wasim Akram', 'Pakistan']
]);
console.log(favCharacter);
上記のコードの出力は次のとおりです。
この例では、世界的に有名なクリケット選手の名前と国籍を持つ店舗がマップ オブジェクトに表示されます。 console.log(favCharacter); を使用して、上記のような出力を取得できます。
JSON へのマッピングで JSON.stringify() メソッドを使用する
まず、キーと値を文字列として持つ map() を作成できます。 Map.forEach メソッドはそれを使用して、すべての要素の呼び出しを含むマップを実行します。
その後、オブジェクトがキーと値を作成して追加します。 最後に、オブジェクトは JSON.stringify() メソッドを JSON 形式で返します。
let detail = new Map()
detail.set('Name', 'Lora');
detail.set('Country', 'England');
detail.set('Age', '24');
let jsonObject = {};
detail.forEach((value, key) => {jsonObject[key] = value});
console.log(JSON.stringify(jsonObject))
上記のコードの出力は次のとおりです。
JSON へのマップで object.fromEntries() メソッドを使用する
Object.fromEntries() メソッドは、入力マップを取得し、それをキーと値の JSON オブジェクトに変換するために使用します。 オブジェクトクラスの fromEntries メソッドは ES6 で導入されました。
以下に、この方法の例を示します。
let detail = new Map()
detail.set('Name', 'Lora');
detail.set('Country', 'England');
detail.set('Age', '24');
const result = Object.fromEntries(detail);
console.log(result)
上記のコードの出力は次のとおりです。
マップを JSON 文字列に変換する
同様に、Object.fromEntries() を使用して、マップを JSON 文字列と JavaScript オブジェクトに変換できます。 次に、そのオブジェクトを引数として JavaScript メソッド JSON.stringify() に渡します。
構文：
var obj = Object.fromEntries(details);
var jsonString = JSON.stringify(obj);
この構文を使用して、JavaScript マップを JSON 文字列に変換できます。 以下の例で、その構文がどのように機能するかを確認できます。
<!DOCTYPE html>
<html lang="en">
<body>
<pre id="output"></pre>
<script>
var detail = new Map([['Name', 'James'],['Country', 'America'],['Age', 23]]);
var obj = Object.fromEntries(detail);
var jsonString = JSON.stringify(obj);
document.getElementById('output').innerHTML += jsonString;
</script>
</body>
</html>
上記のコードの出力は次のとおりです。
まとめ
この記事では、JavaScript マップを JSON に変換する方法について説明しました。 使用できるいくつかの方法について説明しました。
主に、JavaScript の JSON.stringify() メソッドと Object.fromEntries() メソッドを使用してマップを JSON 文字列に変換する方法を学びました。
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.