JavaScriptのJSONをobjectに変換して、forEachで中身を取得する

説明

JavaScriptのJSONの中身の値を取得したい場合以下のやり方を参考にしてみてください。

①. JSON.parse()メソッドで、JSONをobjectに変換
②. Object.keys().forEachやforEach()で、中身を取得する

実際のコード

①. まずは簡単な例です。

<script>
　　const json = '{"name": "トマト", "type": "野菜", "color": "赤"}';
    const obj = JSON.parse(json);  // objectに変換
    console.log(obj);
    // > {name: "トマト", type: "野菜", color: "赤"}
    Object.keys(obj).forEach(function (key) {
        console.log([key] + ": " + obj[key]);
        // > name: トマト
        // > type: 野菜
        // > color: 赤
    });
</script>

②. 取得したいデータが複数ある場合（例「トマト」「みかん」）

<script>
    const json2 = '{"data": [{"name": "トマト", "type": "野菜", "color": "赤"}, {"name": "みかん", "type": "果物", "color": "橙色"}]}';
    const obj2 = JSON.parse(json2);  // objectに変換
    console.log(obj2);
    // > data: Array(2)
    // >  0: {name: "トマト", type: "野菜", color: "赤"}
    // >  1: {name: "みかん", type: "果物", color: "橙色"}
    const obj_data = obj2['data'];
    obj_data.forEach(o => {
        console.log(o);
        console.log(o.name, o.type, o.color);
        // forEach: 1周目
        // > {name: "トマト", type: "野菜", color: "赤"}
        // > トマト 野菜 赤
        // forEach: 2周目
        // > {name: "みかん", type: "果物", color: "橙色"}
        // > みかん 果物 橙色
    });
</script>

※JSONの中身がJSON.parse()後に、data: Array(2)になっているので、この場合はObject.keys(obj_data).forEach()ではなく、obj_data.forEach()になります。取得したいデータがどのような型になっているか注意して使い分けてください。

以上です。