Front end for search - having a hard time with data store concepts

Learning Team
1

I have an existing search app I built on the server-side that uses elasticsearch results processed and jsonified by python/flask. On the client side, it’s using JS/jQuery and handlebars to parse and present the data.

I’d like to take it one step further and build it in ember. My app seems perfect for an SPA. The “data down” is search results, aggregations (faceting/filters) and meta stuff (pagination, hits, etc.) The “actions up” are filters, sorting, page size, and paging navigation.

I feel like I’ve hit a wall and am hard time figuring out the data store - i.e. how to get my data into it so I can bind actions. Can somebody point me in the right direction?

My existing JSON API is accessed like this:

http://localhost:8000/search?q=shirt&paging=18&filter-price=100

and it returns JSON like this:

{
  "aggregations": {
    "breadcrumb": [], 
    "color": [], 
    "price": [], 
    "size_apparel": [],
    "size_jewelry": []
  }, 
  "meta": {
    "agg_list": [], 
    "default_sort": "", 
    "key_translations": {}, 
    "paging": 18, 
    "paging_options": [], 
    "sort_methods": [],
	"from": 0, 
	"hits": 89, 
	"pages": 5, 
	"q": "shirt"    
  }, 
  "results": [
    {
      "creation_date": "", 
      "image": "", 
      "images": {
        "altimg1": "", 
        "large": "", 
        "regular": "/", 
        "small": ""
      }, 
      "name": "This Product", 
      "price": "19.95", 
      "skuid": "ABC123", 
      "url": "shirt.html"
    }, 
    {...}, 
    {...}
  ] 
}

Is this usable or do I need to rewrite the back-end?? I’ve tinkered with accessing the data and have something very rough working. I can actually see the ‘results’ data, but I have NO IDEA how to access the ‘meta’ and ‘aggregations’ data. I think this is “multiple models in the sam payload” and RSVP.hash should work…but ember-data seems to have a requirement that each model have an id. That makes sense for the “results” model, but not for aggregations and definitely not for meta.

For now I just want to get it to show up.

For starters, my adapter is:

export default DS.RESTAdapter.extend({
	host: 'http://localhost:8000',
	pathForType() {
		return 'search';
	}
});

Test controller is:

export default Ember.Controller.extend({
  queryParams: ['q','paging'],
  q: 'shirt',
  paging: '18'
});

my ‘result’ model is:

const { attr } = DS;

export default Model.extend({
	'creation_date': attr('string'), 
	'has_pricerange': attr('string'), 
	'image': attr('string'), 
	'name': attr('string'), 
	'price': attr('string'), 
	'skuid': attr('string'), 
	'url': attr('string')
});

route:

export default Ember.Route.extend({
  model(params) {
    return this.store.query('result', { 
    	q: params.q,
        paging: params.paging
    });   
  }
});

serializer:

export default DS.RESTSerializer.extend({
	primaryKey: 'skuid'
});

This is so easy to do with jquery - you just $.get and then access the data with object notation. I know ember is not jquery, but it seems like it should be easier to access data. Am I missing something? Taking the wrong approach? Should I start from scratch?

2

Overall you are doing great. One thing from me: you query /search and get the big JSON but need only “results” part of it - you should handle this in serializer (override normalize function to return something along the lines of this._super(hash.results)).