javascriptでJSON形式のデータ内の各要素にアクセスしたい場合の備忘録

例えば以下のようなjsonファイルを取得して、各要素にアクセスしたい場合の備忘録

最終的に参考にさせて頂いたサイト

今回の場合は、nameをキーとして、値をパラメータとして送信しています。そして、返ってきたデータに対して出力しています。また、成功すれば、responseで返された詳細を確認することができ、response.dataオブジェクトでJSON形式のデータを確認することができます。

このようにObject.keysメソッドは戻り値が配列なので、この戻り値に対してはforEachが使えます。

テストコード

test.js

print("hello")

const jsons = { name: "鈴木一郎", age: 30, place: "愛知県" };

print("----- 2)forEachでキーを取り出す -----");
Object.keys(jsons).forEach((key) => {
    print("key=" + key + ", value=" + jsons[key]);
});

const jsons2 = [
    { name: "鈴木一郎", age: 30, place: "愛知県" },
    { name: "鈴木二郎", age: 29, place: "岐阜県" },
    { name: "鈴木三郎", age: 28, place: "滋賀県" },
];

print("----- 2)forEachでキーを取り出す -----");
Object.keys(jsons2).forEach((key) => {
    print("key=" + key + ", name=" + jsons2[key]["name"]+ ", age=" + jsons2[key]["age"]+ ", place=" + jsons2[key]["place"]);
});


// jscではjson http getするのに一手間かかりそうなので以下urlのjsonをそのままコピー
// https://jsonplaceholder.typicode.com/posts
const jsons3 = [
    {
      "userId": 1,
      "id": 1,
      "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
      "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
    },
    {
      "userId": 2,
      "id": 12,
      "title": "in quibusdam tempore odit est dolorem",
      "body": "itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio"
    },
    {
      "userId": 3,
      "id": 22,
      "title": "dolor sint quo a velit explicabo quia nam",
      "body": "eos qui et ipsum ipsam suscipit aut\nsed omnis non odio\nexpedita earum mollitia molestiae aut atque rem suscipit\nnam impedit esse"
    },
]

print("----- 2)forEachでキーを取り出す -----");
Object.keys(jsons3).forEach((key) => {
    print("key=" + key + ", userId=" + jsons3[key]["userId"]+ ", title=" + jsons3[key]["title"]+ ", body=" + jsons3[key]["body"]);
});

テストコードの実行

MacはterminalからMac OS X JavaScript command line interpretersが利用可能であるようなのでこれを使って確認する.
/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Helpers/jsc

MacBook-Pro e % /System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Helpers/jsc test.js
hello
----- 2)forEachでキーを取り出す -----
key=name, value=鈴木一郎
key=age, value=30
key=place, value=愛知県
----- 2)forEachでキーを取り出す -----
key=0, name=鈴木一郎, age=30, place=愛知県
key=1, name=鈴木二郎, age=29, place=岐阜県
key=2, name=鈴木三郎, age=28, place=滋賀県
----- 2)forEachでキーを取り出す -----
key=0, userId=1, title=sunt aut facere repellat provident occaecati excepturi optio reprehenderit, body=quia et suscipit
suscipit recusandae consequuntur expedita et cum
reprehenderit molestiae ut ut quas totam
nostrum rerum est autem sunt rem eveniet architecto
key=1, userId=2, title=in quibusdam tempore odit est dolorem, body=itaque id aut magnam
praesentium quia et ea odit et ea voluptas et
sapiente quia nihil amet occaecati quia id voluptatem
incidunt ea est distinctio odio
key=2, userId=3, title=dolor sint quo a velit explicabo quia nam, body=eos qui et ipsum ipsam suscipit aut
sed omnis non odio
expedita earum mollitia molestiae aut atque rem suscipit
nam impedit esse

参考