AngularJS offers the ability to filter JSON data with a specified parameter, allowing for precise data

Question

AngularJS offers the ability to filter JSON data with a specified parameter, allowing for precise data

I have a JSON file called datas that contains the following information:

[
    {"value": "1", "text": "aaa"},
    {"value": "2", "text": "bbb"},
    {"value": "3", "text": "ccc"},
    {"value": "4", "text": "ddd"},
    {"value": "5", "text": "eee"},
    {"value": "6", "text": "fff"},
    {"value": "7", "text": "ggg"},
    {"value": "8", "text": "hhh"},
    {"value": "9", "text": "iii"},
    {"value": "10", "text": "jjj"}
]

My goal is to filter data from this JSON file based on an array of "b" values (b0, b1, b3, etc).

$scope.array = {"badge":"1,2,5,7","id":"0","b0":"1","b1":"2","b2":"5","b3":"7"}

For example:

Given an array with b0, b1, b2 and b3 containing the values 1, 2, 5, and 7, I want to retrieve only those specific values from the datas JSON file and display their corresponding text values.

The format of the array may vary, so I need to account for parameters in the form of b+"number".

Here are a few examples:

$scope.array = {"badge":"1,2,3,9","id":"0","b0":"1","b1":"2","b2":"3","b3":"9"}

$scope.array = {"badge":"1,2,7","id":"0","b0":"1","b1":"2","b2":"7"}

$scope.array = {"badge":"1,2,5,7,8,9","id":"0","b0":"1","b1":"2","b2":"5","b3":"7","b4":"8","b5":"9"}

To access the JSON file using AngularJS, I use the following code:

$http.get("/json/datas.json").success(function(data) {
      $scope.datas= data;
});

The values are displayed using ng-repeat.

<div ng-repeat="data in datas">
    <span ng-bind-html="data.text"></span>
</div>

Only the HTML body is displayed:

aaa bbb eee ggg

javascript angularjs arrays json

Answer 1

Answer №1

To tackle this problem, one approach is to manipulate the array containing the "bX" values by filtering, mapping, and/or reducing it in order to generate a lookup table of IDs. This lookup table can then be used to filter the main data array accordingly. However, it's essential to note that the "array" in question is not an actual array; rather, it is a plain object. Therefore, direct application of array methods on it is not possible. To work around this limitation, I utilize Object.keys() to extract its keys into an array. Subsequently, I opt to employ .reduce() to construct the lookup table using keys that adhere to the specified format:

var data = [ {"value": "1", "text": "aaa"}, {"value": "2", "text": "bbb"}, {"value": "3", "text": "ccc"}, {"value": "4", "text": "ddd"}, {"value": "5", "text": "eee"}, {"value": "6", "text": "fff"}, {"value": "7", "text": "ggg"}, {"value": "8", "text": "hhh"}, {"value": "9", "text": "iii"}, {"value": "10", "text": "jjj"} ]

var $scope = {} // demo $scope object
$scope.array = {"badge":"1,2,5,7","id":"0","b0":"1","b1":"2","b2":"5","b3":"7"}

var bVals = Object.keys($scope.array).reduce(function(a, c) {
    if (/^b\d+$/.test(c))
      a[$scope.array[c]] = true
    return a
  }, {})
  
console.log(bVals)

var filteredData = data.filter(function(v) { return bVals[v.value] })

console.log(filteredData)

Answer 2

To tackle this problem, one approach is to manipulate the array containing the "bX" values by filtering, mapping, and/or reducing it in order to generate a lookup table of IDs. This lookup table can then be used to filter the main data array accordingly. However, it's essential to note that the "array" in question is not an actual array; rather, it is a plain object. Therefore, direct application of array methods on it is not possible. To work around this limitation, I utilize Object.keys() to extract its keys into an array. Subsequently, I opt to employ .reduce() to construct the lookup table using keys that adhere to the specified format:

var data = [ {"value": "1", "text": "aaa"}, {"value": "2", "text": "bbb"}, {"value": "3", "text": "ccc"}, {"value": "4", "text": "ddd"}, {"value": "5", "text": "eee"}, {"value": "6", "text": "fff"}, {"value": "7", "text": "ggg"}, {"value": "8", "text": "hhh"}, {"value": "9", "text": "iii"}, {"value": "10", "text": "jjj"} ]

var $scope = {} // demo $scope object
$scope.array = {"badge":"1,2,5,7","id":"0","b0":"1","b1":"2","b2":"5","b3":"7"}

