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

Transform all Date fields in the Array to a standardized date format

The Script Component is not functioning properly in next.js

perform asynchronous calls within a for loop in a synchronous manner

The sign-up button mysteriously vanishes after the page is refreshed

Exploring the data nesting structure in Grails and mongo DB

The select2 does not show the selected information

Algorithm that continuously increases a given date by 3 months until it surpasses or matches the specified creation date

What is the best way to add new input fields dynamically using the push() function in AngularJS?

Streamlined approach to triggering ng-change on a single textbox

When you press the submit button, the screen automatically scrolls down but no action is taken

Challenges faced while working with Angular JS

Rendering ng-include before setting the source

Customizing Bootstrap Vue to prevent tooltips from opening on hover

When the onclick function is triggered, two or more characters will be displayed

I'm currently attempting to establish a connection between my server.js express API and MongoDB, but I keep encountering an unfamiliar error message that I'm having trouble decipher

Is there a universal resolver available for the $routeProvider in AngularJs 1.x?

The JSX snippet accurately displays the expected value on some pages, but displays an incorrect value on other pages

Using protractor and AngularJS to extract text content from two labels by identifying the elements

The View does not reflect changes made to the scope

Creating a timer implementation in Node.js using Socket.IO