【JavaScript】オブジェクトが存在しているように見えるのにその中身を参照しようとするとundefinedになる

{ apple: 'りんご', lemon: 'レモン' }

testObjectという名前の上記のようなオブジェクトを参照したいとします。

「りんご」という文字を取り出したいので、

console.log(testObject.apple);
console.log(testObject['apple']);

などとしてもコンソールには

undefined

の表示。

オブジェクト自体はあるのになぜ中身は参照できないの！？！？と困惑するかと思います。
それは、実はオブジェクトではなくてjson型のデータではないでしょうか。

試しに、元のデータを見るため

console.log(testObject);

としてみてください。

{ apple: 'りんご', lemon: 'レモン' }

ではなく

{ "apple": "りんご", "lemon": "レモン" }

のように出てくるかと思います。(※キーも値もダブルクォーテション)

こうなった場合、これはオブジェクトではなくjson型のファイルということです。

#結論

testObject = JSON.parse(testObject);

をしましょう。

これをすることでjson型がObject型に変換されます。

その後

console.log(testObject.apple);

をすると

りんご

表示できました！

逆に、Object型からjson型に変換したい場合には

testObject = JSON.stringify(testObject);

を使ってくださいね！