Can't access array inside object-CodePudding

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!

CodePudding user response：

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!