1
2

More than 3 years have passed since last update.

console.logでJSONから特定の要素を取り出す方法

Posted at

JavascriptでJSONから特定の要素を取り出す際の考え方が配列のときと少し異なるのでまとめました。

JSONとは

  • JavaScript Object Notationの略。直訳すると「Javascriptオブジェクト記法」ということになる。JSONにおけるJavascriptオブジェクトとは基本的には、{}(オブジェクト)と[](配列)を組み合わせてデータ構造を表現したものをJSONとして扱うことができる。

→つまり、JSONとは、{}(オブジェクト)と[](配列)を組み合わせてデータ構造のこと。

JSONの特定の要素の取り出し方

example.tsx
const messageArrayContainer: any[] = [{
    "text": ["Suzuki", "Yamada", "Miyazaki" ]
    "user": {"_id": 1, "avatar": "", "name": ""}
  }];

console.log('データ' + JSON.stringify(messageArrayContainer, replacer));
console.log('userデータ' + JSON.stringify(messageArrayContainer[0].user, replacer) );
//データ
[{
    "text": ["Suzuki", "Yamada", "Miyazaki" ]
    "user": {"_id": 1, "avatar": "", "name": ""}
  }]

//userデータ
{"_id": 1, "avatar": "", "name": ""}

ここで、注意なのが、配列と同じように考えると、userデータのみを取り出したいときに、下記のように書きたくなるがこれだとundefinedが表示される。

example1.tsx
console.log('userデータ' + JSON.stringify(messageArrayContainer[0].user, replacer) );

//結果は,undefinedになる

JSONは大きな一つの要素と考え、

example2.tsx
console.log('userデータ' + JSON.stringify(messageArrayContainer[0].user, replacer) );

//出力: userデータ{"_id": 1, "avatar": "", "name": ""}

と書く。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2