After executing a query, I am left with an array from the resource:
.factory('Books', function($resource){
var Books = $resource('/authors/:authorId/books');
return Books;
})
I was wondering if there is a way to incorporate prototype methods into the array received from this query? (Please note, not directly onto array.prototype).
For instance, I wish to include functions like hasBookWithTitle(title) within the collection.
While considering ricick's suggestion, it is important to note that implementing a method on the array may present some challenges. Essentially, creating a wrapper around $resource and its instances is necessary for achieving this functionality. The issue lies within a specific line of code in angular-resource.js:
var value = this instanceof Resource ? this : (action.isArray ? [] : new Resource(data));
This code snippet sets up the return value from $resource. During the execution of an ajax request, "value" is populated and returned. After the completion of the request, the value is assigned to "value", but by reference using the angular.copy() method. Each element of the array (such as query()) will be an instance of the resource being operated on.
To extend this functionality, one approach could involve modifying the following code (untested snippet which might require adjustments):
var myModule = angular.module('myModule', ['ngResource']);
myModule.factory('Book', function($resource) {
var service = $resource('/authors/:authorId/books'),
origQuery = service.prototype.$query;
service.prototype.$query = function (a1, a2, a3) {
var returnData = origQuery.call(this, a1, a2, a3);
returnData.myCustomMethod = function () {
// Implement custom method logic here...
return returnData;
}
}
return service;
});
Admittedly, further tweaking may be required to make it fully functional, but this serves as a basic outline of the concept.
One effective approach might be to develop a personalized service that extends the resource, incorporating additional utility methods into it rather than directly modifying the default resource service's return values.
var myModule = angular.module('myModule', []);
myModule.factory('Book', function() {
var service = $resource('/authors/:authorId/books');
service.hasBookWithTitle = function(books, title){
//implement custom logic to return true or false
}
return service;
});
Subsequently,
books = Book.list(function(){
//verify within the on complete method
var hasBook = Book.hasBookWithTitle(books, 'someTitle');
})
Upon examining the code in angular-resource.js (specifically for the 1.0.x series), it doesn't seem possible to include a callback for default behavior (which, in my opinion, is the correct design).
If you only need the value in a single controller, you can provide a callback when calling query on the resource:
var books = Book.query(function(data) {
data.hasBookWithTitle = function (title) { ... };
]);
Alternatively, you could create a service that enhances the Books resource by passing all calls to get/query/save/etc., and then adding your method to the array. For example, see this plunk: http://plnkr.co/edit/NJkPcsuraxesyhxlJ8lg
app.factory("Books",
function ($resource) {
var self = this;
var resource = $resource("sample.json");
return {
get: function(id) { return resource.get(id); },
// implement any other necessary functions like save, delete, etc.
query: function() {
return resource.query(
function(data) { // success callback
data.hasBookWithTitle = function(title) {
for (var i = 0; i < data.length; i++) {
if (title === data[i].title) {
return true;
}
}
return false;
};
},
function(data, response) { /* optional error callback */}
);
}
};
}
);
Thirdly, and what I believe is a better approach depending on your needs, you can simply utilize the functional method by adding the hasBookWithTitle function to your controller or placing it in a utilities service if the logic needs to be shared.
Explaining a bit about the handleChange function, which takes the name of the state element to be associated with it. Is there a specific reason why it has to be structured like this: handleInputChange(property) { return e => { this.setSta ...
My issue is not related to cross site request problem, which is a common suggestion in search results for similar questions. When attempting to make an ajax request using jquery functions .get and .load, I'm receiving xhr.status 0 and xhr.statusText ...
While I know this question has been posed previously, I'm struggling to apply it to my current situation. In my MySQL database, I have a table named "subject" that includes columns for subject name and subject level. Here's an example: Subject ...
As a newcomer to javascript (although functional programming is no problem for me), I find myself questioning some of the design choices made by jQuery. Is it too late to make changes now, or are they simply too ingrained in the framework? For example, the ...
export class AppComponent { title = 'my-app'; constructor(private notifyService : NotificationService) {} ngOnInit() { socket.on("laravel_database_chat:test", function(message){ //I AM ATTEMPTING TO INVOKE THE NOTIF ...
I attempted to merge two different navigation bars, one sticky and the other responsive. The goal was to combine https://www.w3schools.com/howto/howto_js_navbar_sticky.asp with https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp Curr ...
I am facing a challenge with a component that dynamically renders either a main component or a loading component based on the data being loaded: // components/example import Component from 'components/component'; const Example = ({loaded}) =&g ...
Currently I am working on the following page: , where an embedded javascript form called infusionsoft (iframe form) needs to be made responsive at the request of my client. I'm wondering if there is a way to override the css or inject custom styles i ...
I am encountering issues while trying to utilize the onclick function as props. It shows an error message 'TypeError: onClick is not a function' when I click. What should I do? 7 | <Card 8 | onClick={() => onClick(dish ...
I am working on creating a mapping system that links companies with their logos. The goal is to display these logos on a google-map. While completing the company-logo association map, I noticed that some vessel names contain white spaces, causing a compil ...
Trying to utilize a dynamic name for a property of an object. For instance, within the function provided below, aiming to use the value stored in the variable 'catagoryId' to access the corresponding child element and assign it to the variable c ...
My problem arises when trying to individually control the arrow icons for each column in my COVID-19 data table. By using Angular methods, I aim to show ascending and descending arrows upon sorting but run into the challenge of changing arrows across all c ...
Struggling with setting up basic AngularJS functionality for a project, especially when trying to include angular-route. Both components are version 1.4.8. My approach involves using gulp-require to concatenate my JS files. Here is my main javascript file: ...
Using the HostListener directive, I am listening for the click event on elements of the DOM. @HostListener('click', ['$event.target']) onClick(e) { console.log("event", e) } Upon clicking a button tag, the "e" object contains the fol ...
On my registration form, users have the option to select an avatar from 2 choices: Select a default avatar Upload their own custom avatar This is how I have implemented it in my HTML page. <img id="preview" src="img/default_1.png"> The chosen av ...
Is there a way to reformat an array of JSON objects that has the following structure? [{"amount":3,"name":"Coca-Cola"},{"amount":3,"name":"Rib Eye"}] The desired output in plain HTML text would be: 3 - Coca-Cola 3 - Rib Eye What is the best approach to ...
In my web application built with AngularJS, I am dynamically creating objects. The goal is to allow users to load new events by clicking a button. To achieve this functionality, I need to determine the date of the last event loaded so that I can fetch the ...
Can the Locations object have a new property added to it? The property to be added is: 2:{ name: "Japan", lat: 36, lng: 138, description: 'default', color: 'default', url: 'default' } The current Location ...
Currently learning JSP and ajax simultaneously. In the process of creating a dynamic tab that can be added or removed using these steps. Looking to pass parameters from controller to the content area of the newly added tab. 1. When clicking on the &apos ...
I have been attempting to incorporate a multi-select feature (view at http://jsfiddle.net/eUDRV/318/) into my PHP webpage. While I am able to display the table as desired, pressing the buttons to move elements from one side to another does not trigger any ...