CODEWITHSUNDEEP
javascriptangularjsarrays
GURURAJ DHARANI
GURURAJ DHARANI

Reputation: 468

Array Mapping in AngularJs

I have two arrays 

$scope.tags =  [{ "id": 1, "name": "python" }, { "id": 2, "name": "NodeJs" }, { "id": 3, "name": "git" }]

Other one is

$scope.skillsInterested = [1,2];

What is want to do ?

How can i map the above arrays and print only names of the id's in$scope.skillsInterested

I want to print names in first array only the id's present in second.

I have tried this after getting several answers 

var tag_map = {};
for (var x = 0; x < $scope.tags.length; x++) {
tag_map[$scope.tags[x]['id']] = $scope.tags[x]['name'];
}
$scope.skillsInts = $scope.skillsInterested.map(function(x) {
return tag_map[x]

On running console.log

console.log("Result", tag_map);

It sometimes give result sometimes it gives 'map' of undefined.

TypeError: Cannot read property 'map' of undefined
at controllers.js:141
at angular.js:16383
at m.$eval (angular.js:17682)
at m.$digest (angular.js:17495)
at m.$apply (angular.js:17790)
at l (angular.js:11831)
at J (angular.js:12033)
at XMLHttpRequest.t.onload (angular.js:11966)

Thanks in advance.

Upvotes: 2

Views: 41952

Answers (4)

Sudhindra_Chausalkar
Sudhindra_Chausalkar

Reputation: 163

$scope.newArray = []; // If you need a new array to work with
angular.forEach($scope.tags, function(tag){
$scope.selectedExpTags.forEach(function(selectedTag){ 
    if(selectedTag == tag.id){
        //tag.hide = false; // - If you want to update the current array
        $scope.newArray.push(tag);
    }
    // else{ // - If you want to update the current array
    //      tag.hide = true;
    // }
  })
})

Lodash is more efficient than angular for manipulating data.

Upvotes: 1

user3297291
user3297291

Reputation: 23372

Make a map of your data that looks like this: 

var tagMap = { 1: "python", 2: "NodeJs" /* etc. */ };

You can do this by looping over your tags and adding a new property to an object. reduce lets you do this without creating any extra variables.

Then, you can select names from your newly created object using the [] notation: tagMap[1] returns "pyhton".

var tags =  [{ "id": 1, "name": "python" }, { "id": 2, "name": "NodeJs" }, { "id": 3, "name": "git" }]
var selectedExpTags = [1,2];


// Make a map for `id: name`
var tagMap = tags.reduce(function(map, tag) {
  map[tag.id] = tag.name;
  return map;
}, {});

// Quickly select names from the map:
var selectedNames = selectedExpTags.map(function(id) {
  return tagMap[id];
});

console.log(selectedNames);

Using this approach, you minimise the iterations over your data. The creation of the map loops over the tags once. Creating the array with names, loops over the selected tags once. So, roughly, the "loop count" is tags.length + selectedTags.length. If you would use an indexOf based approach, your loop count would be tags.length * selectedTags.length.

Upvotes: 4

Rajesh
Rajesh

Reputation: 24915

You can loop over $scope.selectedExpTags and get a list of all names. You can use array.find if you want first value only.

Sample

var first = [
  { "id": 1, "name": "python" }, 
  { "id": 2, "name": "NodeJs" }, 
  { "id": 3, "name": "git" }];

var selectedExpTags = [1,2];
var names = selectedExpTags.map(x=> first.find( y=> y.id === x ).name )

console.log(names);

Upvotes: 2

Suren Srapyan
Suren Srapyan

Reputation: 68645

Use the filter function for first, and then check the id's existnent then map the names from the array.

var first = [{ "id": 1, "name": "python" }, { "id": 2, "name": "NodeJs" }, { "id": 3, "name": "git" }];

var selectedExpTags = [1,2];

var names = first.filter(item => selectedExpTags.some(id => item.id === id)).map(item => item.name);

console.log(names);

Upvotes: 2

Related Questions