firebase_rtdb_mapping.js

// An issue you may run into when dealing with fetch calls to your firebase realtime database is that the data is likely not in the structure you want it. The data will come back in the form of an object with each item's ID is the key.

// Example response

{
  "-lk38hfnb": {
    title: "My Title 1",
    description: "My Description 1"
  },
  "-fn947bfh": {
    title: "My Title 2",
    description: "My Description 2"
  }
}

// But you probably want your data to be in an array and look more like this:
[
  {
    id: "-lk38hfnb",
    title: "My Title 1",
    description: "My Description 1"
  },
  {
    id: "-fn947bfh",
    title: "My Title 2",
    description: "My Description 2"
  }
];


// Here is a utility function to map the response object to an array

const mapFBData = (data) => {
  return Object.keys(data)
    .map(key => {
      return { id: key, ...data[key] }
    });
}