How did the tutorial get its data as JSON:API?

Ember Data
1

I’m trying to build a pet project of that uses data from somewhere. I have basically arrays of objects, which are related to another entity. I would prefer to not deploy a database because the data is uniform and does not have any relations (only one that is linked to a category).

I see that the tutorial in the Ember website solved this issue by attaching a JSON file, which I believe is JSON:API compliant. My question is: how did the tutorial’s author create those files? Where they hand-written or are they an output from some tool I’m not aware of?

The reason is that I’m new to Ember. I would prefer to finish the project than spend more time learning about Ember Data (I plan to do so later on). I just want to learn how to use Ember right now by building this project.

2

Hi, @nojir. Good question about how one could create their own mock data for completing a project.

I can make a guess at how the mock data for Super Rental were created. One possibility is that the author(s) had created a demo server to try to make things as close to reality as possible. Another, more likely, possibility is that the author(s) had handwritten the JSON because the rental model is relatively simple.

In a basic example for JSON:API (taken from official documentation for JSON:API), a JSON for returning a single “resource” would look like:

{
  "data": {
    "type": "articles",
    "id": "1",
    "attributes": {
      // ... this article's attributes
    }
  }
}

Ember Data doesn’t require you to use JSON:API for how to send data to your client app. If you want to create a simple POJO or are more familiar with REST style, you can, but will need to use the correct serializer and possibly do manual data transformation in your serializer.

Hope this answered your question!

References

3

Also, if you don’t need Ember Data to complete your app at the moment (maybe you just need to display data, and don’t need to allow a user to edit data yet), I’d recommend returning a POJO or an array from your route’s model hook:

// app/routes/articles.js

model() {
  return [
    {
      id: '1',
      title: 'Article #1',
      authorName: 'Zoey',
    },
    {
      id: '2',
      title: 'Article #2',
      authorName: 'Tomster',
    },
  ];
}

If you do need to allow editing data, perhaps you can create a data-managing service (called store so that it’s easy to replace your custom store with Ember Data’s later).

1 Like
4

My data should build tables and also maps for an area. This means I have geoJSON and JSON data to work with. I think I will need to work from read a JSON file somewhere in the project’s root dir. I need to do so because I am dumping data into a file. That’s why I asked about JSON:API because I’d like to make it as easy as possible to read from the project’s root dir and unpack all the JSON.

5

if you want the data to be readable by your app once the app is deployed you’ll probably want to put the files in /public (your “project root” doesn’t exist once the app is compiled).

If you want to use JSONAPI and ember data, but still read your data from files (even once deployed?) you could also use ember-cli-mirage and use a fixtures file. Basically ember-cli-mirage is an addon that mocks an API in your browser. So you could easily load fixtures in whatever format to create mirage records, and then let the app fetch the records from mirage (then you don’t have to worry about hand-rolling JSON API format). The pros are you could do anything a normal API could do and it’s great for prototyping if you’re planning to eventually use a real API. The cons are there’s no actual persistence so any mutations you make are ephemeral and if you’re doing to be working with a large number of records it would probably be too slow to be practical.

You could also use a different serializer like the JSON serializer so the data doesn’t need to be in JSON API format.

1 Like
6

fixtures in whatever format to create mirage records, and then let the app fetch the records from mirage (then you don’t have to worry about hand-rolling JSON API format).

This sounds like what I’m looking for. I’d like to deploy the site and still be able to use Ember Data. However, this leads to the question: how do I load the data into this library? Will I need to tweak something in Ember Data like the serializer or adapter?

The cons are there’s no actual persistence so any mutations you make are ephemeral

This is not a big deal at the moment. The app is mostly presentation data – it’s not meant for the user to tweak and save changes.

if you’re doing to be working with a large number of records it would probably be too slow to be practical.

I’ll try it first and then I’ll see. My GeoJSON files take less than 1MB in total and I may not reach that size with the table data.

7

So mirage is built to work in test or development mode. In development mode you have a “scenario” which is a way to set up the “initial database” that mirage will use. This is where you’ll read the fixture files. Basically you put your fixtures in mirage/fixtures/users.js (for example) and then in your default scenario (/mirage/scenarios/default.js) call server.loadFixtures(). This is all detailed in the mirage docs, which are pretty great btw.

The fixture format is just array of json, for example with user data it might look like this:

// mirage/fixtures/users.js
export default [
  {
    firstName: 'Kevin',
    lastName:  'Bacon',
    email:     'kevinbacon@gmail.com',
    active:    true
  },
  ...
];

