my API returns this value:
{"id":1,"name":"Test"}
In Angular I did this call to retrieve that value:
$scope.supplier = Suppliers.query({supplierId: $routeParams.id});
But now in my template I do this:
{{supplier.name}}
Even {{ supplier }} does not give me anything.
but this is empty. Why is this the case?
Thanks!
The query function returns a callback, try this:
Suppliers.query({supplierId: $routeParams.id}, function(suppliers) => {
$scope.supplier = suppliers[0];
});
Since query returns a list you need to take only the first from the list.
var supplier = Suppliers.query({supplierId: $routeParams.id},{_id:0,name:1});
$scope.supplier=supplier[0].name;
Related
I have a function in my controller that is making a call to a function defined in a service shared by that controller. I am able to make a call correctly, but the function returns an array and i want to get individual item from that array. Here is the snippet
ctrl.loadInterfaces = function(driver) {
angular.forEach(ctrl.driverInterfaces, function(value, key){
ctrl.interfaces = myservice.driverInfo(driver, value);
})
};
So here, driverInfo() will return an array, something like ['one', 'two'] but now i want to split that and put individually 'one' and 'two' into ctrl.interfaces and not like an array. Any idea how should i do that?
By the way ctrl.driverInterfaces is just another static array declared in the controller.
My html
<select>
<option ng-repeat="interface in ctrl.interfaces"
value="{$ interface }">{$ interface $}</option>
</select>
Inputs are much appreciated. Thanks
Try this
ctrl.loadInterfaces = function(driver) {
ctrl.interfaces = [];
angular.forEach(ctrl.driverInterfaces, function(value, key){
ctrl.interfaces = ctrl.interfaces.concat(myservice.driverInfo(driver, value));
})
};
I'm trying to store 1 or more values that are inside an array into a scope. This is the result of my JSONP service,
angular.callbacks._7({
"id":157336,"results":[
{"id":"53db3c790e0a26189a000d09","iso_639_1":"en","key":"ePbKGoIGAXY","name":"Trailer 3","site":"YouTube","size":1080,"type":"Trailer"},
{"id":"550df44b9251413554004d43","iso_639_1":"en","key":"KlyknsTJk0w","name":"Own it today","site":"YouTube","size":720,"type":"Trailer"},
{"id":"533ec6fcc3a3685448009ccc","iso_639_1":"en","key":"nyc6RJEEe0U","name":"Teaser","site":"YouTube","size":720,"type":"Trailer"},
{"id":"5376ab510e0a26141c0005a8","iso_639_1":"en","key":"zSWdZVtXT7E","name":"Trailer","site":"YouTube","size":720,"type":"Trailer"},
{"id":"545da247c3a3685362005187","iso_639_1":"en","key":"Lm8p5rlrSkY","name":"Trailer 2","site":"YouTube","size":1080,"type":"Trailer"}
]
})
And I'm trying to store all the key values inside a scope called $scope.youtubeTrailer
But if I do it like this,
$scope.youtubeTrailer = response;
console.log ($scope.youtubeTrailer)
The scope consists of an object (the movie) and inside that object is an array with the 5 id's. So what would be the correct selector for something like this?
If I search like this,
console.log ($scope.youtubeTrailer.key)
I get an 'undefined´
* EDIT *
I've tried to solution below,
movieAdd.trailer(movie.id)
.then(function(response){
$scope.youtubeTrailer =[];
console.log ($scope.youtubeTrailer)
angular.forEach(response.results, function(item){
console.log ('Hello world')
if (item.hasOwnProperty('key')) {
$scope.youtubeTrailer.push(item.key);
}
});
The console.log ($scope.youtubeTrailer) shows that the scope is empty. And the forEach function doesnt fire because the Hello log doesn't get shown in the console. If I change $scope.youtubeTrailer =[]; into $scope.youtubeTrailer = response; I do have the object in the scope but still the forEach doesn't fire.
* EDIT 2 *
By changinge response.results into response the forEach does fire.
* EDIT 3 *
I've got it somewhat working. I was getting the array in the scope, but when I saved the scope value in the create function it showed as null in the database. That's because I was trying to save an array. Using javascripts join I converted the array to a string which can be saved.
movieAdd.trailer(movie.id)
.then(function(response){
$scope.youtubeTrailer = [];
angular.forEach(response, function(item){
if (item.hasOwnProperty('key')) {
$scope.youtubeTrailer.push(item.key);
var youtubeArray = $scope.youtubeTrailer
var youtubeString = youtubeArray.join();
The code below basically is looping through the response.results array, which contains 5 objects. Each oject is assigned to the variable item. Check item has property of key, if true, add the value of item.key to $scope.youtubeTrailer.
$scope.youtubeTrailer =[];
angular.forEach(response.results, function(item) {
if (item.hasOwnProperty('key')) {
$scope.youtubeTrailer.push(item.key);
}
});
Here is the link for Angular ForEach.
$scope.youtubeTrailer isn't just an object, it contains an array and its inside that array that the key field is. So, you're going to need to access the five interior items with an array access. e.g. $scope.youtubeTrailer.results[0].key
I have this function in my service
function getSomeData() {
return $http
.get('/someData.json')
.then(itWorked)
.catch(onFail);
That returns all the records from that JSON file. What If I want just a single record for which I have the ID? This seems like it would be a simple search, but I'm coming up empty.
If it's an array you can certainly write your own find function:
var foundItem;
data.forEach(function(item){
if(item === someId){
foundItem = item;
}
});
Or better yet, if you are using Lodash (which I highly recommend), you can do it in one line:
var foundItem = _.find(data, {id: someId});
One approach would be using the $filter service to filter the record from the list.
var filterSelectedRecordFromList = function(
objectArray, expr) {
var filtered = $filter('filter')(objectArray,expr,true);
return filtered[0];
};
so in your case if the call the filterSelectedRecordFromList like below..
where data is the JSON list and someID is the Id that you want to search.
var filteredRecord = filterSelectedRecordFromList(data,{id:someId},true);
I'm trying to use a custom Angular directive with a custom attribute, i.e. :filterBy=:filter. This is being done with a custom directive like this:
<foo filterBy=location filter=ABC></foo>
The service:
function Foo($resource) {
return $resource(base + 'Foo');
}
The ngResource call:
var filterBy = attrs.filterBy;
var getSegments = Foo.get({filterBy: attrs.filter, limit: attrs.limit, offset: attrs.offset});
returns this:
http://localhost:8000/base/Foo?filterBy=ABC&limit=30 (notice it says "filterBy" instead of location")
It should be returning this resource instead:
http://localhost:8000/base/Foo?locations=Bar&limit=30
It seems the filterBy is being turned into a string in the ngResource call. I wan't it to use the value of the attrs.filterBy, but it doesn't like dot notation in the parameter value.
I've also tried this:
var getFilter = function() {
return attrs.filterBy;
};
But when I do that, the resource URL turns into:
http://localhost:8000/base/Foo?getFilter=Bar&limit=30
Note the "getFilter" is the parameter now. So is there any way to create a custom parameter?
var filterBy = attrs.filterBy;
var params = {limit: attrs.limit, offset: attrs.offset};
params[filterBy] = attrs.filter;
var getSegments = Foo.get(params);
When you write filterBy: value then filterBy is an identifier. It's static. It has no relation whatsoever to any variable.
params[filterBy] = attrs.filter; on the other hand dynamically adds a property and the value within the brackets is an expression that can be resolved to a string. So it can be a variable.
I have an array that contains my supplier list:
$scope.supplierList = [{id=1, name='supplier 1'}, {id=2, name='supplier 2'}];
Then I have a model(lets call it product) that I got from a service with values like:
id=1
name=Product A
supplier=supplier 1(this is an object reference)
When I load the product to a form for editing, I need to have 'supplier 1' be the selected option, I have tried different steps but nothing seems to work, my code is as follows:
<select ng-model="product.supplier" ng-options="supplier.name for supplier in supplierList">
<option value="">Select a Supplier</option>
</select>
And in the controller:
$scope.update = function (id) {//user clicks edit button, form modal shows up with filled up values because of model binding
$scope.product = Product.get({id: id});//retrieving the product
$scope.product.supplier = $scope.supplierList[1];//trying out if i can change the selected to something else, never works! Always defaults to select a supplier
//supplier is always deemed undefined
};
Any ideas? thanks!
I'm guessing that Product is created with $resource(..). What isn't obvious is that the Product.get(..) call will return an (almost) empty object at first, which will be filled with the data from the response once it is received. At the same time, any previous values in the object will be removed.
To set the supplier you would need to do something like
$scope.product = Product.get({id: id}, function (product) {
product.supplier = $scope.supplierList[1];
})
Take a look at https://docs.angularjs.org/api/ngResource/service/$resource and do consider going with basic $http calls instead. ngResource is nice and comfy at first, but it's abstractions soon becomes problematic as illustrated by your problem.
I suppose that Product.get({id: id}); is a call to a resource, so it will be executed asynchronously. Data that will come from the server will override your "$scope.product.supplier" assignment.
Try to change this code to:
$scope.update = function (id) {
$scope.product = Product.get({id: id}, function(){
$scope.product.supplier = $scope.supplierList[1];
});
};