have to JSON.parse twice to extract json object from stringified QR Code

Viewed 325

I have some JSON

{
    id: "abcd",
    type: "receive"
}

which I stringified and generated a QR code using some online QR code maker. In my react native app, I am using react-native-qrcode-scanner to scan this qr code which calls an onSuccess(qrCode: Event) function.

I've set up the function as follows:

function onSuccess(qrCode: Event) {
    console.log(qrCode.data);
    const parsedData = JSON.parse(qrCode.data);
    console.log(parsedData);
    console.log(typeof parsedData);
    console.log(parsedData.id);
    const parsedData2 = JSON.parse(parsedData);
    console.log(parsedData2.id);
    navigation.navigate('Home');
  }

This gives the following output

"{\"type\":\"receive\",\"id\":\"abcd\"}"
{"type":"receive","id":"abcd"}
string
undefined
abcd

So basically, qrCode.data is a string which is expected. parsedData outputs like an object, but has typeof string. Accessing properties on parsedData gives undefined - which makes sense if it's a string. When I parse it a second time into parsedData2 that is an object and I can access properties on it.

My confusion is, why is it not just parsing it the first time? Why do I have to do it twice?

0 Answers
Related