Putting your data straight into a mirage fixtures file would be the easiest way to do this. If you really wanted to load the data from a JSON file into your fixtures file somehow I’m sure you could probably figure out a way but it might take a little experimentation.

EDIT: i think typically your fixture file name will match the name of your ember data model. Mirage has a full ORM, and will pick up your ember data models automatically, so in theory you should just be able to set up mirage fixtures, load them in your scenario, and start loading data via Ember Data.

EDIT 2: oh and the other step you’ll need is to define “route handlers” for your fake API in mirage/config.js but unless you want to start doing fancy custom stuff that should be as simple as:

  ...
  this.resource('users'); // if your ember model name was "user"
  ...

This is a shorthand for creating all of the following routes:

this.resource('users');

// ... is shorthand for...
this.get('/users');
this.get('/users/:id');
this.post('/users');
this.patch('/users/:id'); // and this.put('/contacts/:id')
this.del('/users/:id');
8

What I think I will do to keep things simple is define the fixture file and then copy my data into the fixture file. Either way, my data looks a lot like a fixture since it’s all POJO – array of objects that have the same attributes.

How should I go about defining a relationship? The thing I’m building is a heatmap. I have data associated to a place and would like to fill in those areas with the data. I’m guessing each table will be related to a map region? Can I use fixtures and GeoJSON together? That’s where I’m having trouble at the moment.

9

Definitely check out the ember guides section on relationships. I don’t think there’s any reason you can’t have more structured data like GeoJSON in fixtures. Using “nested” structures in models is tricky because there are several ways to do it and they have different consequences.

For example in this little snippet:

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

You could define an ember data model with 3 properties: type, geometry, propertiesand just use no transform (attr()) which treats the data as raw. This should work fine but will not always behave as you want in cases where the “nested” data is being updated and you want that bound to UI updates.

You could also flatten the structure in your ember serializer, you could define relationships to keep everything flat, etc. You could even not use ember data at all and just use raw fetch calls to get the data from the mirage (or API) endpoints and use the data “as-is”. There is also an addon called ember-data-model-fragments for using more nested data structures in your ember data models.

I’m not really sure how your data is structured in general, but if you don’t need to the geojson data to be a “resource” per se you could just have a model like this (probably a terrible example but hopefully you get the picture):

import Model, { attr, belongsTo } from '@ember-data/model';

export default class CityModel extends Model {
  @attr('string') name; // the city name
  @attr('country') country; // what country is this city in?
  @attr() dataPoints; // any arbitrary array of GeoJSON data that could be loaded with this model
}

Of course that means you need to have the “dataPoints” defined inline in your fixtures, or you’d need to construct them like that before they are exported from your fixtures file.

10

You mean fetching the resource (file) from the public directory and loading it in a model hook? I’m envisioning something like: there’s a big map and a table on the side that shows all the data. When you click on a region on the map, the UI updates and shows you the data for that region only.

If I choose to fetch from a local resource then do you think I’ll have to organize my resources in a way that it’s parametrized in the fetch call? Like, I click a region and the region has the name of the region. In the resources folder, the region is a file inside a directory. The directory’s name is the name of the clicked region. After the fetch locates the file it loads it in the model hook. That’s one way I was thinking about it.

BTW, this is an example of how the data looks:

