We Keep Coding

Using Fetch API with Rails application?

I am trying to use the Fetch API with my Rails application. I can pass parameters to the controller as part of a query string, but still can't figure out how to pass JSON data or where to find it in the controller. A sample call looks like the below. Where can I access my test data on in the controller? Happy Sunday :)
export const fetchControllerData = () => {
return fetch('api/users',), {
body: { "test": "test" }
})
.then(res => res.json());
};

I'm in the process of working out my own issues with fetch and Rails. But I'll take a stab at this.
I expect that fetch is using GET as the default method - which won't use the body at all. You will likely need to set the method to be POST to get the body through. Further to that you might need to set the Content-Type header (to application/json) in order to send the data through as JSON.

May be u need to send params in this way for get request and use this link for https://github.com/axios/axios
export const fetchControllerData = () => {
params = { body: { "test": "test" } }
return HTTP.get('api/users', params)
.then((response) => {
if (response.success) {
// do something here
} else {
// handle error condtion here
}
});
}

Angular wp-api cannot get headers for X_Total_Pages

I'm using Angular wp-api module and each time my $resource request responds I can see the ResponseHeaders in Chrome with X_Total_Pages and other header information. But I cannot add them to the scope.
Here is my controller...
.controller('newslettersController', ['$scope','$stateParams','$sce','WPFactory', function ($scope,$stateParams,$sce,WPFactory) {
$scope.newsletters = WPFactory.query({
param1: 'posts',
page: $scope.pageNum,
'filter[cat]': 8,
'filter[posts_per_page]' : 10,
'filter[orderby]': 'ID'
}, function(data, reponseHeaders) {
$scope.header = reponseHeaders('X_Total_Pages');
});
});
}]);
And my factory...
.factory("WPFactory", function($resource) {
var dataResponse = $resource('http://www.example.com/wp-json/:param1/:param2/:param3/:param4/:param6/:param7', {}, {
get: {
method: 'GET'
}
});
return dataResponse;
})

is this jeffsebrings angular module? If it is I think you need to inject your service with wpAPIResource:
.factory("WPFactory", function($resource, wpAPIResource)
and use it to query the json rest api (wp-api).
Also, not sure if your controller is passing the query object quite right:
I would change up your factory something like this:
.factory("WPFactory", function(wpAPIResource) {
var posts_query = function(args) {
return wpAPIResource.query(args);
};
return posts_query;
})

Angular $resource remove question mark from REST querystring

Hi i was wondering if anyone could help me change the format of my querystring. Currently it is in the following format:
/api/foo?id=AD12JK23
but how would I go about to changing it to the following format:
/api/foo/AD12JK23
my code is as follows:
.state('foo-details', {
url: '/foo-details/:fooRefrence'
}
})
var ref = $stateParams.fooRefrence;
$scope.fooDetails = myApi.Foo.get(
{
id: ref
}
);
.factory('myApi', ['$resource', function ($resource) {
return {
Foo: $resource('/api/foos', {id: '#ref' },
}
}])
Thanks for any help.

Check out the resource reference for the appropriate way to do this.
https://docs.angularjs.org/api/ngResource/service/$resource#usage
I think if you write your resource url like this, it will solve the problem:
.factory('myApi', ['$resource', function ($resource) {
return {
// Add :id at the end of the url
// Also change #ref to #id, the word you use after # is the same as
// the key of the object you use to call the resource with
Foo: $resource('/api/foos/:id', {id: '#id' },
}
}])

Cache from $resource service with specific querys

I'm extending $resource with some methods, which using query, just for example:
var Resource = $resource(url, {}, {
query: {
cache: true
}
})
Resource.getByCategory = function (categoryId) {
return Resource.query({ categoryId: categoryId })
}
Resource.getBySearch = function (text) {
return Resource.query({ search: text })
}
I want to cache only the data which comes from getByCategory. as you can see, both methods use query, so I cannot define in the query configuration level - as I'm doing now and the data is cached for the both methods.
Any ideas? I thought about somehow using decorator for cached methods, not sure if it is going to help.

AngularJs ngResource for nested api resurces with different endpoints

I have this endpoints
/clients/:id
/bills/:id
/clients/:id/bills
I'm trying to create some resources with angular-resource to represent my API.
Clients and Bills Resources
I created a resource for the clients,
.factory('Clients', function($resource){
return $resource('/clients/:id')
})
.factory('Bills', function($resource){
return $resource('/bills/:id')
});
Those worked fine.
The Problem
My problem is when I wanted to define a resource to represent the bills of a client calling the endpoint /client/:id/bills
I thought that this should be a Bills resource with a method getFromClient() or something like that, as it will return an array of Bills from the client. But I have already use the Bills name. And the endpoint is different to the one already defined.
Any idea how to structure this?

I think what I was loooking for is now in Anguar 1.1
.factory('Bills', function($resource){
return $resource('/bills/:id',{}, {
get: {
method: 'GET',
params:{
clientId: '#clientId'
}
},
'getFromClient': {
method:'GET',
params: {
clientId: '#clientId'
},
url: host + "/clients/:clientId/bills",
isArray: true
}
})
});
Now you can add a url property to the method declaration to override the main url.
If you want to go with a library that enable you to solve this problema and many others, you could try https://github.com/platanus/angular-restmod
Here is an example:
.factory('Client', function(restmod){
return restmod.model('clients', {
bills: { hasMany: 'Bill' }
});
}
.factory('Bill', function(restmod){
return restmod.model('bills');
}
.controller('myController', function(Client){
$scope.client = Client.$find(1);
$scope.client.bills.$search();
});

Check the ngResource docs... Scroll down to the first example heading:
http://docs.angularjs.org/api/ngResource.$resource
It's kinda confusing because they're not doing it right in the example... lol
I believe it would look something like:
.factory('Clients', function($resource){
return $resource('/clients/:id', {id:'#id'})
})
.factory('ClientBills', function($resource){
return $resource('/clients/:clientId/bills/:id', {clientId:'#clientId', id:'#id'})
});
I haven't tested this, but I think that's right. =)
UPDATE
You would then access them like so:
.controller('MyCtrl', function ($scope, $routeParams, Clients, Bills) {
$scope.client = Clients.get({id:$routeParams.clientId})
$scope.bills = ClientBills.get({clientId:$routeParams.clientId})
})
I also changed the name of the service to "ClientBills", as it is more specific to the task, and you may want a "Bills" service that doesn't require a client id...