Why is my object.item always returning undefined?

Question

const getConfigs = () => {
    let temp_config = [];
    const mydb = fire.firestore().collection("User_Config");
    mydb.onSnapshot((item) => {
      item.forEach((rec) => {
        if (String(rec.id).trim() === String(currentUser.uid).trim()) {
          fire
            .firestore()
            .collection("User_Config")
            .doc(currentUser.uid)
            .onSnapshot((col) => {
              temp_config.push({
                Income_Base: col.data().Income_Base,
                Tax_Calculator: col.data().Tax_Calculator,
                Tax_Enabled: col.data().Tax_Enabled,
                Tax_Rate: col.data().Tax_Rate,
                Simple_Mode: col.data().Simple_Mode,
                Dark_Mode: col.data().Dark_Mode,
              });
            });
        } else {
          console.log("This user does not have any preferences set");
        }
      });
    });
    return temp_config;
  };

useEffect(async () => {
    await getIncome();
    let configurations = {};
    configurations = await getConfigs();
    console.log(configurations.Dark_Mode);
  }, []);

So, when I console.log(configurations), it returns the following...

As soon as I console.log(configurations.Dark_Mode), it returns undefined. Any suggestions please?

Data is loaded from Firestore (and most modern cloud APIs) asynchronously, which means that your `return temp_config` runs before the `temp_config.push(...)` is ever called. If you run the code in a debugger, or add some logging, you can easily verify this. See for more: https://stackoverflow.com/questions/59511999/scope-issue-in-javascript-between-two-functions/59512572#59512572 — Frank van Puffelen, Feb 07 '21 at 19:58
@FrankvanPuffelen points you on the right track here. You even *await* `getConfigs()` in your `useEffect()` although this has no effect, because `getConfigs()` isn't an `async` function - but it definitely should be one. — Eggerd, Feb 08 '21 at 12:57

AhDev · Answer 1 · 2021-02-07T18:33:06.140

1

You are creating and returning an array. however you are setting it to a JSON Object.

While this is not ideal javaScript will work it out (You should fix that - it is just not your problem currently). So let's break down just the most simple components. In the following example you can see we have to reference the result set like the array that it is.

const getConfigs = () => {
  let temp_config = []; //Empty Arary

  temp_config.push({
    Income_Base: "1",
    Tax_Calculator: "2",
    Tax_Enabled: "3",
    Tax_Rate: "4",
    Simple_Mode: "5",
    Dark_Mode: "THIS IS THE THING STORED",
  })

  return temp_config;
};



let configurations = {}; //Empty JSON
configurations = getConfigs();
console.log(configurations[0].Dark_Mode);

edited Feb 07 '21 at 18:33

answered Feb 07 '21 at 17:16

AhDev

486
11
16

That does not work. If I run that, I get the following error [ Uncaught (in promise) TypeError: Cannot read property 'Dark_Mode' of undefined ] – CodingBoy Feb 07 '21 at 17:17
As I understand, everything you said should work, but it does not. For some reason I can't access the individual items in the object, but as a whole, the object is populated. I have no idea what is wrong with this. – CodingBoy Feb 08 '21 at 06:30

score 0 · Answer 2 · answered Feb 07 '21 at 17:17

0

The function getConfigs returns an array you can't access array item with the dot notation directly, you have to choose the item with the index like this:


    console.log(configurations[0].Dark_Mode);

On a side note, your useEffect doesn't have a dependency array as a second argument this makes the effect fire on every render, most probably that is not what you need. You can read more about useEffect here

answered Feb 07 '21 at 17:17

Ahmed Mohamedeen

328
3
11

That does not work, I posted the error message I get in my previous comment – CodingBoy Feb 07 '21 at 17:23
This just means configurations array is empty, make sure by using `console.log(configurations, configurations[0].Dark_Mode)` to see if the array is populated or not. If not you might want to check either the fire store data or the logic in the function `getConfigs` – Ahmed Mohamedeen Feb 07 '21 at 17:28
I still get that same (in promise) error. The thing is that the object displays all the correct values, but as soon as I want to access a single one, I seem to get problems – CodingBoy Feb 07 '21 at 17:31

Why is my object.item always returning undefined?

2 Answers2