Home / Questions / 265575
Accepted
Noob Dev
Asked: 2020-05-22 12:31:46 +0800 CST 2020-05-22 12:31:46 +0800 CST

How to fetch a raw from a JSON file hosted in a Firebase Realtime Database?

  • 772

I have a function that retrieves map markers from a RAW file that was hosted on GitHub.

Now that I have the app finished, I was working on being able to do the same from the Firebase server, but haven't been able to figure out how to retrieve the information the same way as I did from a GitHub file.

This is the function that retrieves the map markers:

getStations() {
    return fetch('https://raw.githubusercontent.com...')
      .then(response => response.json())
      .then(responseData => {
        var markers = [];
        for (var i = 0; i < responseData.features.length; i++) {
          if (responseData.features[i].properties.Torwand != '<Null>') {
            var coords = responseData.features[i].geometry.coordinates;
            var obcn = responseData.features[i].properties.obcn;
            var bikesToTake = responseData.features[i].properties.bikesToTake;
            var spacesToLeft = responseData.features[i].properties.spacesToLeft;
            var status = responseData.features[i].properties.status;
            var marker = {
              coordinate: {
                latitude: coords[1],
                longitude: coords[0],
              },
              title: obcn,
              description: "Estado: " + status + " Bicicletas: " + bikesToTake + " Espacios: " + spacesToLeft
            }
            markers.push(marker);
          }
        }
        this.setState({
          markers: markers,
          loaded: true,
        });
      }
      ).done();
  }

My idea was to replace the RAW file URL from GitHub with something similar from Firebase, but the documentation is sparse and there is nothing about RAW files.

firebase

1 Answers

  1. Best Answer

    Good morning Christopher,

    First you have to have the firebase package installed in your project.

    https://yarnpkg.com/en/package/firebase

    yarn add firebase

    Now you have to have a project created in Firebase and a file in your project with the configuration, for example Firebase.js and inside the following code with your data.

    https://firebase.google.com/

    export default (firebaseConfig = {
  apiKey: "********",
  authDomain: "********",
  databaseURL: "********",
  projectId: "********",
  storageBucket: "********",
  messagingSenderId: "********",
  appId: "********"
});

    And do the initialization of the firebase I recommend that you do it in the app.js

    import firebaseConfig from "./app/utils/Firebase";
import * as firebase from "firebase";
firebase.initializeApp(firebaseConfig);

    Now we are going to imagine that we have a collection in firebase with the data from your file.json, we would simply have to execute the following line to get all the elements.

    function getElements() {
    const collection = firebase.database().ref().child('features');

    this.collection.on('value', snapshot => {
        let arrayFeatures = [];
        snapshot.forEach(row => {
            arrayFeatures.push({
                id: row.key,
                properties: row.val().properties,
                geometry: row.val().geometry,
            })
        });
    })
}

    In this way you would get the entire collection.

    All the best.

    • 1