如何使用Javascript訪問陣列中的單個物件-有解無憂

嗨，我已經使用Firebase 中的 getDocs()使用資料（小販集合）匯出了資料。

之后，我將每個小販資料作為一個物件放入名為allStall的陣列中，如下面的控制臺日志螢屏截圖所示。

如何使用 Javascript 訪問陣列中的單個物件

問題 1 - 如何訪問我的allStall陣列中的每個單獨的物件。我嘗試使用 .map() 來訪問其中的每一個，但我什么也沒得到。

請注意，我的allStall陣列中已經有資料，請參見上面的螢屏截圖。

問題 2 - 為什么我的allStall陣列中有[[Prototype]]: Array(0)

export /*Soln add async*/function getAllStall(){
  var allStall = [];
  try
  {
    /*Soln add await */getDocs(collection(db, "hawkers")).then((querySnapshot) =>
      {
        querySnapshot.forEach((doc) =>
          {
            var stall = doc.data();
            var name = stall.stallname;
            var category = stall.category;
            var description = stall.description;

            var stallData = {
              stallName:name,
              stallCategory:category,
              stallDescription:description
            };
            allStall.push(stallData);
});});

     console.log(allStall);

    //Unable to access individual object in Array of objects
    allStall.map(stall =>{console.log(stall.stallName);});}

  catch (e) {console.error("Error get all document: ", e);}

  return allStall;
}

在我的主 js 檔案中，我執行了以下操作：

useEffect(/*Soln add await*/() =>
    {
        getAllStall();
        /*Soln:replace the statement above with the code below
        const allStall = await getAllStall();
        allStall.map((stall)=>console.log(stall.stallname));
       */
    }
);

uj5u.com熱心網友回復：

你什么都得不到，因為allStall你是空的，因為你沒有等待承諾被履行

試試這個

export const getAllStall = () => getDocs(collection(db, "hawkers"))
       .then((querySnapshot) =>
           querySnapshot.map((doc) =>
              {
                const {stallName, category, description} =  doc.data();
            
            return  {
              stallName:name,
              stallCategory:category,
              stallDescription:description
            };
           
          });
      )

嘗試像這樣改變使用效果

useEffect(async () =>
    {
        const allStats = await getAllStall();
        console.log(allStats)
        allStats.forEach(console.log)
    }
);

uj5u.com熱心網友回復：

非常感謝 R4ncid，你給了我靈感！并感謝所有在下面發表評論的人！

我設法通過異步和等待來完成它。最新更新，我也弄清楚我以前的代碼有什么問題。我在我的問題中評論了解決方案，即將異步添加到函式并等待 getDocs

輔助函式

export async function getAllStall(){

  const querySnapshot = await getDocs(collection(db, "hawkers"));

  var allStall = [];

  querySnapshot.forEach(doc =>
    {
      var stall = doc.data();
      var name = stall.stallname;
      var category = stall.category;
      var description = stall.description;

      var stallData = {
        stallName:name,
        stallCategory:category,
        stallDescription:description
      };

      allStall.push(stall);
   }
  );

  
  return allStall;
}

主 JS 檔案

useEffect(async () =>
        {
            const allStall = await getAllStall();
            allStall.map((stall)=>console.log(stall.stallname));
        }
    );

歡呼如何使用 Javascript 訪問陣列中的單個物件

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/463748.html

標籤：javascript 反应异步承诺

上一篇：有沒有更好的方法來更改javascript中的超時？

下一篇：使用javascript檢測跨度內容的變化