Discovering nested routes in Ember.js through search functionality

I am currently working on implementing a search functionality within a nested route that shares a model.

Below is an example of my code:

The "Products" and "Search" functionalities return a JSON response.

Router

Market.Router.map ->
    @resource 'products'
    @resource 'search', { path: "products/search" }
    @resource 'product', { path: "products/:product_id" }

The API URL for the rest adapter that I'm trying to reach is as follows:

"rope"

I have defined an action inside a header menu controller for handling the search functionality.

How can I retrieve records within a nested route?

Market.HeaderMenuController = Ember.ArrayController.extend({
    searchText: null,
    actions: {
        searchResults: function(){
             this.store.find('product', 'search?search_terms='+this.searchText);
             this.store.find('search', { "search_terms":this.searchText });
        }
    }
});

However, I am encountering the following errors:

Error: Assertion Failed: You must include an id for Market.Product in an object passed to push

Uncaught Error: Assertion Failed: Error: Assertion Failed: You must include an id for Market.Product in an object passed to push

javascriptsearchember.jsnested-routes

Answer №1

The issue you're encountering stems from the JSON data returned by your this.store.find method in Ember. In order for Ember-data to work properly, all model objects must include an id property. It seems that the JSON response from your API does not contain this required id property.

To fix this error, ensure that the JSON data being returned includes an id property for each 'product' object. Once you make this adjustment, the error should be resolved.

Answer №2

My initial method may not be the most efficient, but there are likely better alternatives available.

If you want to create a nested resource for search functionality, you can follow these steps.

The API endpoint used was

"rope"

I implemented a custom adapter specifically for the search route

Market.SearchAdapter = Market.ApplicationAdapter.extend(
  namespace: "v1/products"
)

To customize pluralization for search and avoid using a "searches" endpoint

Ember.Inflector.inflector.rules.uncountable['search'] = true;
inflector = Ember.Inflector.inflector;
inflector.irregular('search', 'searches');

You can now perform a store find operation for search queries

this.store.find('search', { 'search_terms': this.searchText });

Using the previously defined endpoint.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Invoke the express function on the client using the callable method

When I'm listening on a local port with my browser, the following method will return Hello world. //Node app.get('/', (req,res)=>{ res.send('Hello world') }); I've successfully exported the app as a ca ...

javascriptfirebaseexpressgoogle-cloud-functions

Detecting the presence of a file on a local PC using JavaScript

In the process of creating a Django web application, I am exploring methods to determine if a particular application is installed on the user's local machine. One idea I have considered is checking for the existence of a specific folder, such as C:&bs ...

javascripthtmldjangofile

Is it possible to bind a function to data in Vue js?

Can a function be data bound in Vue? In my template, I am trying something like this: <title> {{nameofFunction()}}</title> However, when I run it, it simply displays 'native function' on the page. Any insights would be appreciated ...

javascriptfunctionvue.jsdata-binding

Error in finding the element with Selenium webdriver 2.0 was encountered

I can't seem to find the element with the specified class name. Here's a snippet of the HTML code: <a class="j-js-stream-options j-homenav-options jive-icon-med jive-icon-gear" title="Stream options" href="#"></a> I attempted to gen ...

javajavascriptseleniumxpath

Guide to establishing intricate conditions for TypeORM insertion

When attempting to insert data based on a specific condition, such as if shopId = "shopA", I want to include the shopdetail. In order to achieve this, I have implemented the following business logic, which is somewhat complex. Is there a more ef ...

javascripttypescripttypeorm

Why does my script seem to be missing from this GET request?

Encountering an issue while setting up a page using npm and grunt. Request URL:http://localhost:9997/bower_components/requirejs/require.js Request Method:GET Status Code:404 Not Found The problematic html code is as follows: <script> ...

javascriptnpmgruntjs

Node.js and Express.js fails to transmit files to clients

