What is the best approach to sorting nested JSON data in AngularJS?

Question

What is the best approach to sorting nested JSON data in AngularJS?

Currently, I am faced with the challenge of filtering through a nested JSON array within AngularJS. The JSON structure I am dealing with is as follows:

articles_data: [{
    title: 'Bigfoot Afoot',
    tags: ['True stories', 'forests'],
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus mi at nulla finibus pretium. Curabitur auctor lacus vitae varius viverra. Sed pharetra varius sapien, id hendrerit ipsum lacinia placerat. Morbi vitae neque ipsum. Curabitur sem neque, iaculis vel nisl a, condimentum commodo arcu. Morbi nec urna efficitur, tempor nisl a, aliquet felis. Ut non est massa. Proin eget purus est. Integer eu nisi sed nisi maximus sodales. Duis finibus turpis a velit consectetur, luctus eleifend metus scelerisque. Pellentesque suscipit iaculis purus vel convallis.",
    category: 'Bigfoot'
  },
  {
    title: 'Lockness Sighted!',
    tags: ['Sightings', 'Lakes'],
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus mi at nulla finibus pretium. Curabitur auctor lacus vitae varius viverra. Sed pharetra varius sapien, id hendrerit ipsum lacinia placerat. Morbi vitae neque ipsum. Curabitur sem neque, iaculis vel nisl a, condimentum commodo arcu. Morbi nec urna efficitur, tempor nisl a, aliquet felis. Ut non est massa. Proin eget purus est. Integer eu nisi sed nisi maximus sodales. Duis finibus turpis a velit consectetur, luctus eleifend metus scelerisque. Pellentesque suscipit iaculis purus vel convallis.",
    category: 'Nessy'
  },
  {
    title: 'Jacktalopes Everywhere',
    tags: ['Rabbits', 'cities'],
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus mi at nulla finibus pretium. Curabitur auctor lacus vitae varius viverra. Sed pharetra varius sapien, id hendrerit ipsum lacinia placerat. Morbi vitae neque ipsum. Curabitur sem neque, iaculis vel nisl a, condimentum commodo arcu. Morbi nec urna efficitur, tempor nisl a, aliquet felis. Ut non est massa. Proin eget purus est. Integer eu nisi sed nisi maximus sodales. Duis finibus turpis a velit consectetur, luctus eleifend metus scelerisque. Pellentesque suscipit iaculis purus vel convallis.",
    category: 'Jacktalope'
  }
]

My current approach involves utilizing an ng-repeat to iterate through the array:

<div class="col-md-7 articles">
  <section>
    <div class="card filter" ng-repeat="article in articles.articlemanager.articles track by $index">
      <div class="card-header">
        {{article.title}} &nbsp;<small>{{article.tags.join()}}</small>
        <span class="badge badge-{{article.category}} float-right">{{article.category}}</span>
      </div>
      <div class="card-body">
        <p>
          {{article.description}}
        </p>
      </div>
    </div>
  </section>
</div>

While this successfully displays the articles, I am now looking to enhance the functionality by implementing filters based on name or tags:

<form>
  <div class="form-group">
    <label for="filterName">Filter by name</label>
    <input type="text" class="form-control" id="filterName">
  </div>
  <div class="form-group">
    <label for="filterTags">Filter by tags</label>
    <input type="text" class="form-control" id="filterTags">
  </div>
</form>

Although I lack expertise in utilizing filters within AngularJS, I am under time constraints and would greatly appreciate any assistance or guidance. Thank you in advance.

javascript angularjs json

Answer 1

Answer №1

Simply include the | filter after your ng-repeat and store it in a ng-model that is linked to an <input>. To apply additional filters, just append more using the pipe symbol |. For more information on filters, check out the documentation here.

var app = angular.module("DummyApp", []);

