Parsing JSON object from Firebase and using key value pairs to generate content

Question

I have set up a database with Firebase and I have populated it with JSON information. I have code, taken directly from the Firebase documentation, that takes a snapshot of my data and updates it in real time. This is great for what I need, but I also need to access the values in my JSON to generate lists of content similarly to this:

var JSONStuff = json info on database
for (every array in the JSON)
{
  //MAKE THINGS
}

I usually do this with php scripts and SQL databases, but I am using Firebase for the first time and I am not sure what I am doing wrong. Here is what I have so far.

JavaScript:

var display = document.getElementById("resultsDisplay");
var dbRef = firebase.database().ref().child("workouts");
// Sync with Firebase in real time.
dbRef.on("value", snap =>
{
  //display.innerHTML = JSON.stringify(snap.val(), null, 3); This correctly prints my JSON.
  JSON.stringify(snap.val(), null, 3);
});

JSON.parse(dbRef) //Trying to parse the JSON and do things with it.
{
  for (var i = 0, len = dbRef.length; i < len; i++)
  {
    display.innerHTML = 'Routine: ' + dbRef.title + ' Exercises: ' + dbRef.name + '.';
  }
};

HTML:

<div id="resultsDisplay">boo</div>

The console gives me the "Uncaught SyntaxError: Unexpected token h in JSON" error, which I know means there are double quotes messing with my parser somewhere, but as you can see I am not using them in the function.

I am a noob and therefore probably doing something completely silly, but any help would be greatly appreciated.

You are trying to JSON.parse the database reference, not the value. You need to operate inside the .on('value') callback and use the snap.val() for your JSON, not dbRef. — Michael Bleigh
– Michael Bleigh, Commented Oct 16, 2017 at 18:46
Thank you, that makes sense. However, all I have achieved is to get rid of console errors, nothing else shows. I presume I am referencing key:value pairs incorrectly. — Brian
– Brian, Commented Oct 17, 2017 at 13:31

Orlandster · Accepted Answer · 2017-10-16 20:57:52Z

1

Currently, you are trying to parse the database reference dbRef and not the data itself.

Try to do this:

var display = document.getElementById("resultsDisplay");
var dbRef = firebase.database().ref().child("workouts");

// Sync with Firebase in real time.
dbRef.on("value", snap => {
  var workoutsJSON = JSON.stringify(snap.val(), null, 3);

  JSON.parse(workoutsJSON) {
    for (var i = 0, len = dbRef.length; i < len; i++) {
      display.innerHTML = 'Routine: ' + dbRef.title + ' Exercises: ' + dbRef.name + '.';
    }
  };
});

Just to give you an idea.

answered Oct 16, 2017 at 20:57

Orlandster

4,9184 gold badges35 silver badges45 bronze badges

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

6 Comments

Brian Over a year ago

Thank you for your answer, If I implement your code the console does not show any errors, but at the same time the div does not get updated and nothing is displayed. I presume this is an issue with how I am referencing the key:value pairs in my database.

Brian Over a year ago

UPDATE: The issue is not with referencing the key:value pairs. I converted my JSON into a JS variable and parsed through it and was then able to print individual values, but not loop through them (so I must be doing something wrong with the for loop as well). I then tried to print the same information from the server using your code, it returned 'undefined' and no console errors.

Orlandster Over a year ago

@Brian Is it possible to create a plunkr? then I will solve to your needs within a few minutes.

Brian Over a year ago

here is the plunk: plnkr.co/edit/52vgPr8CufhefW5LFBwL?p=preview

Orlandster Over a year ago

Do you really need the JSON? I think you just want to display your firebase's data. I've forked your plunkr: plnkr.co/edit/gMZbEkyPGsgT0LDmiUZD if you want to display them in a for loop you will need to append them to the DOM instead of usiing the innerHTML property.

|

Collectives™ on Stack Overflow

Parsing JSON object from Firebase and using key value pairs to generate content

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related