[Object]

console.logした結果が[Object]や[object Object]になること多くありませんか？
見飽きたわ！ってくらい昔から私はよく出くわします。

こうなる要因はいくつかあると思いますが、jsonをJSON.parseしてconsole.logすると再現したりします。今回、自ら不必要なJSON.parseしていたために[Object]とわざわざ格闘する羽目になってしまったので備忘録として投稿します。

そして、この[Object]の中身も取り出すことに成功したので少しでも助けになれたら幸いです。

中身を確認

json

const json = '{"name":"名無し", "age":12}';
console.log(json);
// '{"name":"名無し", "age":12}'
console.log(typeof json);
// "string"

JSON.parse

const json = '{"name":"名無し", "age":12}';
const json_parse = JSON.parse(json);
console.log(json_parse);
// Object { name: "名無し", age: 12 }
console.log(typeof json_parse);
// "object"

上記からわかるように、JSON.parseするとオブジェクトになるんですね。

オブジェクトをプロパティー指定で取り出し

console.log(json.name);
// undefined

console.log(json_parse.name);
// "名無し"

jsonのままだと取れませんが、オブジェクトだとプロパティーで取れるようですね！

[object Object]

const json = {
    "name": "名無し",
    "age": 12,
    "family": {
        "dad": "Daddy",
        "mam": "Mammy"
    }
}

意味わからんjsonですが、これを例にします。
これをJSON.parseすると[object Object]になります。

forEach

配列の中身もオブジェクトですよ、つまりオブジェクト配列ですよってことなのでforEachすれば中身の救出ができました。

ただしオブジェクトをforEachで処理するためにはコツが入ります。

// よくあるこれはエラー
json.forEach(function (item) {
  // 処理...
});

// こっち使う
const json_parse = JSON.parse(json);
Object.keys(json_parse).forEach(function (key) {
  console.log('key:', key);
  console.log('json_parse:', json_parse.family);
});
// 順番に取り出せる
> "key:" "name"
> "json_parse:" Object { dad: "Daddy", mam: "Mammy" }
> "key:" "age"
> "json_parse:" Object { dad: "Daddy", mam: "Mammy" }
> "key:" "family"
> "json_parse:" Object { dad: "Daddy", mam: "Mammy" }

単体より連結したときに出現？！

Object.keys(json).forEach(function (key) {
  console.log(json[key] );
  console.log("結合カンマ:", json[key]);
  console.log("結合プラス:" + json[key]);
});
// 結果
> Object { name: "名無し", age: 12, family: Array [Object { dad1: "Daddy1", mam1: "Mammy1" }, Object { dad2: "Daddy2", mam2: "Mammy2" }] }
> "結合カンマ:" Object { name: "名無し", age: 12, family: Array [Object { dad1: "Daddy1", mam1: "Mammy1" }, Object { dad2: "Daddy2", mam2: "Mammy2" }] }
> "結合プラス:[object Object]"

文字列と連結したとき、さらには+で連結したときに再現しました。

JSON.stringify

Object.keys(json).forEach(function (key) {
  console.log("結合stringify:" + JSON.stringify(json[key]));
});
// 結果
> '結合stringify:{"name":"名無し","age":12,"family":[{"dad1":"Daddy1","mam1":"Mammy1"},{"dad2":"Daddy2","mam2":"Mammy2"}]}'

プラスで連結してもJSON.stringifyすれば再びjsonに復活しました。JSON.stringifyはオブジェクトや値を JSON 文字列に変換する関数です。すなわち、オブジェクトをjsonにすれば[Object]は解消されるようですね。

連結方法に問題あり

前述したことを一転しますが、そもそも文字列の連結には順序に気をつけなければなりません。失念してました。

bonoponz.hatenablog.com

const json = [{"name": "名無し","age": 12,"family": [{"dad1": "Daddy1","mam1": "Mammy1"},{"dad2": "Daddy2","mam2": "Mammy2"}]}];
Object.keys(json).forEach(function (key) {
  console.log(`テンプレートリテラル　結合: ${JSON.stringify(json[key])}`);
  console.log("結合プラス:" + json[key]);
});
// 結果
> 'テンプレートリテラル　結合: {"name":"名無し","age":12,"family":[{"dad1":"Daddy1","mam1":"Mammy1"},{"dad2":"Daddy2","mam2":"Mammy2"}]}'
> "結合プラス:[object Object]"