var DummyController = function($scope) {
  $scope.articles_data = [{
      title: 'Bigfoot Afoot',
      tags: ['True stories', 'forests'],
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus mi at nulla finibus pretium. Curabitur auctor lacus vitae varius viverra. Sed pharetra varius sapien, id hendrerit ipsum lacinia placerat. Morbi vitae neque ipsum. Curabitur sem neque, iaculis vel nisl a, condimentum commodo arcu. Morbi nec urna efficitur, tempor nisl a, aliquet felis. Ut non est massa. Proin eget purus est. Integer eu nisi sed nisi maximus sodales. Duis finibus turpis a velit consectetur, luctus eleifend metus scelerisque. Pellentesque suscipit iaculis purus vel convallis.",
      category: 'Bigfoot'
    },
    {
      title: 'Lockness Sighted!',
      tags: ['Sightings', 'Lakes'],
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus mi at nulla finibus pretium. Curabitur auctor lacus vitae varius viverra. Sed pharetra varius sapien, id hendrerit ipsum lacinia placerat. Morbi vitae neque ipsum. Curabitur sem neque, iaculis vel nisl a, condimentum commodo arcu. Morbi nec urna efficitur, tempor nisl a, aliquet felis. Ut non est massa. Proin eget purus est. Integer eu nisi sed nisi maximus sodales. Duis finibus turpis a velit consectetur, luctus eleifend metus scelerisque. Pellentesque suscipit iaculis purus vel convallis.",
      category: 'Nessy'
    },
    {
      title: 'Jacktalopes Everywhere',
      tags: ['Rabbits', 'cities'],
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus mi at nulla finibus pretium. Curabitur auctor lacus vitae varius viverra. Sed pharetra varius sapien, id hendrerit ipsum lacinia placerat. Morbi vitae neque ipsum. Curabitur sem neque, iaculis vel nisl a, condimentum commodo arcu. Morbi nec urna efficitur, tempor nisl a, aliquet felis. Ut non est massa. Proin eget purus est. Integer eu nisi sed nisi maximus sodales. Duis finibus turpis a velit consectetur, luctus eleifend metus scelerisque. Pellentesque suscipit iaculis purus vel convallis.",
      category: 'Jacktalope'
    }
  ]
}

