Manage JSON data consumed through a Rails API

Manage JSON data consumed through a Rails API

Question : how can I manage a large amount of data in JSON using JavaScript?
My first idea was to recreate my server database on the client mobile
device using WebSQL, but I feel this is not the best solution because I
need to sync with the server on opening.
I found SpahQL to manipulate JSON data, but I don't know how I will manage
the relationship between my models...
[See an example API response from my server below]
Context
I have a Rails server which serves as an admin backend and an API to my
mobile app. The app retrieves JSON formatted data delivered by the server.
On the first opening of the app, the data is retrieved and is then saved
in a .json file on the client side. On the next opening, the app makes a
call to the API to see if the data has changed.
It it has, the app retrieves the new data and overwrite the .json file ;
It it has not, the app uses the .json file.
My association is defined like this :
Product >
belongs_to :place
Place >
has_many :product
belongs_to :school
School >
has_many :product
The mobile app call the school controller, embeds places which embeds
product.
My Rails server uses ActiveModel Serializers to deliver the data which
looks like this :
{
"places": [
{
"name": "Bac à papier",
"content": null,
"tags": "bac de recyclage",
"thumb": "papier.gif",
"description": "Bac de recyclage dans les classes et les couloirs",
"product_ids": [
39,
49,
50,
70,
71,
73,
25,
84,
87,
90
]
}
],
"products": [
{
"name": "Courrier",
"tags": null,
"views": 24
},
{
"name": "Enveloppe avec fenêtre",
"tags": null,
"views": 29
},
{
"name": "Enveloppe sans fenêtre",
"tags": null,
"views": 28
},
{
"name": "Journal",
"tags": null,
"views": 33
},
{
"name": "Livre, catalogue",
"tags": null,
"views": 26
},
{
"name": "Magazine, circulaire",
"tags": null,
"views": 30
},
{
"name": "Carton",
"tags": null,
"views": 26
},
{
"name": "Oeufs (boîte à)",
"tags": null,
"views": 28
},
{
"name": "Papier (feuille)",
"tags": "paper",
"views": 37
},
{
"name": "Papier autocollant (post-it)",
"tags": null,
"views": 25
}
],
"school": {
"id": 1,
"name": "Andre Grasset",
"place_ids": [
1
]
}
}