Fetch multiple nested maps in loop in firestore Reactjs

Question

I have a firestore database that look like this:

How to fetch these xpS in the loop so that I don't have to explicitly write xp1, xp2, etc in the below code. All these xp are maps. This is my code:

{Experience && Experience.map((Experience) => {
                  return (
                    <div className="text-white">
                      <p dangerouslySetInnerHTML={{ __html: Experience.xp1.desc }} />
                    </div>
                  );
                })}

const fetchExperience = async () => {
    await firebase
      .collection("portfolioV2")
      .doc("exp")
      .get()
      .then((docs) => {
        const data = docs.data();
        console.log(data);
        setExperience([...Experience, data]);
      })
      .catch((err) => {
        console.log("Error getting documents", err);
      });
  };

Tarik Huber · Accepted Answer · 2021-09-08 14:47:26Z

0

The exp is a Firebase document and they can be presented in JS as simple json objects. To loop over those EXs wothout knowing them is just loopint trough an json without knowing it's keys:

const fetchExperience = async () => {
  await firebase
    .collection("portfolioV2")
    .doc("exp")
    .get()
    .then((docs) => {
      const data = docs.data();

      //Here we loop trough the exp keys
      Object.keys(data).forEach((key) => {
        console.log("key", key);
        console.log("key data", data[key]);
      });

      console.log(data);
      setExperience([...Experience, data]);
    })
    .catch((err) => {
      console.log("Error getting documents", err);
    });
};

answered Sep 8, 2021 at 14:47

Tarik Huber

7,4582 gold badges16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Raman Over a year ago

its not from me, someone even downvoted the question also. :| one more doubt, now I'm facing this issue with this code in react

<div>this displays in page.    {Experience && Experience.map((exp) => {       Object.keys(exp).forEach((key) => {                     return (<div className="text-white">                         <p dangerouslySetInnerHTML={{__html: exp[key].desc,  //neither this  }}                         />                         this doesn't displays in page.                       </div>);                   });                 })}             </div>

Tarik Huber Over a year ago

Can you pls write a separate question for your next error. You can share a link to it here. thx

Raman Over a year ago

stackoverflow.com/questions/69124373/…

Collectives™ on Stack Overflow

Fetch multiple nested maps in loop in firestore Reactjs

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related