AngularJS making use of multiple checkboxes to filter data from a nested JSON structure

Hi everyone, I came across a helpful resource on implementing multiple checkboxes filters in AngularJS: angular js multiple checkbox with custom filters

I am facing a similar issue but with a multilevel JSON structure. Here is an example of what I am dealing with: http://jsfiddle.net/u9a1oLp6/5/

This specific code snippet is where I'm running into trouble:

$scope.searchFilter = function(row){
        var mercChecked = getChecked($scope.merchantCheckboxes);
        var brandChecked = getChecked($scope.brandCheckboxes);
        if(mercChecked.length == 0 && brandChecked.length == 0)
            return true;
        else{
            if($scope.merchantCheckboxes[row.MerchantName])
                return true;
            else{
                return row.BrandList.split(/,\s*/).some(function(brand){
                    return $scope.brandCheckboxes[brand];
                });
            }
        }
    };

Any suggestions or solutions for this issue?

javascriptjsonangularjscheckboxfilter

Answer №1

The problem is rather straightforward - you forgot to include a comma in your JSON code after the BrandMerchant section. I noticed this error while checking the browser's Console.

{
        "MerchantName": "amazon",
        "BrandMerchant":[
            {
        "BrandList": "pepe jeans, peter england, red tape"
            }
         ], // <<<<<<< THIS COMMA IS MISSING HERE
         "Description": "Amazon Store"
}

Additionally, it's unclear if you intended to convert the Brandlist into an array. Perhaps consider changing it to:
"BrandList": [item1, item2, etc]

Answer №2

To fix the issue, make sure you update the code that accesses the BrandList.

Ensure to access it using the BrandMerchant array:

$scope.searchFilter = function(row){
    var mercChecked = getChecked($scope.merchantCheckboxes);
    var brandChecked = getChecked($scope.brandCheckboxes);
    if(mercChecked.length == 0 && brandChecked.length == 0)
        return true;
    else{
        if($scope.merchantCheckboxes[row.MerchantName])
            return true;
        else{
            return row.BrandMerchant[0].BrandList.split(/,\s*/).some(function(brand){
                return $scope.brandCheckboxes[brand];
            });
        }
    }
};

Additionally, ensure you correctly construct the BrandList Array for proper filtering:

_.each($scope.records, function(i){
   if(i.BrandMerchant[0].BrandList)   
$scope.BrandList=_.union($scope.BrandList,i.BrandMerchant[0].BrandList.split(','       ));
});

For reference, check out this example on fiddle.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can async/await help in retrieving the value of a CORS request?

Trying to make a CORS request and utilize async/await to extract the value from it (using jquery). The functions createCORSRequest and executeCORSRequest seem to be functioning correctly, so the implementation details are not my main concern. The function ...

javascriptjqueryasynchronousasync-await

Unique form validation directive tailored to your specific needs

My current challenge involves validating a number based on its minimum and maximum values using angularJS. Initially, I attempted to utilize the built-in max validation provided by AngularJS for input number validation. However, it only seemed to work with ...

angularjsangularjs-directive

The margins within the div of the new tab are not applying as expected

Greetings! Currently, I am in the process of generating a dynamic form within a new tab using JavaScript. For some reason, the margin effects on the div element are not being applied correctly. Despite my attempts to set the margins using both classes and ...

javascripthtmlcss

Is it possible to create a React Component without using a Function or Class

At times, I've come across and written React code that looks like this: const text = ( <p> Some text </p> ); While this method does work, are there any potential issues with it? I understand that I can't use props in this s ...

javascriptclassreactjscomponentsstateless

npm: dealing with white spaces in package.json scripts

Having trouble getting this to work in a package.json file "zip": "C:\\Program Files\\7-Zip\\7z.exe a -tzip -mx9 yes.zip folder\\*" Encountering an error: 'C:\Program\' is not recognized as an ...

jsonshellnpmpackage.json

The 'fn' argument passed is not a valid function, instead it is a string

I am encountering an issue while trying to retrieve data from my server. The console doesn't provide any specific information about the error. My objective is to fetch JSON data from the server and use it to display the required information. I am util ...

javascriptphpangularjsjsonionic-framework

Is it better to use an array of dictionaries or a dictionary with arrays?

