how to push scope value inside the array in array in angularjs - angularjs

hi all i am using angularjs i am trying to do push the scope variable to another scope array i paste my code also my need my scope array look like this here i have get the value from two scope and push into one scope variable it's work fine my need is i want push the $scope.ViewGetMaterialStreams value inside the Materialselection id when i expand the id i need one array called name how to declare help how to do this
$scope.Materialselection ={id: [?i need the Namecolumn here in array]};
for(var i=0 ;i<$scope.BFMaterial.length;i++) {
$scope.Materialselection.stream.push($scope.BFMaterial[i]);
$scope.Materialselection.stream.push($scope.ViewGetMaterialStreams[i].name);
}
here i exapnd 0 i get output id:121 look like this now my need is when i expand 0 i need to show expand 0 i want show id :12121,name:dfdf

try this
$scope.Materialselection.stream =[];
$scope.BFMaterial.forEach(function(item, index) {
var obj = {};
obj.id = item.id;
obj.name = $scope. ViewGetMaterialStreams[index].name;
$scope.Materialselectio.stream.push(obj);
});

You can do it in following way:
$scope.Materialselection =[];
angular.forEach($scope.BFMaterial,function(item, index) {
var obj = {
id: item.id,
name: $scope.ViewGetMaterialStreams[i].name
};
$scope.Materialselection.push(obj);
});

Related

Iterating over the array returned from a function in another service in angularjs

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));
})
};

How to get values from ng-repeat in protractor?

<div ng-repeat="obj in list">
</div>
This obj is having 6 properties like name, country, state, city, street, and contact. I have written following code for this but it is giving me undefined as the value if i try to fetch the stored value in obj.
var elm = element.all(by.repeater('obj in list'));
elm.then(function(obj){
console.log("Number of Rows : "+ rows.length);
for(var i=0; i< rows.length; i++){
console.log("App name : " + rows[i].name);
}
});
This is printing "App name : undefined" only.
Keep in mind that you are using promises so you can't log a unresolved promise. All executions in Protractor are promises.
Secondly, you are using the rows, but you never defined it. Is rows the same as obj?
Third, try to avoid the a for loop with Promises. It's better to use for example the each from protractor. If you do that your code looks like this
var elm = element.all(by.repeater('obj in list'));
elm.each(function(obj, index) {
// Will print 0 First, 1 Second, 2 Third.
obj.getText().then(function (text) {
console.log(index, text);
});
});
firstly, the ng-repeat does not contain an object, it contains a list. in your case, an array.
if you have nested lists (ng-repeat in ng-repeat) please specify that in your question. otherwise, the following code should work for you.
let elm = element.all(by.repeater('obj in list'));
elm.getText().then(function(text){
console.log(text);
});

How to select value inside an object

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

$.grep to return property after match

I couldn't find any instances where this was being done so I'm asking you brainy people out there if there's a nice easy way to do what I'm wanting.
Trying to map two arrays together. One array has a list of the IDs (Foos), and the other array has all the properties (bars) for those IDs. Want to keep everything in my angular controller.
Here's a snippet. I'm trying to match on ID and map into the Name property.
$scope.Foos = $.map($scope.Foos, function (foo) {
return {
ID: foo.ID,
Name: $.grep($scope.bars, function(b){
return b.ID === foo.ID;
}).Name,
Property: $.grep($scope.bars, function(b){
return b.ID === foo.ID;
}).Property
};
});
What I understand is that $.grep will return the object based on the criteria, can I then call properties of that returned object?
Update:
Foos is ID (guid)
Bars is ID(guid), Name & Property
$.grep returns an array, not an object, so to do what you are wanting you would need to do something like:
Name: $.grep($scope.bars, function(b){
return b.ID === foo.ID;
})[0].Name
The problem here however is if there is no match , $.grep will return an empty array and you will end up throwing an error trying to get the first element from that empty array.
You really should look the properties up first, not while trying to build a more complex object
Something like:
$scope.Foos = $.map($scope.Foos, function (foo) {
// first filter the array
var bars = $.grep($scope.bars, function (b) {
return b.ID === foo.ID;
});
// now test we have result, if not make it ... empty string???
var name = bars.length ? bars[0].Name : '';
// do similar for `Property`
return {
ID: foo.ID,
Name: name,
......
};
});
This could also be modified to have some utility functions like getNameFromBars() and put the $.grep in there and return value found or the default.
If you wanted to get rid of jQuery you could use Array.prototype.map() and Array.prototype.filter() to replace $.map and $.grep.
Also $filter could be used.

Always display a Key First with Angular

I have an ng-repeat like:
<div ng-repeat="(k, v) in query_p[$index].tags">
I would like it so that if the key (k) is a certain string, say "foo", that string always appears first in the list. It seems the getter option or orderBy only works with arrays. Anyone have an example of how they might achieve this?
Basically you have an unordered object, and you want it to have some kind of order.
To do that you need to create a function that returns some ordered object.
myApp.filter('promote_foo', function() {
return function(object, comp) {
console.log(object);
console.log(comp);
var ordered = [];
for (var key in object) {
var obj = {
key: key,
value: object[key]
};
if (key === comp)
ordered.splice(0,0,obj);
else
ordered.push(obj);
}
console.log(ordered);
return ordered;
};
});
the function takes a parameter which will promote and object if the key matches it. Now I only call it in the controller directly, but you could use it just like any angular filter.
$scope.order = $filter('promote_foo')($scope.data, 'foo');
Also, you can play with the fiddle here.
Hope this helped!

Resources