Attempting to send a gif to the client for future use in CSS, but encountering a 404 error in the console log. The gif is located within the public directory. Server: var app = require('express')(); var http = require('http').Server(a ...

javascriptcssnode.jsexpress

Create a customizable Tree structure that includes checkboxes for each item and features drag

I am currently working on incorporating a Tree view with checkboxes and drag & drop functionality in Vue. However, I am unsure of where to begin. While I have successfully implemented checkboxes, I am struggling to figure out how to enable the feature whe ...

javascriptvue.jsvuejs2

Setting a default value in a dynamic dropdown using AngularJS

I could really use some assistance with my issue as I am fairly new to working with AngularJS. My dilemma is related to setting the default value in a select option when there is only one item available due to it being a dynamic select option. Though there ...

javascriptangularjs

Exploring alternatives to setTimeOut() for precise timing of Javascript events, especially when incorporating third party events

Here is the HTML element stack that I am working with: <div class="btn-group btnSortAssType" data-toggle="buttons"> <label class="btn ink-reaction btn-primary active"> <input type="checkbox" value="m">Model </label> ...

javascriptsettimeout

What is the best way to combine an array into a single string and insert it into a textarea with line breaks?

My current goal involves executing the following code with no success: var arr = ['one', 'two','three'] const mydiv = document.createElement('textarea') mydiv.innerText = arr.join('\r\n') docum ...

javascriptarrays

Issue with date range filter functionality not functioning as expected

Struggling to get the date range filter to function properly. Selecting a date triggers it, but nothing is being added to the var filter. I've spent hours trying to solve this issue with no progress. html <div class="form-group"> <input ...

javascriptangularjsfilter

Implement AJAX and PHP to submit form data along with the page ID and session information

I am currently developing a school book library website project that allows students to browse and select books, as well as send requests to the librarian to borrow them. However, I am still learning jQuery and facing some challenges in handling issues. H ...

javascriptphpjqueryajax

Here is a way to trigger a function when a select option is changed, passing the selected option as a parameter to the function

Is there a way to call a function with specific parameters when the value of a select element changes in Angular? <div class="col-sm-6 col-md-4"> <label class="mobileNumberLabel " for="mobilrNumber">Select Service</label> <div cla ...

javascriptangulartypescript

Struggling to retrieve CSS property from a child element?

Check out this HTML snippet: <div id="ctr" class="faden-slider-container"> <div class="conteneur-image" ></div> <div class="conteneur-image" ></div> <div class="conteneur-image" ></div> </div> ...

javascriptangularjshtml

Tips for halting the navigation bar when scrolling

Creating a Navigation Bar: <div class="navigation-bar"> <div class="item">Home</div> <div class="item">About us</div> <div class="item">Our Services</div> <div class="item">Contact us</div ...

javascripthtmlcss

Progressive rendering of a substantial mesh using three.js

How can I efficiently render a large static mesh in three.js, even if it's 2 GB with tens of millions of polygons? My plan is to stream the mesh geometry buffers into indexedDB and render them progressively to the screen, all while maintaining an int ...

javascriptperformancegraphicsthree.jswebgl

Sorting Angular components in reverse alphabetical order from A to Z

I feel like the answer to this problem is staring me right in the face, but no matter how hard I look, I just can't seem to find it. When dealing with a large ng-repeat, I have multiple sort options that I pass as an array. The user has the ability t ...

javascriptangularjssorting

Creating an expandable discussion area (part II)

After checking out this query that was posted earlier, I am interested in implementing a similar feature using AJAX to load the comment box without having to refresh the entire page. My platform of choice is Google App Engine with Python as the primary lan ...

javascriptajaxgoogle-app-engine

What is the best way to effectively clear memory in THREE.js?

After successfully rendering the model, rotating and zooming work perfectly. However, when attempting to clear the scene by clicking the button#clear, issues arise. The expectation is to traverse through the scene, add its children to an array, iterate ov ...

javascriptthree.js