My PHP page generated this JSON data. Is it an array of dictionaries or just a dictionary with keys and dictionaries inside those keys? I lean towards the latter, but the conflicting opinions are making me uncertain. Also, will the structure change when ...

iosjsonnsarraynsdictionarynsjsonserialization

Creating a simple form page using Express JS

I am a beginner in the world of Node Js and Express Js, currently diving into learning from a book titled "Jump Start NodeJs" by Sitepoint. The author has provided a simple Login Form page as an example in the book. However, when trying to implement the co ...

javascriptnode.jsexpress

What is the best approach for creating a JSON object in MVC4 - writing a LINQ query or utilizing a stored procedure?

Hey everyone, I have a database with several tables including: [Options],[ProductAttributes],[Products],[ProductSKU],[ProductSKUOptionMappings] I have added this as an entity model to my project and now I want to write a LINQ query to retrieve columns f ...

jsonasp.net-mvc-4asp.net-web-api

Information about Doughnut chart in React using the react-chartjs-2 package

Is there a way to write text directly on a Doughnut using react-chartjs-2? Most answers I came across explain how to place text in the center of a Doughnut, but not actually on it. Here is an image for reference: ...

javascriptreactjstextreact-chartjs-2

Implement input validation in Angular using a custom directive

In order to implement input validation from the directive, I attempted the following code: return{ restrict: 'A', link: function(scope, elem, attrs){ attrs.$set('required', 'required'); } } Even thou ...

angularjs

Update a section of my PHP webpage using setInterval()

How can I refresh a PHP value every second using setInterval()? I am familiar with refreshing values in HTML, but now I want to do the same with PHP values. Here is my code: <script> setInterval(function() { <?php $urlMachineOnline = ' ...

javascriptphpjqueryhtmlajax

Looking to retrieve the raw HTTP header string in Node.js using express.js?

Currently, I am utilizing Node.js and express.js for my work. The project I am currently working on requires me to access the raw strings of the HTTP headers (charset and accepted). In express.js, there is a function available that can provide the charset ...

javascriptnode.jsexpress

Refresh the calendar to retrieve updated information

Utilizing the "events" elements of fullcalendar to retrieve data dynamically has been successful so far and I am satisfied with it. However, I am facing a challenge in passing a GET/POST parameter to the PHP page and refreshing the call to incorporate the ...

javascriptphpajaxfullcalendar

What is the best way to set up CORS in IE11 using C# with JQuery.ajax?

Having some trouble with CORS functionality in IE11. I need to perform ajax requests using jquery (or whatever the browser supports natively), without any additional libraries. These requests are cross-domain and function perfectly in Chrome and Firefox. ...

javascriptc#jqueryasp.netajax

What is preventing me from excluding the implicit parameter in this situation?

Here is how my code looks: def okJsonify[T](data: T)(implicit tjs: Writes[T]): Result = Results.Ok(toJson(data)(tjs)) The definition of toJson can be found in play-json_2.11-2.3.7-sources.jar!/play/api/libs/json/Json.scala def toJson[T](o: T)(implic ...

jsonscalaplayframeworkplayframework-2.0

Deciphering JSON information extracted from a document

I am currently working on a Node JS project where I need to read a file containing an array of JSON objects and display it in a table. My goal is to parse the JSON data from the array. Below is a sample of the JSON data: [{"name":"Ken", "Age":"25"},{"name" ...

javascriptnode.jsjsonexpress

Navigate through collections of objects containing sub-collections of more objects

The backend is sending an object that contains an array of objects, which in turn contain more arrays of objects, creating a tree structure. I need a way to navigate between these objects by following the array and then back again. What would be the most ...

javascriptangulartypescriptmultidimensional-array

Discover how to access all of the response headers from an HTTP request in Angular

Currently, I am utilizing HttpClient to make a request for a `json` file. My intention is to have the file cached using `ETag`, however, this feature does not seem to be functioning as expected. Upon investigation, it appears that the absence of sending of ...

javascriptangular

Tips for automating file uploads in HTML

I am having trouble filling the <input type="file"> element programmatically when trying to upload a file using a form. Can someone please provide me with guidance on how to accomplish this task? The method does not matter, I just want to achieve m ...

javascriptjqueryhtmlajax