Best way to load a ton of JSON data into an Ember App

Ember Data
21

Man this is EXACTLY what I’ve been trying to do for days. Once again, thank you sir!!

22

Oh goodness. If it’s not one thing it’s another.

links-refresh
links-refresh1316×1326 814 KB

Guessing I need to do one of these things to solve this problem?

  1. Create an onclick action that forces a refresh.
  2. Add a transitionTo for the links.
23

Fixed it! Thanks to another one of your answers. :nerd_face:

Added another route above terms to separate term/letter from terms/letter/term_id.

Router.map(function() {
  this.route("home", { path: "/" });
  this.route("term", function() {
    this.route("letter", { path: "/:letter" })
  });
  this.route("terms", function() {
    this.route("letter", { path: "/:letter" }, function() {
      this.route("term_id", { path: "/:term_id" });
    });
  });
});

Then just added a new this.get to the mirage config.

export default function() {
  this.namespace = "api";
  this.get("/term", function({ terms }, { queryParams }) {
    let { letter } = queryParams;
    let results = terms.all();
    if (letter) {
      const match = letter.toLowerCase();
      results = results.filter(t => t.term.toLowerCase()[0] === match);
    }
    return results;
  });
  this.get("/terms", function({ terms }, { queryParams }) {
    let { term, letter } = queryParams;
    let results = terms.all();
    if (letter) {
      const match = letter.toLowerCase();
      results = results.filter(t => t.term.toLowerCase()[0] === match);
    }
    if (term) {
      const match = term.toLowerCase();
      results = results.filter(t => t.term.toLowerCase().includes(match));
    }
    return results;
  });
this.get("/terms/:id");
}

Works like a charm. POW!

new-routes
new-routes1727×1326 991 KB

Have a great weekend!!

24

Woohoo! :tada: glad you got it working, that’s always a great feeling.

1 Like
25

'Twas outstanding. Now to make it play nice with this.