var bVals = Object.keys($scope.array).reduce(function(a, c) {
    if (/^b\d+$/.test(c))
      a[$scope.array[c]] = true
    return a
  }, {})
  
console.log(bVals)

var filteredData = data.filter(function(v) { return bVals[v.value] })

console.log(filteredData)

Answer 3

Answer №2

To filter the data, you can utilize javascript prototype functions map and find. Start by converting the batch properties into an array and then map that array to locate the relevant values

$scope.array = {"badge":"1,2,3,9","id":"0","b0":"1","b1":"2","b2":"3","b3":"9"}
var batchArr = $scope.array.badge.split(',');
$scope.result = batchArr.map(o=> $scope.datas.find(k=> k.value == o))

angular.module("app",[])
.controller("ctrl",function($scope,$sce){
$scope.datas = [
    {"value": "1", "text": "aaa"},
    {"value": "2", "text": "bbb"},
    {"value": "3", "text": "ccc"},
    {"value": "4", "text": "ddd"},
    {"value": "5", "text": "eee"},
    {"value": "6", "text": "fff"},
    {"value": "7", "text": "ggg"},
    {"value": "8", "text": "hhh"},
    {"value": "9", "text": "iii"},
    {"value": "10", "text": "jjj"}
]
$scope.array = {"badge":"1,2,3,9","id":"0","b0":"1","b1":"2","b2":"3","b3":"9"}

var batchArr = $scope.array.badge.split(',');
$scope.result = batchArr.map(o=> $scope.datas.find(k=> k.value == o)) 


console.log($scope.result)

$scope.trust = function(html){
 return $sce.trustAsHtml(html);
}
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div ng-repeat="data in result">
    <span ng-bind-html="trust(data.text)"></span>
</div>
</div>

Answer 4

To filter the data, you can utilize javascript prototype functions map and find. Start by converting the batch properties into an array and then map that array to locate the relevant values

$scope.array = {"badge":"1,2,3,9","id":"0","b0":"1","b1":"2","b2":"3","b3":"9"}
var batchArr = $scope.array.badge.split(',');
$scope.result = batchArr.map(o=> $scope.datas.find(k=> k.value == o))

angular.module("app",[])
.controller("ctrl",function($scope,$sce){
$scope.datas = [
    {"value": "1", "text": "aaa"},
    {"value": "2", "text": "bbb"},
    {"value": "3", "text": "ccc"},
    {"value": "4", "text": "ddd"},
    {"value": "5", "text": "eee"},
    {"value": "6", "text": "fff"},
    {"value": "7", "text": "ggg"},
    {"value": "8", "text": "hhh"},
    {"value": "9", "text": "iii"},
    {"value": "10", "text": "jjj"}
]
$scope.array = {"badge":"1,2,3,9","id":"0","b0":"1","b1":"2","b2":"3","b3":"9"}

var batchArr = $scope.array.badge.split(',');
$scope.result = batchArr.map(o=> $scope.datas.find(k=> k.value == o)) 


console.log($scope.result)

$scope.trust = function(html){
 return $sce.trustAsHtml(html);
}
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div ng-repeat="data in result">
    <span ng-bind-html="trust(data.text)"></span>
</div>
</div>

AngularJS offers the ability to filter JSON data with a specified parameter, allowing for precise data

Answer №1

Answer №2

Similar questions

Transferring data from a class method to a React component

Ways to add a prefix to every JSON response in play2 to avoid JSONP vulnerability from potential malicious requests

Attempting to iterate through a Query each loop for the Raphael object

Display a smaller image preview in the product photo gallery

Click the button to save numerous images at once

How can you incorporate AJAX to add a paragraph element to your HTML document?

A condition in the JSON Schema mandates a specific field based on the value of another

Vue.js error: Trying to access an undefined property

Reviewing file information prior to submission

What is the best way to trigger a new css animation on an element that is already in the midst of

Angularjs version 1.2 now includes an additional empty option within the select feature

Using a ternary operator to render a span tag in ReactJS

Creating code that adheres to the ECMAScript 5 standards

Designing a dinner selection with the help of vectors, strings, and arrays by extracting information from two separate text files

Guide on navigating an array of objects using the provided keys as a starting point in Javascript/Typescript

Incorporate audio playback on image click using JavaScript, with the feature to automatically pause the playback if multiple images are playing simultaneously

Creating a dynamic star rating system using CSS

What is the best way to access elements and attributes from a specific JSON file?

Changing the value of an object property (illustrated using a basic linked list)

Utilizing Ember to transmit models to Bootstrap Popovers