app.controller("DummyController", ["$scope", DummyController]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="DummyApp">
  <div ng-controller="DummyController">
    <form>
      <div class="form-group">
        <label for="filterName">Filter by name</label>
        <input type="text" class="form-control" id="filterName" ng-model="filterName">
      </div>
      <div class="form-group">
        <label for="filterTags">Filter by tags</label>
        <input type="text" class="form-control" id="filterTags" ng-model="filterTag">
      </div>
    </form>
    <div class="col-md-7 articles">
      <section>
        <div class="card filter" ng-repeat="article in articles_data | filter:filterName | filter:filterTag">
          <div class="card-header">
            {{article.title}} &nbsp;<small>{{article.tags.join()}}</small>
            <span class="badge badge-{{article.category}} float-right">{{article.category}}</span>
          </div>
          <div class="card-body">
            <p>
              {{article.description}}
            </p>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

Answer 2

Simply include the | filter after your ng-repeat and store it in a ng-model that is linked to an <input>. To apply additional filters, just append more using the pipe symbol |. For more information on filters, check out the documentation here.

var app = angular.module("DummyApp", []);

var DummyController = function($scope) {
  $scope.articles_data = [{
      title: 'Bigfoot Afoot',
      tags: ['True stories', 'forests'],
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus mi at nulla finibus pretium. Curabitur auctor lacus vitae varius viverra. Sed pharetra varius sapien, id hendrerit ipsum lacinia placerat. Morbi vitae neque ipsum. Curabitur sem neque, iaculis vel nisl a, condimentum commodo arcu. Morbi nec urna efficitur, tempor nisl a, aliquet felis. Ut non est massa. Proin eget purus est. Integer eu nisi sed nisi maximus sodales. Duis finibus turpis a velit consectetur, luctus eleifend metus scelerisque. Pellentesque suscipit iaculis purus vel convallis.",
      category: 'Bigfoot'
    },
    {
      title: 'Lockness Sighted!',
      tags: ['Sightings', 'Lakes'],
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus mi at nulla finibus pretium. Curabitur auctor lacus vitae varius viverra. Sed pharetra varius sapien, id hendrerit ipsum lacinia placerat. Morbi vitae neque ipsum. Curabitur sem neque, iaculis vel nisl a, condimentum commodo arcu. Morbi nec urna efficitur, tempor nisl a, aliquet felis. Ut non est massa. Proin eget purus est. Integer eu nisi sed nisi maximus sodales. Duis finibus turpis a velit consectetur, luctus eleifend metus scelerisque. Pellentesque suscipit iaculis purus vel convallis.",
      category: 'Nessy'
    },
    {
      title: 'Jacktalopes Everywhere',
      tags: ['Rabbits', 'cities'],
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus mi at nulla finibus pretium. Curabitur auctor lacus vitae varius viverra. Sed pharetra varius sapien, id hendrerit ipsum lacinia placerat. Morbi vitae neque ipsum. Curabitur sem neque, iaculis vel nisl a, condimentum commodo arcu. Morbi nec urna efficitur, tempor nisl a, aliquet felis. Ut non est massa. Proin eget purus est. Integer eu nisi sed nisi maximus sodales. Duis finibus turpis a velit consectetur, luctus eleifend metus scelerisque. Pellentesque suscipit iaculis purus vel convallis.",
      category: 'Jacktalope'
    }
  ]
}

app.controller("DummyController", ["$scope", DummyController]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="DummyApp">
  <div ng-controller="DummyController">
    <form>
      <div class="form-group">
        <label for="filterName">Filter by name</label>
        <input type="text" class="form-control" id="filterName" ng-model="filterName">
      </div>
      <div class="form-group">
        <label for="filterTags">Filter by tags</label>
        <input type="text" class="form-control" id="filterTags" ng-model="filterTag">
      </div>
    </form>
    <div class="col-md-7 articles">
      <section>
        <div class="card filter" ng-repeat="article in articles_data | filter:filterName | filter:filterTag">
          <div class="card-header">
            {{article.title}} &nbsp;<small>{{article.tags.join()}}</small>
            <span class="badge badge-{{article.category}} float-right">{{article.category}}</span>
          </div>
          <div class="card-body">
            <p>
              {{article.description}}
            </p>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

Answer 3

Answer №2

If you're unsure about what you want, the simplest method to use with ng-repeat is the filter function.

<li ng-repeat="x in names | orderBy:'FirstName'">

For more information and various options available, refer to the AngularJS Documentation on the filter function.

Answer 4

If you're unsure about what you want, the simplest method to use with ng-repeat is the filter function.

<li ng-repeat="x in names | orderBy:'FirstName'">

For more information and various options available, refer to the AngularJS Documentation on the filter function.

Answer 5

Answer №3

<div class="box filter" ng-repeat="post in articles.articlemanager.articles | filter : filterTitle | filter: filterCategories track by $index">

Answer 6

<div class="box filter" ng-repeat="post in articles.articlemanager.articles | filter : filterTitle | filter: filterCategories track by $index">

What is the best approach to sorting nested JSON data in AngularJS?

Answer №1

Answer №2

Answer №3

Similar questions

The tool tip feature is not recognizing line breaks

We encountered an issue: Headers cannot be set after they have been sent while attempting to read files

Processing incoming requests with a loading interface in CodeIgniter

Looking to maintain the value of a toggle button in a specific state depending on certain condition checks

Using ng-class directive with condition in AngularJS

Tips on submitting a nested dataset and a collection of photos

Is there a more efficient method for managing Express rendering based on whether the request is an AJAX post or an HTML form submission?

Unspecified variable in AngularJS data binding with Onsen UI

Replicate the functionality of a mouse scrolling event

Navigating with React Router v6 beyond the confines of individual components

Generating clickable markers that trigger an AlertDialog to appear in real-time

Steps for setting a background image behind radio buttons

Is there a tool that can help pinpoint the original collection for shared elements across multiple collections?

Is it possible to disable the "super must be called before accessing this keyword" rule in babelify?

Establish a foreign key constraint on a JSON data type field

Guide to retrieving data from a JSON API

Alias destructuring for arrays within nested objects

The way jQuery and CSS are rendered in the same browser window can vary depending on whether they are loaded via Django or statically

Struggling with a TypeError in React/Next-js: Why is it saying "Cannot read properties of undefined" for 'id' when the object is clearly filled with data?

Encountering issues with ASP.NET WebAPI: When using $.ajax, a 404 error occurs, while using $.getJSON results in an Uncaught