Leveraging angularjs forEach iterations

Question

Leveraging angularjs forEach iterations

When working with AngularJS, I am receiving the following JSON in my $scope:

$scope.someStuff = {
      "id": 2,
      "service": "bike",
      "min": "22",
      "per": "100",
      "tax": "1",
      "categoryservices": [
        {
          "id": 32,
          "category": {
            "id": 1,
            "name": "software"
          }
        },
        {
          "id": 33,
          "category": {
            "id": 2,
            "name": "hardware"
          }
        },
        {
          "id": 34,
          "category": {
            "id": 3,
            "name": "waterwash"
          }
        }
      ]
    }

I am looking to extract only the category names using an AngularJS forEach loop.

The desired output should be:

[{"name":"software"}, {"name":"hardware"}, {"name":"waterwash"}]

javascript arrays json object

Answer 1

Answer №1

If you want to transform elements in an array, you can utilize the Array.map() method.

The map() function generates a new array by applying a specified function to each element of the original array.

$scope.someStuff.categoryservices.map((x) => { return { name: x.category.name}})

var obj = {
  "id": 2,
  "service": "bike",
  "min": "22",
  "per": "100",
  "tax": "1",
  "categoryservices": [{
      "id": 32,
      "category": {
        "id": 1,
        "name": "software"
      }
    },
    {
      "id": 33,
      "category": {
        "id": 2,
        "name": "hardware"
      }
    },
    {
      "id": 34,
      "category": {
        "id": 3,
        "name": "waterwash"
      }
    }
  ]
};

console.log(obj.categoryservices.map((x) => {
  return {
    name: x.category.name
  }
}))

Answer 2

If you want to transform elements in an array, you can utilize the Array.map() method.

The map() function generates a new array by applying a specified function to each element of the original array.

$scope.someStuff.categoryservices.map((x) => { return { name: x.category.name}})

var obj = {
  "id": 2,
  "service": "bike",
  "min": "22",
  "per": "100",
  "tax": "1",
  "categoryservices": [{
      "id": 32,
      "category": {
        "id": 1,
        "name": "software"
      }
    },
    {
      "id": 33,
      "category": {
        "id": 2,
        "name": "hardware"
      }
    },
    {
      "id": 34,
      "category": {
        "id": 3,
        "name": "waterwash"
      }
    }
  ]
};

console.log(obj.categoryservices.map((x) => {
  return {
    name: x.category.name
  }
}))

Answer 3

Answer №2

To utilize the map method, simply provide a callback function as an argument.

const data = { "id": 2, "service": "bike", "min": "22", "per": "100", "tax": "1", "categoryservices": [ { "id": 32, "category": { "id": 1, "name": "software" } }, { "id": 33, "category": { "id": 2, "name": "hardware" } }, { "id": 34, "category": { "id": 3, "name": "waterwash" } } ] }   
let resultArray = data.categoryservices.map(function({category}){
  return {'name' : category.name}
});
console.log(resultArray);

Answer 4

To utilize the map method, simply provide a callback function as an argument.

const data = { "id": 2, "service": "bike", "min": "22", "per": "100", "tax": "1", "categoryservices": [ { "id": 32, "category": { "id": 1, "name": "software" } }, { "id": 33, "category": { "id": 2, "name": "hardware" } }, { "id": 34, "category": { "id": 3, "name": "waterwash" } } ] }   
let resultArray = data.categoryservices.map(function({category}){
  return {'name' : category.name}
});
console.log(resultArray);

Leveraging angularjs forEach iterations

Answer №1

Answer №2

Similar questions

How can I eliminate text using regular expressions?

Issue: Images are not displaying in jQuery slideshow.Possible cause: There

Personalized Icons for Google Maps. (Designed for iPhone)

Utilize Ajax to open and close an HTML tag within separate div elements

Activate Auto Navigation Feature on Mouseover using jQuery

What is the best way to combine two arrays of negative numbers into a single array?

What advantages does incorporating a prefix or suffix to a key provide in React development?

Set up the ObjectMapper globally (using @Bean or a similar method) to handle parsing from the "data" section

Unusual issue encountered with mapView functionality in CreateForm

Skipping the validation of a variable in a return statement with Angular and Javascript

Updating the default value of a MUI TextField: Step-by-step guide

Error in Origin Access Control detected in the XMLHttpRequest

Error: Failed to convert string value "new" to an ObjectId at field "_id" in the "Model" model

What is the best way to retrieve the output of MongoDB's collection.aggregate() within a NodeJS callback function?

304 status code is returned by Couchapp when requesting a view

problem when testing html file using javascript jasmine

Tips for SOAP UI Assertion: Ensuring correctness of the Total attribute and its corresponding value

What is the best way to trigger a function in Vue.js when a click event occurs on Google Maps?

commenting system through ajax across multiple web pages

Creating a JavaScript automated slideshow with multiple instances of loops and/or setInterval running simultaneously?