My application has a service that is called in the controller. This service sends down an array of objects. My controller doesn't need all of the data that is being returned, instead I would like to only grab the data I need. Is there a way to construct the array of objects being returned so that I only include my needed data?
Example:
$scope.information = [];
var loadData = function() {
var promise = myService.getData();
promise.then(function(data) {
$scope.information = data.Information;
},
function (dataError) {
console.log(dataError);
)};
};
In my example above, data.Information is an array of objects that look like this:
{
id: 1,
name: 'joe',
age: '21',
hair: 'blue',
height: '70',
}
In my controller I only need the 'id' and 'name' properties, not the others. Shouldn't I want to only retrieve the necessary data? And can I construct my $scope variable so I only have this data in the objects, as to not include any unnecessary information, resulting in bloating the front end?
It looks like you want to apply a map operation to the list. That is: for each item in the list, you'd like to have every item in the list be modified in some way. You can use Array.prototype.map to accomplish this. Here is a link to the MDN docs for reference.
E.g.
$scope.information = data.Information.map(function(element) {
return {
id: element.id,
name: element.name
}
});
This should be easy - you have many options to achieve this, here's one:
$scope.information = [];
var loadData = function() {
var promise = myService.getData();
promise.then(function(data) {
$scope.information = data.Information.map(function(d) {
return {
id: d.id,
name: d.name
};
});
},
function (dataError) {
console.log(dataError);
)};
};
(I haven't tested this code so you may need to tweak it around a bit)
Tamas' answer is a good example of filtering the data AFTER it has been fetched from the 'service'. In the application I'm working on, it can sometimes expensive to calculate some of the fields of the records from our 'service', which is actually a backend server with a REST API. We wind up doing the equivalent of
var loadData = function() {
var promise = myService.getData({fields: "name,id"});
promise.then(function(data) {
$scope.information = data;
});
},
function (dataError) {
console.log(dataError);
)};
};
Then the service, or backend, does the filtering for us and the only data sent back is exactly what we need.
If you can implement (or convince the service maintainers to implement) this kind of filtering, it's another approach you can consider.
If you wish to filter the data in the service:
app.service("myService", function("$http") {
this.getData() = function() {
return $http.get(url)
.then(function(response) {
return response.data;
});
};
this.informationGet = function() {
var promise = this.getData();
var newPromise = promise.then(function(data) {
var information = data.Information.map(function(d) {
return {
id: d.id,
name: d.name
};
});
return information;
});
return newPromise;
};
});
Usage:
var promise = myService.informationGet();
promise.then(function(information) {
$scope.information = information;
},
function (dataError) {
console.log(dataError);
throw dataError;
)};
By returning data to the .then method of a promise, one creates a new promise that resolves to the value of the returned data.
Related
This is in the context of a node express route. I receive a get request with a query param that is a list of IDs. Now I need to make a call-out for each ID and store the result of the callout in an array or object. Each element of the first array (containing the IDs) need to be mapped to its corresponding result from the call-out. I don't have a way to modify the endpoint that I'm hitting from this route so I have to make single calls for each ID. I've done some research and so far I have a mixture of code and sudo code like this:
const ids = req.query.ids;
const idMembers = Promise.all(ids.map(async id => {
// here I'd like to create a single object or associative array
[ id: await callout(id); ]
}));
When all promises resolved I need the final result of idMembers to be like: (The response will be an object with nested arrays and objects I've just simplified it for this post but I need to grab that from the res.payload)
{
'211405': { name: 'name1', email: 'email1#test.co' },
'441120': { name: 'name2', email: 'email2#test.co' },
'105020': { name: 'name3', email: 'email4#test.co' }
}
Oh and of course I need to handle the callout and the promise failures and that's when my lack of experience with javascript becomes a real issue. I appreciate your help in advance!!
Some extra thought I'm having is that I'd have to map the results of the resolved promises to their id and then in a separate iteration I can then create my final array/object that maps the ids to the actual payloads that contain the object. This is still not answering any of my questions though. I'm just trying to provide as much information as I've gathered and thought of.
Promise.all returns an array of results (one item per each promise).
Having this temporary structure it is possible to build the needed object.
const arrayOfMembers = Promise.all(ids.map(async id => {
// ...
return { id, value: await callout(id) } // short syntax for { id: id, value: ... } (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer)
}));
// arrayOfMembers = [
// { id: 211405, value: { name: 'name1', email: 'email1#test.co' } },
// ...
// ]
In pure JS it can be done with for loop or .forEach() call to iterate:
const res = {};
arrayOfMembers.forEach(el => {
const { id, value } = el;
res[el] = value;
});
or by using a single reduce() call
const res = arrayOfMembers.reduce((accumulator, el) => {
const { id, value } = el;
return { ...accumulator, [id]: value };
}, {});
in both cases res will be:
// res = {
// '211405': { name: 'name1', email: 'email1#test.co' },
// ...
// }
P.S.
There is a handy library called lodash. It has tons of small methods for data manipulation.
For example, _.fromPairs() can build an object from [[key1, value1], [key2, value2]] pairs.
As you mentioned you have lodash, so I think the following should work:
const arrayOfKeyValuePairs = Promise.all(ids.map(async id => {
// ...
return [ id, await callout(id) ] // array here so it matches what fromPairs needs
}));
const res = _.fromPairs(arrayOfKeyValuePairs);
So, I'm experimenting with AngularJS, and, as an exercise, figured I would make a simple application using the Steam API. I have made a simple Spring Boot Rest service, which provides a reverse proxy service for the Steam API, in such a way that certain calls can be forwarded. At this time there are two actions:
/user/ provides a list of steam id's.
/user/:id/games provides the output of the following api:
http://api.steampowered.com/IPlayerService/GetOwnedGames/v0001/?key=MY_STEAM_KEY&steamid=STEAM_ID&format=json
which returns an answer in the following format:
{
"response":{
"game_count":3,
"games":[
{
"appid":70000,
"playtime_forever":0
},
{
"appid":550,
"playtime_forever":0
},
{
"appid":274900,
"playtime_forever":0
}
]
}
}
What I want to achieve is to extract the games array from this json object, and append it to the correct user. And I want to do this for all users. I have achieved something close to what I want using the $resource object, by defining the following factories:
angular.module("SAM.Resources", [])
.factory("UserList", ["$resource",
function ($resource) {
return $resource('/user');
}])
.factory("GamesList", ["$resource",
function ($resource) {
return $resource('/user/:id/games', {
id: '#id'
});
}
]);
And then in my controller use the following:
UserList.query(function(response){
$scope.users = response ? response : [];
for(index=0; index < $scope.users.length; ++index){
user = $scope.users[index];
$scope.users[index].games = GamesList.get({id:user.id});
}
});
This is close to what I want, however, it returns something of the format:
{
"id": "76561198119953061",
"name": "Yuri",
"games": {
"response": {
"game_count": 3,
"games": [
{
"appid": 70000,
"playtime_forever": 0
},
{
"appid": 550,
"playtime_forever": 0
},
{
"appid": 274900,
"playtime_forever": 0
}
]
}
}
}
And I don't want the games.response.games construction. I have tried to change it to:
$scope.users[index].games = GamesList.get({id:user.id}).response.games;
which fails, seems logical, as it is a promise, and doesn't immediately contain the response object.
I've also tried to use something like
GamesList.get({id:user.id}), function(response){
angular.extend(user, response);
});
Which does indeed append the response to the user object, only the user object is always the last value in the array by the time the promise resolves.
So basically my question comes down to: How can I extend my User object with the Games list?
You need to change your code around a bit:
UserList.query(function(response){
$scope.users = response ? response : [];
for(index=0; index < $scope.users.length; ++index){
user = $scope.users[index];
(function(index, id){
GamesList.get({id: id}, function(response){ // Get the games from the response
$scope.users[index].games = response.response.games;
}));
})(index, user.id)
}
});
In the for loop, user keeps changing value. By the time the first GameList.get has a value returned, your loop will be at the last user already.
Wrapping that in an IIFE separates those variables in a separate scope.
for(index=0; index < $scope.users.length; ++index){
user = $scope.users[index];
$scope.users[index].games = GamesList.get({id:user.id}, function(response){
angular.extend(user, response);
}));
}
When you do that, the user variable will change at every step. But the anonymous callback will be executed later. So only the last user is used.
You can fix that by using an anonymous function as a scope with forEach :
$scope.users.forEach(function(user) {
$scope.users[index].games = GamesList.get({id:user.id}, function(response){
angular.extend(user, response);
}));
});
If you want to avoid the user.games.response.games, you need to merge the objects in a different way.
$scope.users.forEach(function(user) {
$scope.users[index].games = GamesList.get({id:user.id}, function(response){
user.games = response.games;
user.games_count = response.games_count;
}));
});
I'm trying to deal with a server response, and am a little confused how to turn the json response into Backbone Models.
My Backbone model looks like so:
Entities.Recipe = Backbone.Model.extend({
defaults: {
id: '',
name: '',
introduction: ''
},
parse: function (response)
{
if(._isObject(response.results)){
return response.results
else {
return response
}
})
Entities.RecipeCollection = Backbone.Collection.extend({
url: 'recipes',
model: Entities.Recipe
)}
var API = {
getRecipeEntities: function (){
var recipes = new Entities.RecipeCollection()
var defer = $.Deferred()
recipes.fetch({
url: 'http://3rdpartyApilocation.com/recipes'
success: function (data) {
defer.resolve(data)
}
})
var promise = defer.promise()
$.when(promise).done(function (fetchedData)
{})
return promise
}
RecipeManager.reqres.setHandler('recipe:entities', function()
{
return API.getRecipeEntities()
}
And the response.results is an Array of objects - with each object having an id key, a name key and an introduction key. But because I am so inexperienced with Backbone I have no idea how to map those results to the model?
I have installed Chromes Marionette inspector and when I look at the entire array of results seems to be passed to the model, rather than each individual object within each response.result being set to each individual model. Sorry if I can't be more clear - I'm very new to Backbone...
Perhaps your confusion is because you're in fact able to use parse on a model or on a collection. And from your explanation it looks like the response.results object returns a list of objects that you want to become models in your application. But because you're catching that object in a model, the model doesn't know what to do with that array.
Let's say you have a response like this:
{
"status": "ok",
"results": [
{
"id": 1,
"name": "Pie"
}, {
"id": 2,
"name": "Rice"
}, {
"id": 3,
"name": "Meatballs"
}
]
}
Then you would just use parse on your Collection to let it know the response isn't array itself, and help it find it in the results property.
Here's a working example:
var Recipe = Backbone.Model.extend();
var Recipes = Backbone.Collection.extend({
model: Recipe,
url: 'http://www.mocky.io/v2/56390090120000fa08a61a57',
parse: function(response){
return response.results;
}
});
var recipes = new Recipes();
recipes.fetch().done(function(){
recipes.each(function(recipe){
/** Just demo of the fetched data */
$(document.body).append('<p>'+ recipe.get('name') +'</p>');
});
});
<script src='http://code.jquery.com/jquery.js'></script>
<script src='http://underscorejs.org/underscore.js'></script>
<script src='http://backbonejs.org/backbone.js'></script>
I'm quite new to Backbone so I am getting into some problems I can't quite figure out.
I have a Backbone collection with a bit over 100 items. I want to filter these with an array of ids, that is working fine, but I want the order of the items also based on this array's order of items. That is not working. The other sorting methods seems to be asciibetical based, that's not what I need either. Is it possible to get items using this filter, and then also put them into the collection in the order I've defined?
I have an array of id's that I filter with, this array looks like this:
var dDefaultItems = ['1','2','146','3','4','9','26','8','96','10','11','54','145','273','38'];
The code for the collection and filtering looks like this:
var ChannelCollection = Backbone.Collection.extend({
fetch : function() {
var params = _.extend({}, arguments, {
data : {
"groupnumber" : "1000"
}
});
this.constructor.__super__.fetch.apply(this, [params]);
},
model : Channel,
url : function () {
return utility.apiUrl('/myurl/tothething');
},
filterData: function(params) {
this.originalModels = this.models.slice();
_.each(params, function(val, key){
if (typeof val !== 'object') val = [ val ];
this.models = _.filter(this.models, function(model){
return _.indexOf(val, model.get(key)) !== -1;
}, this);
}, this);
return this.reset(this.models).toJSON();
},
parse : function(json) {
return json.channelInfoList;
}
});
Then I render this in a view with this code (there's other bits of code for defining model and other attributes that I don't think is relevant, I may be wrong, but I'm thinking someone will know what I need from looking at this.)
var ChannelListView = Backbone.View.extend({
initialize: function() {
var _this = this;
currentChannelList = new ChannelCollection();
currentChannelList.once("sync", function() {
_this.render();
});
currentChannelList.fetch();
},
render : function() {
var _this = this;
$(_this.el).empty();
dust.render("list-channels", { channelList : currentChannelList.filterData({id: dDefaultItems})} , function(err, html) {
var $el = $(html).appendTo($(_this.el));
});
}
});
Backbone collections are automatically sorted by the order of insertion, unless you implement Collection#comparator. The problem is that your filtering algorithm is not producing an ordered output.
If you need to maintain an ordered collection only when filtering by id, I would suggest implementing a separate method, because seach by id is far faster compared to search by arbitrary attributes:
filterById: function(idArray) {
return this.reset(_.map(idArray, function(id) { return this.get(id); }, this));
}
Usage:
collection.filterById(['1', '2', '146', '3', '4', '9', '26', '8', '96', '10', '11', '54',' 145', '273', '38']);
I have 2 models and one collection. JobSummary is a model, JobSummaryList is a collection of JobSummary items, and then I have a JobSummarySnapshot model that contains a JobSummaryList:
JobSummary = Backbone.Model.extend({});
JobSummaryList = Backbone.Collection.extend({
model: JobSummary
});
JobSummarySnapshot = Backbone.Model.extend({
url: '/JobSummaryList',
defaults: {
pageNumber: 1,
summaryList: new JobSummaryList()
}
});
When I call fetch on the JobSummarySnapshot object, it gets everything... Except when I move through the summaryList collection they are all of type object and not JobSummary.
I suppose this makes sense since other than the defaults object, it doesn't know that the summaryList should be of type JobSummaryList. I can go through each item and convert it to a JobSummary object, but I was hoping there was a way to do it without having to do it manually.
Here's my test code (working jsfiddle here):
var returnData = {
pageNumber: 3,
summaryList: [
{
id: 5,
name: 'name1'},
{
id: 6,
name: 'name2'}
]
};
var fakeserver = sinon.fakeServer.create();
fakeserver.respondWith('GET', '/JobSummaryList', [200,
{
'Content-Type': 'application/json'},
JSON.stringify(returnData)]);
var callback = sinon.spy();
var summarySnapshot = new JobSummarySnapshot();
summarySnapshot.bind('change', callback);
summarySnapshot.fetch();
fakeserver.respond();
var theReturnedList = callback.getCall(0).args[0].attributes.summaryList;
_.each(theReturnedList, function(item) {
console.log('Original Item: ');
console.log(item instanceof JobSummary); // IS FALSE
var convertedItem = new JobSummary(item);
console.log('converted item: ');
console.log(convertedItem instanceof JobSummary); // IS TRUE
});
UPDATE:
It occurred to me that I could override the parse function and set it that way... I have this now:
JobSummarySnapshot = Backbone.Model.extend({
url: '/JobSummaryList',
defaults: {
pageNumber: 1,
summaryList: new JobSummaryList()
},
parse: function(response) {
this.set({pageNumber: response.pageNumber});
var summaryList = new JobSummaryList();
summaryList.add(response.summaryList);
this.set({summaryList: summaryList});
}
});
This works so far. Leaving the question open in case someone has comment on it....
Your parse() function shouldn't set() anything, its a better practice to just return the attributes, Backbone will take care of setting it. e.g.
parse: function(response) {
response.summaryList = new JobSummaryList(response.summaryList);
return response;
}
Whatever you return from parse() is passed to set().
Not returning anything (which is like returning undefined) is the same as calling set(undefined), which could cause it not to pass validation, or some other unexpected results if your custom validate()/set() methods expects to get an object. If your validation or set() method fails because of that, the options.success callback passed to Backbone.Model#fetch() won't be called.
Also, to make this more generic, so that set()ing to a plain object from other places (and not only from the server response) also effects it, you might want to override set() instead:
set: function(attributes, options) {
if (attributes.summaryList !== undefined && !(attributes.summaryList instanceof JobSummaryList)) {
attributes.summaryList = new JobSummaryList(attributes.summaryList);
}
return Backbone.Model.prototype.set.call(this, attributes, options);
}
You might also find Backbone-relational interesting - it makes it much easier to deal with collections/models nested inside models.
edit I forgot to return from the set() method, the code is now updated