javascript - 如何从 Firebase 地图对象获取数据？

Question

我正在尝试从 Firebase 的地图对象中获取数据并将其显示在屏幕上。问题是我无法处理从 Firebase 收到的任何地图。我检查了“InstanceOf Map, Array and Object”。它在对象上给出真值，在其他对象上给出假值。这就是我将数据保存到 Firebase 的方式

async function handleAddToWatchList() {
    const watchListSnapshot = await watchlistRef
      .where("userId", "==", email)
      .get();
    const watchlistId = watchListSnapshot.docs[0].id;
    const documentRef = watchlistRef.doc(watchlistId);

    documentRef.set(
      {
        tvShows: {
          [data.name]: {
            title: data.name,
            overview: show.overview,
            backdrop: "http://image.tmdb.org/t/p/w500" + data.backdrop_path,
          },
        },
      },
      { merge: true }
    );
  }

当我记录从 Firebase 收到的数据时，它看起来像这样

Object {
  "Breach": Object {
    "backdrop": "http://image.tmdb.org/t/p/w500/nz8xWrTKZzA5A7FgxaM4kfAoO1W.jpg",
    "overview": "A hardened mechanic must stay awake and maintain an interstellar ark fleeing the dying planet Earth with a few thousand lucky souls on board... the last of humanity. Unfortunately, humans are not the only passengers. A shapeshifting alien creature has taken residence, its only goal is to kill as many people as possible. The crew must think quickly to stop this menace before it destroys mankind.",
    "release": "2020-12-17",
    "title": "Breach",
  },
  "Wonder Woman 1984": Object {
    "backdrop": "http://image.tmdb.org/t/p/w500/srYya1ZlI97Au4jUYAktDe3avyA.jpg",
    "overview": "Wonder Woman comes into conflict with the Soviet Union during the Cold War in the 1980s and finds a formidable foe by the name of the Cheetah.",
    "release": "2020-12-16",
    "title": "Wonder Woman 1984",
  },
}

我如何迭代它以在屏幕上显示它？

标签： javascriptfirebasereact-nativegoogle-cloud-firestore

Answer 1

您是否尝试过 for 循环？您可以在这里查看它们 => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

由于您有嵌套对象，您可能必须在另一个 for in 循环中使用 for in 循环，因此您可以循环遍历父对象，然后遍历每个对象。

 const parentObject = {
  "Breach": {
    "backdrop": "http://image.tmdb.org/t/p/w500/nz8xWrTKZzA5A7FgxaM4kfAoO1W.jpg",
    "overview": "A hardened mechanic must stay awake and maintain an interstellar ark fleeing the dying planet Earth with a few thousand lucky souls on board... the last of humanity. Unfortunately, humans are not the only passengers. A shapeshifting alien creature has taken residence, its only goal is to kill as many people as possible. The crew must think quickly to stop this menace before it destroys mankind.",
    "release": "2020-12-17",
    "title": "Breach",
  },
  "Wonder Woman 1984": {
    "backdrop": "http://image.tmdb.org/t/p/w500/srYya1ZlI97Au4jUYAktDe3avyA.jpg",
    "overview": "Wonder Woman comes into conflict with the Soviet Union during the Cold War in the 1980s and finds a formidable foe by the name of the Cheetah.",
    "release": "2020-12-16",
    "title": "Wonder Woman 1984",
  },
}

//iterating parent object
for(let property in parentObject){
  //iterating nested objects
  for(let key in parentObject[property]){
    console.log(parentObject[property][key]);
  }
}


/////////OUTPUT: (values of the keys of the nested objects)

http://image.tmdb.org/t/p/w500/nz8xWrTKZzA5A7FgxaM4kfAoO1W.jpg

A hardened mechanic must stay awake and maintain an interstellar ark fleeing the dying planet Earth with a few thousand lucky souls on board... the last of humanity. Unfortunately, humans are not the only passengers. A shapeshifting alien creature has taken residence, its only goal is to kill as many people as possible. The crew must think quickly to stop this menace before it destroys mankind.

2020-12-17

Breach

http://image.tmdb.org/t/p/w500/srYya1ZlI97Au4jUYAktDe3avyA.jpg

Wonder Woman comes into conflict with the Soviet Union during the Cold War in the 1980s and finds a formidable foe by the name of the Cheetah.

2020-12-16

Wonder Woman 1984