FREELessons: 10Length: 59 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 JSON Graph and References

In the last lesson, we began to see how the basic structure of JSON breaks down when attempting to update an object that exists in multiple places in a model. In this lesson, I'll show you Falcor's solution to that problem by introducing the concept of a JSON Graph. I'll show you how we can change our model to make it more usable in situations where we will need to update data.

2.5 JSON Graph and References

So here we are back in the same place that we were for the previous lesson. Where we found that when we start to duplicate to do items or any sort of other objects within a JSON object, we really introduce the problem of duplication. And unless we're very careful about propagating updates and changes to a specific object within our JSON representation. If one of those objects changes and there are duplicates of those objects elsewhere throughout our object, we have to be very diligent about updating all those, and that can be very painful. So one thing that Netflix has introduced into Falcor, into the Falcor model is this concept of a JSON graph. Which allows us to kind of pull out all of the duplications, put all of our sub-objects into a separate representation within our model that allows some uniqueness. So if we ever have to update or retrieve an object from our model, we're only ever dealing with a single instance, a single unique instance. And it's actually quite interesting how they handled this. So let's take a look at how we can solve this little problem here. So here we are back in our source code and what I want to do is I wanna make a slight modification to this current model that's going to allow us to take advantage of this JSON graph. So two things are gonna have to happen. The first thing that's gonna have to happen is we need to basically create a lookup list that's going to contain all of our to-do items in a unique way so that there's no duplication. So the way that we're gonna do that is we're going to come into our cache here and we're gonna add in another name value pair within our model. So, we're gonna call this todosById. And as you can see by the name would imply, we are basically wanting to extract all of our todo items into this location, have this be our little lookup area. So, the way that we're gonna do that is simply by adding in a name value pair for each one of our to do items with a unique identifier and our IDs are our unique identifiers. So here's our first ones. So we're gonna do 98765. That's gonna be our key. And then our value is simply going to be this entire object. So we can cut that out and stick it here so then we no longer need this guy. Now, we're gonna replace this with something in just a few moments. So you'll see exactly what's going on here. And then we want to do the same thing with 12345. So we'll go ahead and copy this and this is going to be our next key. Paste that in here and then we have another object and it's simply going to be this object here. We'll cut that out, paste it in here and now we can get rid of some of these extra curly brackets. So now there's nothing in this todo array right now but we'll take care that in a minute. Now we already have this object down here, the 98765 which was causing our problem up here in our lookup. So we don't really need this in here anymore. So what we really are left with are two collections in here of our todos for Recently Viewed and Recently Added. Now we need to add references to these and this is the other part of the equation when it comes to JSON Graph. And the additions that Netflix has made into the world of JSON. There are a number things that were added but one of the more powerful ones is this concept of references. So in order for us to really use references, let's create a reference here to a method within Falcor, falcor.Model.ref. Which is really just a function that's going to create a reference to these items here anywhere within our object model that we would like. So, within our todos here, we had both of these to do items here, right? So we wanma add references to these within our model, and the way that we do that is we use our little ref function. And we simply give the location within our model where we can find that unique piece of information. And the way that we do that is by passing in a path. So we say todosById since that's where we find our object or our item here, and we use the identifiers. So we can copy this, we'll come down and we'll say it is found with that ID. And then we can add in the second one because remember Recently Viewed had both of these. So I'm simply going to copy this, paste in here. And it also had this identifier, like that. And then the one on the bottom here for Recently Added only had 98765. So let's copy that and we will go ahead and stick that within this to do list here. So let's go ahead and save that. So obviously this is not a very big change. But you can already start to see how this has begun to simplify our object model here. Because we have reduced the duplication of these objects throughout the model, we can now always refer to a single, unique instance of that particular object. And if we ever need to update it, we're only updating one, and we're just referring to it from other places. So now, we're gonna start to get rid of not only the duplication but also the problem of the stale data. Where if you update one and you're not updating the rest, then you're getting these conflicting pieces of information. So let's go ahead and save that. Now we don't have to make any changes to our code down here. We can set the same value completed to true and then we're gonna retrieve all of our todo list items, or the first to do list item name and completed from all of our todo lists. So what we can do is we can head back to our code over here. We can go ahead and refresh our page and now we updated that one particular completed flag. And then when we did the get, you can see now that we got "Get a great job", "completed": true, and "Get a gate great job", "completed": true. And we only ever had to set a value in a single place. But because everything is referring back to one unique instance because it has an ID, then we reduce that sort of problem. And also, we have a little bit of duplication here. Again, we really don't need these IDs in here anymore simply because it's a little bit redundant. We already have the IDs out here so I can save that, come back and I can rerun my little script. And as you can see, it continues to work. So that is one of the very cool features of JSON Graph. There's other things that you can continue to look into. And I'll leave some links and some updated information for you to take a look at towards the end of the course. But this is one of the really nice features I feel that have been put into Falcor by Netflix. Especially when it comes to working with large data schemas that are being represented within JSON.

Back to the top