{
    "features": [
        {
            "properties": {
                "Description": "MUNIC_ID = 9340<br>N_MUNIC = Bluefields<br>AREA = 4.5821e+009<br>N_DEPTO = RAAS<br>ID_DEPTO = 93<br>MUNID2 = 9340<br>OID_1 = 136<br>OID_ = 151<br>DEPTO_COD = 93<br>MUNIC_COD = 40<br>MUNICIPIO = Bluefields<br>POB = 45547<br>EXTENS_TER = 4774.75<br>DENS_POB = 9.5<br>HOMBRES = 21976<br>MUJERES = 23571<br>RELAC_MASC = 93.2<br>MENOR15_ = 17825<br>15_64 = 25836<br>65MAS = 1886<br>VIVPARTICO = 8913<br>TUBENVIV = 463<br>LUZ_ELECT = 7167<br>TUBENVIV_1 = 5.2<br>LUZ_ELEC_1 = 80.4<br>RURAL = 6924<br>URBANO = 38623<br>URB = 84.8<br>TASAANALFA = 17.1<br>KEYMUNIC = 9340<br>OID1 = 4<br>N_MUNICIPI = Bluefields<br>TMI = 31.5<br>TGF = 2.72<br>RELAC_DEPE = 76.29<br>CODMUNIC = 9340<br>",
                "Name": "Bluefields"
            },
            "type": "Feature",
            "geometry": {
                "coordinates": [
                    [
                        [
                            [
                                -83.679703,
                                12.181838
                            ],
                            [
                                -83.686327,
                                12.168254
                            ],
                            [
                                -83.68954,
                                12.10452
                            ],
                            [
                                -83.686647,
                                12.025161
                            ],
                            [
                                -83.693257,
                                12.019481
                            ],
                            [
                                -83.715393,
                                12.042824
                            ],
                            [
                                -83.73261,
                                12.073412
                            ],
                            [
                                -83.73365,
                                12.08582
                            ],
                            [
                                -83.71006,
                                12.086458
                            ],
                            [
                                -83.697256,
                                12.100386
                            ],
                            [
                                -83.701289,
                                12.119302
                            ],
                            [
                                -83.718397,
                                12.161374
                            ],
                            [
                                -83.747282,
                                12.179451
                            ],
                            [
                                -83.681031,
                                12.183682
                            ],
                            [
                                -83.679703,
                                12.181838
                            ]
                        ]
                    ],
                    [
                        [
                            [
                                -83.748412,
                                12.170844
                            ],
                            [
                                -83.73405,
                                12.165114
                            ],
                            [
                                -83.726496,
                                12.148868
                            ],
                            [
                                -83.711086,
                                12.130567
                            ],
                            [
                                -83.714967,
                                12.121983
                            ],
                            [
                                -83.740199,
                                12.115671
                            ],
                            [
                                -83.770974,
                                12.150974
                            ],
                            [
                                -83.7495,
                                12.15372
                            ],
                            [
                                -83.748412,
                                12.170844
                            ]
                        ]
                    ],
                    [
                        [
                            [
                                -83.801656,
                                11.050174
                            ],
                            [
                                -83.843454,
                                11.048576
                            ],
                            [
                                -83.870392,
                                11.053465
                            ],
                            [
                                -83.883231,
                                11.042854
                            ],
                            [
                                -83.89603,
                                11.063898
                            ],
                            [
                                -83.891079,
                                11.069038
                            ],
                            [
                                -83.904742,
                                11.083001
                            ],
                            [
                                -83.903216,
                                11.118312
                            ],
                            [
                                -83.914132,
                                11.119592
                            ],
                            [
                                -83.920512,
                                11.108654
                            ],
                            [
                                -83.944888,
                                11.113
                            ],
                            [
                                -83.94553,
                                11.101756
                            ],
                            [
                                -83.964711,
                                11.097052
                            ],
                            [
                                -83.979077,
                                11.107442
                            ],
                            [
                                -83.98724,
                                11.099453
                            ],
                            [
                                -84.002136,
                                11.099752
                            ],
                            [
                                -84.027839,
                                11.082821
                            ],
                            [
                                -84.050253,
                                11.103377
                            ],
                            [
                                -84.058776,
                                11.128268
                            ],
                            [
                                -84.072629,
                                11.129743
                            ],
                            [
                                -84.086313,
                                11.122187
                            ],
                            [
                                -84.10934,
                                11.134233
                            ],
                            [
                                -84.13419,
                                11.130064
                            ],
                            [
                                -84.169457,
                                11.140744
                            ],
                            [
                                -84.17788,
                                11.149877
                            ],
                            [
                                -84.217965,
                                11.229657
                            ],
                            [
                                -84.298709,
                                11.2759
                            ],
                            [
                                -84.326675,
                                11.280223
                            ],
                            [
                                -84.437068,
                                11.399449
                            ],
                            [
                                -84.407652,
                                11.396122
                            ],
                            [
                                -84.387981,
                                11.405008
                            ],
                            [
                                -84.366405,
                                11.402842
                            ],
                            [
                                -84.357821,
                                11.416644
                            ],
                            [
                                -84.32779,
                                11.436643
                            ],
                            [
                                -84.287074,
                                11.45539
                            ],
                            [
                                -84.280627,
                                11.465507
                            ],
                            [
                                -84.245074,
                                11.488696
                            ],
                            [
                                -84.195867,
                                11.507786
                            ],
                            [
                                -84.189666,
                                11.519801
                            ],
                            [
                                -84.161146,
                                11.538272
                            ],
                            [
                                -84.131724,
                                11.53999
                            ],
                            [
                                -84.108377,
                                11.536574
                            ],
                            [
                                -84.095936,
                                11.530001
                            ],
                            [
                                -84.088161,
                                11.549552
                            ],
                            [
                                -84.072442,
                                11.551594
                            ],
                            [
                                -84.035047,
                                11.571097
                            ],
                            [
                                -84.014714,
                                11.577453
                            ],
                            [
                                -84.060955,
                                11.666832
                            ],
                            [
                                -84.085929,
                                11.718961
                            ],
                            [
                                -84.06458,
                                11.724155
                            ],
                            [
                                -84.047534,
                                11.739908
                            ],
                            [
                                -84.027257,
                                11.742621
                            ],
                            [
                                -84.029457,
                                11.766322
                            ],
                            [
                                -84.02471,
                                11.778469
                            ],
                            [
                                -84.030832,
                                11.787819
                            ],
                            [
                                -84.038812,
                                11.829394
                            ],
                            [
                                -84.035035,
                                11.842156
                            ],
                            [
                                -84.042322,
                                11.914603
                            ],
                            [
                                -84.048954,
                                11.929739
                            ],
                            [
                                -84.039719,
                                11.981119
                            ],
                            [
                                -84.04408,
                                11.9965
                            ],
                            [
                                -84.027048,
                                12.013478
                            ],
                            [
                                -84.013653,
                                12.019447
                            ],
                            [
                                -84.010655,
                                12.087781
                            ],
                            [
                                -83.97642,
                                12.094293
                            ],
                            [
                                -83.97312,
                                12.079694
                            ],
                            [
                                -83.951525,
                                12.075316
                            ],
                            [
                                -83.930353,
                                12.108727
                            ],
                            [
                                -83.90255,
                                12.112055
                            ],
                            [
                                -83.888175,
                                12.11852
                            ],
                            [
                                -83.89012,
                                12.132366
                            ],
                            [
                                -83.860606,
                                12.134049
                            ],
                            [
                                -83.854536,
                                12.142534
                            ],
                            [
                                -83.824367,
                                12.15459
                            ],
                            [
                                -83.794419,
                                12.151142
                            ],
                            [
                                -83.781896,
                                12.140325
                            ],
                            [
                                -83.778811,
                                12.120488
                            ],
                            [
                                -83.789737,
                                12.11413
                            ],
                            [
                                -83.798931,
                                12.076392
                            ],
                            [
                                -83.788881,
                                12.051658
                            ],
                            [
                                -83.761001,
                                12.02901
                            ],
                            [
                                -83.760783,
                                11.988649
                            ],
                            [
                                -83.773001,
                                11.977266
                            ],
                            [
                                -83.769427,
                                11.942875
                            ],
                            [
                                -83.798454,
                                11.922023
                            ],
                            [
                                -83.799292,
                                11.905786
                            ],
                            [
                                -83.82379,
                                11.893656
                            ],
                            [
                                -83.839884,
                                11.88062
                            ],
                            [
                                -83.835354,
                                11.864494
                            ],
                            [
                                -83.81421,
                                11.856998
                            ],
                            [
                                -83.819953,
                                11.84744
                            ],
                            [
                                -83.810418,
                                11.829694
                            ],
                            [
                                -83.786235,
                                11.812692
                            ],
                            [
                                -83.784739,
                                11.800033
                            ],
                            [
                                -83.745523,
                                11.803958
                            ],
                            [
                                -83.751856,
                                11.837173
                            ],
                            [
                                -83.747396,
                                11.858467
                            ],
                            [
                                -83.738925,
                                11.870378
                            ],
                            [
                                -83.720827,
                                11.856644
                            ],
                            [
                                -83.70382,
                                11.852364
                            ],
                            [
                                -83.702027,
                                11.82788
                            ],
                            [
                                -83.688161,
                                11.798529
                            ],
                            [
                                -83.67814,
                                11.764909
                            ],
                            [
                                -83.654743,
                                11.625882
                            ],
                            [
                                -83.646165,
                                11.616299
                            ],
                            [
                                -83.64797,
                                11.596429
                            ],
                            [
                                -83.678318,
                                11.604223
                            ],
                            [
                                -83.705701,
                                11.579585
                            ],
                            [
                                -83.714538,
                                11.563498
                            ],
                            [
                                -83.73184,
                                11.566051
                            ],
                            [
                                -83.75095,
                                11.560696
                            ],
                            [
                                -83.763807,
                                11.533145
                            ],
                            [
                                -83.782549,
                                11.474484
                            ],
                            [
                                -83.790902,
                                11.473945
                            ],
                            [
                                -83.800471,
                                11.441699
                            ],
                            [
                                -83.8279,
                                11.44666
                            ],
                            [
                                -83.839307,
                                11.435405
                            ],
                            [
                                -83.85281,
                                11.410297
                            ],
                            [
                                -83.866952,
                                11.397699
                            ],
                            [
                                -83.874172,
                                11.353593
                            ],
                            [
                                -83.872093,
                                11.293986
                            ],
                            [
                                -83.864898,
                                11.243798
                            ],
                            [
                                -83.85614,
                                11.204782
                            ],
                            [
                                -83.83791,
                                11.14117
                            ],
                            [
                                -83.820483,
                                11.092399
                            ],
                            [
                                -83.801656,
                                11.050174
                            ]
                        ]
                    ],
                    [
                        [
                            [
                                -83.763747,
                                12.132541
                            ],
                            [
                                -83.752542,
                                12.119175
                            ],
                            [
                                -83.752435,
                                12.083984
                            ],
                            [
                                -83.74433,
                                12.058487
                            ],
                            [
                                -83.758461,
                                12.053072
                            ],
                            [
                                -83.770972,
                                12.05629
                            ],
                            [
                                -83.779082,
                                12.076296
                            ],
                            [
                                -83.777255,
                                12.090844
                            ],
                            [
                                -83.79181,
                                12.101437
                            ],
                            [
                                -83.788124,
                                12.114513
                            ],
                            [
                                -83.763747,
                                12.132541
                            ]
                        ]
                    ],
                    [
                        [
                            [
                                -83.73234,
                                12.089925
                            ],
                            [
                                -83.7466,
                                12.099881
                            ],
                            [
                                -83.748685,
                                12.120447
                            ],
                            [
                                -83.725394,
                                12.103747
                            ],
                            [
                                -83.73234,
                                12.089925
                            ]
                        ]
                    ],
                    [
                        [
                            [
                                -83.77612,
                                12.061592
                            ],
                            [
                                -83.789962,
                                12.061624
                            ],
                            [
                                -83.79605,
                                12.076957
                            ],
                            [
                                -83.782796,
                                12.081148
                            ],
                            [
                                -83.77612,
                                12.061592
                            ]
                        ]
                    ],
                    [
                        [
                            [
                                -83.71929,
                                11.999345
                            ],
                            [
                                -83.717852,
                                11.984994
                            ],
                            [
                                -83.724843,
                                11.963355
                            ],
                            [
                                -83.72724,
                                11.923251
                            ],
                            [
                                -83.721339,
                                11.892602
                            ],
                            [
                                -83.711549,
                                11.868977
                            ],
                            [
                                -83.722381,
                                11.86829
                            ],
                            [
                                -83.739387,
                                11.877375
                            ],
                            [
                                -83.74034,
                                11.893056
                            ],
                            [
                                -83.749314,
                                11.908296
                            ],
                            [
                                -83.74169,
                                11.943045
                            ],
                            [
                                -83.744417,
                                11.95982
                            ],
                            [
                                -83.735244,
                                11.968402
                            ],
                            [
                                -83.73024,
                                11.991226
                            ],
                            [
                                -83.71929,
                                11.999345
                            ]
                        ]
                    ]
                ],
                "type": "MultiPolygon"
            }
        }
    ],
    "type": "FeatureCollection"
}
11

I’m envisioning something like: there’s a big map and a table on the side that shows all the data. When you click on a region on the map, the UI updates and shows you the data for that region only.

If you’re going to show all the data starting out you may want to just fetch it all in one go and then not do anymore fetching, just filter it client-side when a region is clicked. That’s not necessarily sustainable given a large enough data set though so you want to determine how this will work long term.

But yes in general this seems like a situation where you may want to not bother with Ember Data at least for starters. It’s extremely powerful for “resource” type data but doesn’t lend itself well to some types of data, like unstructured data or financial market data (where the values are changing constantly, have a massive number of permutations, and grow stale very quickly), for example. You could always start without it and add it later if you decide you need it.

Ember Data is seen as the The One True Way to fetch data in Ember but that’s not really the case and the core and learning teams are trying to appropriately de-emphasize it and provide overviews of alternative data fetching patterns.

You mean fetching the resource (file) from the public directory and loading it in a model hook?

Yes you could do this with mirage, with a real API, or just static files in public. In your case you may just want to start with a static json file in public and fetch it, basically like in the Ember tutorial. There’s no need to use JSON API formatting though if you’re not planning to use Ember Data, you can just load arbitrary JSON and do whatever you want with it.