Can't access array inside object

Question

I'm passing an object to a svelte component (from the Electron main process) and while it shows up perfectly in the console, I cannot access the array inside it. However, when I copy the object from the console (or using JSON.stringify(testObject)) and use it directly (-> copiedObject), it works:

   <script>
    let testObject = {};
    window.electronAPI.testDataM2R((m2rData) => {
        testObject = m2rData;
        console.log("testObject:", testObject);
    });

    let copiedObject = {
        filename: "testResults.csv",
        readRows: 3,
        invalidRows: 0,
        finishedReading: true,
        data: [
            {
                tcName: "",
                tcSuccess: true,
                tcFunctions: [],
            },
            {
                tcName: "TestClass",
                tcSuccess: false,
                tcFunctions: [
                    {
                        tfName: "testBasics",
                        tfSuccess: true,
                        tfEntries: [
                            {
                                teSuccess: true,
                                teLine: "6",
                                teAssertType: "ASSERT_EQUAL",
                                teComment: "1 == 1",
                            },
                        ],
                    },
                    {
                        tfName: "basicTest",
                        tfSuccess: false,
                        tfEntries: [
                            {
                                teSuccess: false,
                                teLine: "145",
                                teAssertType: "ASSERT_EQUAL",
                                teComment: "0.25 == p.getTest()",
                            },
                        ],
                    },
                ],
            },
        ],
    };
</script>
   
<p>{JSON.stringify(testObject)}</p> <!-- this output is exactly the same as the line below -->
<p>{JSON.stringify(copiedObject)}</p>   <!-- this output is exactly the same as the line above -->
<p>{testObject.filename}</p> <!-- this works -->
<p>{copiedObject.filename}</p>  <!-- this works -->
<p>{testObject.data[1].tcFunctions[0].tfName}</p>   <!-- this DOES NOT work -->
<p>{copiedObject.data[1].tcFunctions[0].tfName}</p> <!-- this works -->

So the last two lines are the important bit - why does testObject.data[1].tcFunctions[0].tfName give me:

Uncaught TypeError: Cannot read properties of undefined (reading '1')

While this copiedObject.data[1].tcFunctions[0].tfName does, which is just the output from {JSON.stringify(testObject)}?

Obviously, I need to be able to iterate through the object arrays in order to display all the elements, so I would really appreciate some help on this!

Thank you in advance!

looks like async at work? see: [How to return the response from an asynchronous call](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — pilchard, Mar 16 '22 at 19:16
I don't think so - then the other lines accessing `testObject` should also fail, shouldn't they? I have also tested it using a more elaborate component where the data is loaded `onMount` - with the same result. — Markstar, Mar 16 '22 at 19:18
You say you're passing it from the Electron `main` process. If this is relevant to the question, you should show some related code - or otherwise remove the _electron_ tag from the question. — Slbox, Mar 16 '22 at 19:18
@Slbox: The `window.mlvAPI.testDataM2R...` is the Electron code. And to be honest, I'm not sure if it's relevant, but it is the only difference between the objects, isn't it? — Markstar, Mar 16 '22 at 19:21
Are you absolutely positive both objects are identical? Your error implies that accessing index 1 (i.e. the second object) on `data` is invalid, so that's where you'd look for a difference. — Thomas Hennes, Mar 16 '22 at 19:27
Your object doesn't contain anything that cannot be sent via [structured clone](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm), right? — Slbox, Mar 16 '22 at 19:28
@ThomasHennes: Yes, the output from the two `JSON.stringify()` is **absolutely** identical. — Markstar, Mar 16 '22 at 19:31
@Slbox: No, the object is as you see above - `strings`, `numbers`, `boolean` and `arrays`. — Markstar, Mar 16 '22 at 19:35

score 2 · Accepted Answer · answered Mar 16 '22 at 21:30

What is happening is that initially testObject is just {}, this means that {testObject.data[1].tcFunctions[0].tfName} will give you an error because it is trying to read the first element of an array that does not exist, hence the error Uncaught TypeError: Cannot read properties of undefined (reading '1')

Why does it work however for the two other options ?

JSON.stringify(testObject) will initially print {} testObject.filename will initially print undefined

No errors there!

After your electron function ran, testObject will be filled with properties and reactivity kicks in, the markup is updated where necessary.

Technically it first saysundefined and then testResults.csv but this happens so extremely fast that you do not notice.

Adding that last line does throw an error though, because it's trying to read something from something that does not exists.

How to solve this ?

Simple add optional chaining in the mix:

{testObject.data?.[1].tcFunctions[0].tfName}

that ?. basically says "do the rest only if data exists" so it will shortcut initially and not give any errors!

That worked - thank you so much! I can't believe 2 characters solved what I struggled for so long! — Markstar, Mar 17 '22 at 04:55

Can't access array inside object

1 Answers1