AngularJs array mapping is a powerful feature that allows you to

Question

AngularJs array mapping is a powerful feature that allows you to

I am dealing with two arrays

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

The second array is

$scope.skillsInterested = [1,2];

What I am trying to achieve is:

How do I match the IDs in$scope.skillsInterested array with the first array and print only their names?

I want to display names from the first array for the IDs present in the second.

After receiving multiple suggestions, here's what I attempted:

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]

When I use console.log

console.log("Result", tag_map);

Sometimes it returns a result, but other times it shows '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)

Thank you in advance.

javascript angularjs arrays

Answer 1

Answer №1

Create a visual representation of your data in the form of a map that resembles the example below:

var tagMap = { 1: "JavaScript", 2: "React" /* etc. */ };

To achieve this, iterate through your tags and add a new property to an object. Utilize the reduce method to accomplish this task without the need for additional variables.

You can then retrieve names from the newly created object using the notation []: tagMap[1] will yield "JavaScript".

var tags =  [{ "id": 1, "name": "JavaScript" }, { "id": 2, "name": "React" }, { "id": 3, "name": "Vue" }]
var selectedTags = [1,2];
// Generate a mapping for `id: name`
var tagMap = tags.reduce(function(map, tag) {
  map[tag.id] = tag.name;
  return map;
}, {});

// Easily fetch names from the map:
var selectedNames = selectedTags.map(function(id) {
  return tagMap[id];
});

console.log(selectedNames);

By adopting this approach, you reduce the number of iterations over your data. The creation of the map only iterates over the tags list once. Similarly, creating the array with names only loops over the selected tags list once. Therefore, the total "loop count" is roughly

tags.length + selectedTags.length

. In contrast, if you were to use an indexOf-based method, the loop count would be

tags.length * selectedTags.length

.

Answer 2

Create a visual representation of your data in the form of a map that resembles the example below:

var tagMap = { 1: "JavaScript", 2: "React" /* etc. */ };

To achieve this, iterate through your tags and add a new property to an object. Utilize the reduce method to accomplish this task without the need for additional variables.

You can then retrieve names from the newly created object using the notation []: tagMap[1] will yield "JavaScript".

var tags =  [{ "id": 1, "name": "JavaScript" }, { "id": 2, "name": "React" }, { "id": 3, "name": "Vue" }]
var selectedTags = [1,2];
// Generate a mapping for `id: name`
var tagMap = tags.reduce(function(map, tag) {
  map[tag.id] = tag.name;
  return map;
}, {});

// Easily fetch names from the map:
var selectedNames = selectedTags.map(function(id) {
  return tagMap[id];
});

console.log(selectedNames);

By adopting this approach, you reduce the number of iterations over your data. The creation of the map only iterates over the tags list once. Similarly, creating the array with names only loops over the selected tags list once. Therefore, the total "loop count" is roughly

tags.length + selectedTags.length

. In contrast, if you were to use an indexOf-based method, the loop count would be

tags.length * selectedTags.length

.

Answer 3

Answer №2

To efficiently extract data, utilize the filter function on the array labeled first, then verify the existence of the ids before using the map function to retrieve the names.

var first = [{ "id": 1, "name": "javascript" }, { "id": 2, "name": "React" }, { "id": 3, "name": "HTML" }];

var selectedExpTags = [1,2];

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

console.log(names);

Answer 4

To efficiently extract data, utilize the filter function on the array labeled first, then verify the existence of the ids before using the map function to retrieve the names.

var first = [{ "id": 1, "name": "javascript" }, { "id": 2, "name": "React" }, { "id": 3, "name": "HTML" }];

var selectedExpTags = [1,2];

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

console.log(names);

Answer 5

Answer №3

To retrieve a list of all names from the $scope.selectedExpTags array, you can iterate over it using a loop. If you are only interested in the first value, you can utilize the array.find method.

Example

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

Answer 6

To retrieve a list of all names from the $scope.selectedExpTags array, you can iterate over it using a loop. If you are only interested in the first value, you can utilize the array.find method.

Example

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

Answer 7

Answer №4

const freshArr = []; // Create a new array for manipulation purposes
angular.forEach($scope.tags, function(tag){
$scope.selectedExpTags.forEach(function(selectedTag){ 
    if(selectedTag == tag.id){
        //tag.hide = false; // Uncomment to update the current array
        freshArr.push(tag);
    }
    // else{ // Uncomment to update the current array
    //      tag.hide = true;
    // }
  })
})

In terms of data manipulation efficiency, Lodash surpasses angular.

Answer 8

const freshArr = []; // Create a new array for manipulation purposes
angular.forEach($scope.tags, function(tag){
$scope.selectedExpTags.forEach(function(selectedTag){ 
    if(selectedTag == tag.id){
        //tag.hide = false; // Uncomment to update the current array
        freshArr.push(tag);
    }
    // else{ // Uncomment to update the current array
    //      tag.hide = true;
    // }
  })
})

In terms of data manipulation efficiency, Lodash surpasses angular.

AngularJs array mapping is a powerful feature that allows you to

Answer №1

Answer №2

Answer №3

Example

Answer №4

Similar questions

Tool for tracking response time on basic Ajax-requested webpage

When moving the React application to the production environment, the message 'Please activate JavaScript in order to launch this application' is displayed

Attempting to transform text into symbols

Exploring the possibilities of utilizing package.json exports within a TypeScript project

Dividing CSV Data into Two File Outputs

What is the purpose of creating redirects instead of just "processing" data?

Expressjs encountering issues with response detection

Ensuring a URL is W3C compliant and functions properly in an Ajax request

Adjust the navigation text and logo color as you scroll on the page

Determine the location of a shape in Kinetic.js while it is moving with the .move() method

Creating a numpy array in two dimensions using a pair of one-dimensional arrays

Tips for triggering the onChange event in Formik and initiating a re-render of other components

Deciphering the Byte masking concept in Java

The path mappings specified in the tsconfig.json file are not resolving correctly during the

Displaying form after Ajax submission

Transformation of Object into Number through Function Execution in Javascript

Should I consolidate my ajax requests into groups, or should I send each request individually?

Guide to integrating the Braintree API with Node.js

Error: The function is invalid for callback at end (node_modules/middy/src/middy.js:152:16)

What is the reason for initializing this Knockout.js component in a seemingly random order?