JSON.parse()後のオブジェクトを使用すると「TypeError: members is not iterable」でエラーになる

Question

javascript、の文法、作法についての質問です。
下記のようなAPIからの返答をJSONのparseで整えようとするとforの時にエラーになります。

**「JSON.parse(response).members;」**のように
parse後のオブジェクトに対して.membersをするとエラーにならないのですが、
.membersは一体何をしているのでしょうか？

    const token= "Slack_Bot_Token";
    const options = {
      "method" : "get",
      "payload" : {
        "token": token,
      }
    };
   
    const url = "https://slack.com/api/users.list";
    const response = UrlFetchApp.fetch(url, options);
   
    const members = JSON.parse(response);　　　　←forで「TypeError: members is not iterable」エラーになる
    //const members = JSON.parse(response).members;        ←後ろに.membersをつけるとエラーが出ない。

    
    for (var member of members) {
      ...
    }

Comments

[maisumakun]

responseの中身はどのような構造なのでしょうか？

[shoco]

https://api.slack.com/methods/users.list
こちらのスラックAPIのExample responsesの箇所になります

Answer 1

https://api.slack.com/methods/users.list
コード内のURL的にこちらですよね？

{
    "ok": true,
    "members": [ {
            "id": "W012A3CDE",
            "team_id": "T012AB3C4",
            "name": "spengler",
            "deleted": false,
            "color": "9f69e7",
            "real_name": "spengler",
            "tz": "America/Los_Angeles",
            "tz_label": "Pacific Daylight Time",
            "tz_offset": -25200,
            "profile": {
                "avatar_hash": "ge3b51ca72de",
                "status_text": "Print is dead",
                "status_emoji": ":books:",
                "real_name": "Egon Spengler",
                "display_name": "spengler",
                "real_name_normalized": "Egon Spengler",
                "display_name_normalized": "spengler",
                "email": "[e-mail]",
                "image_24": "https://.../avatar/e3b51ca72dee4ef87916ae2b9240df50.jpg",
                "image_32": "https://.../avatar/e3b51ca72dee4ef87916ae2b9240df50.jpg",
                "image_48": "https://.../avatar/e3b51ca72dee4ef87916ae2b9240df50.jpg",
                "image_72": "https://.../avatar/e3b51ca72dee4ef87916ae2b9240df50.jpg",
                "image_192": "https://.../avatar/e3b51ca72dee4ef87916ae2b9240df50.jpg",
                "image_512": "https://.../avatar/e3b51ca72dee4ef87916ae2b9240df50.jpg",
                "team": "T012AB3C4"
            },
            "is_admin": true,
            "is_owner": false,
            "is_primary_owner": false,
            "is_restricted": false,
            "is_ultra_restricted": false,
            "is_bot": false,
            "updated": 1502138686,
            "is_app_user": false,
            "has_2fa": false
    } ],
    "cache_ts": 1498777272,
    "response_metadata": {
        "next_cursor": "dXNlcjpVMEc5V0ZYTlo="
    }
}

構造的にこうなっているので、JSON.parse(response)の結果は連想配列のはずです。
ここからkeyが[member]の要素を取り出す必要があります。
この[member]に格納されている要素は、userの一覧が格納されている配列です。

//const members = JSON.parse(response).members; ←後ろに.membersをつけるとエラーが出ない。

なので、これで正しいと思います。

Comments

[shoco]

回答ありがとうございます。
>> コード内のURL的にこちらですよね？
はい、そちらのAPIを使用してます。

もしかして、JSON.parse(response).members;
の .members の部分は JSON.parse(response) の結果の中にある"members"キーに対する値を取り出す為に付与しているのでしょうか？

[PlugOut777]

はい、そうです。
JSON.parse(response)で得られる連想配列(オブジェクト)は、APIから返却されたJSONをパースしたものです。
let data = JSON.parse(response)
上記のようにするのがわかりやすいでしょうか。
data.members或いはdata['members']でも取り出せます。
もちろん、JSON.parse(response).membersでもJSON.parse(response)['members']でも良いです。