Заполнение массива полями из Firestore? - PullRequest
Новая
       2

Заполнение массива полями из Firestore?

0 голосов
/ 17 июня 2020

Итак, я хотел бы заполнить массив данными из firestore, я просто не уверен, как именно это сделать.

У меня есть доступ к информации пользователя и моментальному снимку данных элементов: 

auth.onAuthStateChanged(user => {

  if (user) {
    db.collection('items').onSnapshot(snapshot => {
      setupItems(snapshot.docs);
      setupUI(user); 
      userDetails(user);
     }, err =>{
      console.log(err.message);
     })
  } else {
    setupUI();
    setupItems([]);
    userDetails();
  }
});

Это работает в другой части моего проекта, чтобы заполнить литералы шаблонов деталями из моей коллекции 'items', а также позволяет мне получить доступ к UID текущего пользователя и его специфическому c документу в коллекции пользователей.

В настоящее время у меня есть это жестко запрограммированное: 

const products = [
  {
    id: 1,
    img: './cod.jpeg',
    name: 'Call of Duty',
    price: 3,
    cart: false,
    quantity: 1,
    total: 0

  },
  {
    id: 2,
    img: './fonv.jpeg',
    name: 'Fallout:New Vegas',
    price: 4,
    cart: false,
    quantity: 1,
    total: 0
  },
  {
    id: 3,
    img: './ror2.jpeg',
    name: 'Risk of Rain 2',
    price: 5,
    cart: false,
    quantity: 1,
    total: 0

  }
];

У меня также есть точно такие же поля в моей коллекции элементов в firestore, т.е. в документе A есть строковое имя поля с яблоком, строковое поле img с URL-адресом, целочисленное поле price с числом et c.

Есть ли способ сделать это, например: 

const products = [
{ 

id: filled by firebase,
img: filled by firebase,
name: filled by firebase,
price: filled by firebase,
cart: false,
quantity: 1,
total: 0
}

Я знаю, что выбрал бы foreach l oop против кодирования каждого элемента, но я не уверен, как назначить поля против жесткого кодирования.

РЕДАКТИРОВАТЬ

После добавления этого: 

const itemsx = (data) => {
  if (data.length) {

    data.forEach(doc => {
    const item = doc.data();


products = [
  {
    id: item.uid,
    img: item.artwork,
    name: item.gamename,
    price: item.price,
    cart: false,
    quantity: 1,
    total: 0

  }

];
console.log(products)
});
} else {
console.log('If you see this, preschoolers are more competent than you at this point.');
}
}

I получить правильные выходные данные в консоли, однако, products [] оказывается в ловушке внутри itemsx и больше не доступен глобально. (Я добавил itemsx (snapshot.docs) в метод onAuthStateChange)

Я делаю что-то ужасно неправильно, я знаю, что делаю что-то ужасно неправильно, я на шаг впереди, но теперь застрял, может ли кто-нибудь увидеть то, что я не могу.

Ответы [ 2 ]

1 голос
/ 17 июня 2020

Хорошо, я нашел способ решения моей проблемы. Я собирался удалить вопрос, так как понял это, но стек дает мне своеобразное предупреждение «Лучше, если вы не удаляете», так что вот мой обходной путь: 

var products = [];
const itemsx = (data) => {    
  data.forEach(doc => {
  const item = doc.data();  
products.push({id: item.uid,img: item.artwork,name: item.gamename,price: item.price,cart: false,quantity: 1,total: 0});
});}
console.log(products)
1 голос
/ 17 июня 2020

Существует несколько способов разработки приложения для возврата данных из Firestore в массив. Обычно вы просто перебираете все данные, используя get(), поэтому все они загружаются в массив. Например, как это показано ниже: 

let products = this.updates.collection.get()
  .then(querySnapshot => {
    products = querySnapshot.docs.map(doc => doc.data())
  })

Как указано в этом ответе здесь , это вернет все документы - querySnapshot() сделает это - и сохранит данные в products array.

Другой способ - использовать с await() для итерации данных в массив. Приведенный ниже код основан на этом другом ответе здесь , на случай, если вы хотите проверить исходный. 

const prodRef = db.collection('products');

export const getProducts = async (ids = []) => {
    let products = {};

    try {
        products = (await Promise.all(ids.map(id => prodRef.doc(id).get())))
            .filter(doc => doc.exists)
            .map(doc => ({ [doc.id]: doc.data() }))
            .reduce((acc, val) => ({ ...acc, ...val }), {});

    } catch (error) {
        console.log(`received an error in getUsers method in module \`db/products\`:`, error);
        return {};

    }

    return products;
}

Хотя эти коды не проверены , я считаю они должны помочь вам в качестве отправной точки для вашего развития.

Сообщите мне, помогла ли вам информация

...