Angular JS merges various records under a common category from a JSON document

Question

Angular JS merges various records under a common category from a JSON document

[{"Category":"cat","Value":"large cat"},
{"Category":"cat","Value":"small cat"},
{"Category":"dog","Value":"large dog"},
{"Category":"dog","Value":"little dog"},
{"Category":"dog","Value":"cute dog"}]

If I have a JSON file structured like this, how can I utilize AngularJS to display the data based on categories as shown below?

cat 
large cat
small cat
dog
large dog
little dog
cute dog

I have tried searching for solutions online, but most of them focus on removing duplicate entries rather than grouping items under the same category.

I experimented with using ng-repeat along with a custom filter algorithm from this tutorial.

Can anyone guide me on how to achieve the desired outcome?

Below is the code snippet that I am currently utilizing:

<div ng-repeat="animal in animals | unique : 'Category'">
        <div>{{animal.Category}}</div>
        <div>{{animal.Value}}</div> 
</div>

However, the current implementation produces the following result:

cat
large cat
dog
large dog

Unfortunately, this output does not align with my expectations.

javascript angularjs json

Answer 1

Answer №1

Check out this functional example

To identify unique categories, utilize the custom filter loop you've created. Then, implement a nested loop to display animals corresponding to each category as shown below:

<div ng-repeat="category in animals | unique : 'Category'">
  <span style="font-weight: bold">{{category.Category}}</span>
  <div ng-repeat="animal in animals" ng-show="animal.Category === category.Category">
    {{animal.Value}}
  </div>
</div>

Answer 2

Check out this functional example

To identify unique categories, utilize the custom filter loop you've created. Then, implement a nested loop to display animals corresponding to each category as shown below:

<div ng-repeat="category in animals | unique : 'Category'">
  <span style="font-weight: bold">{{category.Category}}</span>
  <div ng-repeat="animal in animals" ng-show="animal.Category === category.Category">
    {{animal.Value}}
  </div>
</div>

Answer 3

Answer №2

For achieving the desired result, you can utilize Array#reduce and Array#map.

let values = [{
    category: "cat",
    value: "large cat"
}, {
    category: "cat",
    value: "small cat"
}, {
    category: "dog",
    value: "large dog"
}, {
    category: "dog",
    value: "small dog"
}, {
    category: "dog",
    value: "cute dog"
}, {
    category: "turtle",
    value: "water turtle"
}, {
    category: "turtle",
    value: "land turtle"
}];

let groupedData = values.reduce((output, item) => {
    output[item.category] = output[item.category] || [];
    output[item.category].push(item.value);

    return output;
}, {});

console.log(groupedData);

let categoriesData = Object.keys(groupedData).map(key => ({key, values: groupedData[key]}));

console.log(categoriesData);

Answer 4

For achieving the desired result, you can utilize Array#reduce and Array#map.

let values = [{
    category: "cat",
    value: "large cat"
}, {
    category: "cat",
    value: "small cat"
}, {
    category: "dog",
    value: "large dog"
}, {
    category: "dog",
    value: "small dog"
}, {
    category: "dog",
    value: "cute dog"
}, {
    category: "turtle",
    value: "water turtle"
}, {
    category: "turtle",
    value: "land turtle"
}];

let groupedData = values.reduce((output, item) => {
    output[item.category] = output[item.category] || [];
    output[item.category].push(item.value);

    return output;
}, {});

console.log(groupedData);

let categoriesData = Object.keys(groupedData).map(key => ({key, values: groupedData[key]}));

console.log(categoriesData);

Answer 5

Answer №3

Utilize the groupby filter to categorize animals

<div ng-repeat="animal in animals  |  groupBy:'Category'" >
<h2 ng-show="animals[$index - 1].Category != animal.Category">{{item.Category }}</h2>
<ul>
    <li>{{animal.Value}}</li>
</ul>

Answer 6

Utilize the groupby filter to categorize animals

<div ng-repeat="animal in animals  |  groupBy:'Category'" >
<h2 ng-show="animals[$index - 1].Category != animal.Category">{{item.Category }}</h2>
<ul>
    <li>{{animal.Value}}</li>
</ul>

Angular JS merges various records under a common category from a JSON document

Answer №1

Answer №2

Answer №3

Similar questions

Unable to include a controller in AngularJS that is declared in a different file

Handling dynamic routes with React Router 4 and the 404 path

What is the process for transforming promises into async await syntax?

A guide on activating dropdown buttons individually using AngularJS (Cascading dropdowns)

Interactive Vue tree view featuring draggable nodes

Replicating form fields using jQuery

An unexpected identifier error occurred following an Ajax request

Can anyone offer a straightforward method for obtaining JavaScript output in Java within the Eclipse environment?

Is there a way to ensure that a "catch all other" route in the Vue Router will also capture the URL if a portion of it matches a predefined route?

Zod offers the flexibility to customize validation for optional keys

Implementing Dynamic Weight-based Pricing with CodeIgniter and AJAX

Javascript Google Maps API is not working properly when trying to load the Gmap via a Json

Exploring the streamlined process of verifying a user's ability to connect using Slim in a RESTful

Removing an object in Three.js using scene.getObjectByName() method

Display nested array objects of varying levels within VUE

Failed PHP response when jQuery was called

Socket.io: sending signals without receiving any responses

Bootstrap modal fails to appear on screen

Only load the value in ref when it is specifically requested in Vue

Update and send back variable on the spot