Javascript Object to filter json Array

Question

I've got multiple checkboxes in an HTML form. When I click on a button, the checked values are put into an JavaScript object and a filter function is triggered.

this.filterChkbx.on('click', function() {
    _this.checkedFilter.push({
        filterEl: this.value
    });
});

In the filter function I'm pulling a json file.

$.ajax("ajax/search-test-data.json")
.done(function (data){
    ...

Now I want to show the objects matching the values from the form. That´s what my json looks like:

{
"searchtest" : [
  {
    "id" : "001",
    "section": "Hochschule",
    "group": "Professoren",
    "location": "Kaiserslautern",
    "date": "HS 2015/11",
    "description" : "Lorem ipsum dolor sit amet",
    "details" : "VZ",
    "deadline" : "27.12.2015",
    "topic" : "Lorem"
  },

  {
    "id" : "002",

And this is my form:

<form class="filterThisResults" action="ajax/search-test-data.json" method="GET">

    <ul class="filter-list">
        <button type="reset">Filter löschen</button>

        <div class="search-filter-section">
            <li>
                <h2>Bereich</h2>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="section" value="Hochschule">
                <label for="check1">Hochschule</label>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
                <label for="check2">Angewandte Ingenierwissenschaften</label>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="section" value="Bauen & Gestalten">
                <label for="check3">Bauen & Gestalten</label>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="section" value="BWL">
                <label for="check4">BWL</label>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="section" value="Informatik">
                <label for="check5">Informatik</label>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="section" value="Logistik">
                <label for="check6">Logistik</label>
            </li>
        </div>

        <div class="search-filter-group">
            <li>
                <h2>Gruppen</h2>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="group" value="Professoren">
                <label for="check1">Professoren</label>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="group" value="Studenten">
                <label for="check2">Studenten</label>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="group" value="Angestellte">
                <label for="check3">Angestellte</label>
            </li>
        </div>

        <div class="search-filter-location">
            <li>
                <h2>Standort</h2>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="location" value="Kaiserslautern">
                <label for="check1">Kaiserslautern</label>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="location" value="Pirmasens">
                <label for="check2">Pirmasens</label>
            </li>

            <li>
                <input class="filterCheckbx" type="checkbox" name="location" value="Zweibrücken">
                <label for="check3">Zweibrücken</label>
            </li>
        </div>

        <div class="search-filter-topic">
            <li>
                <h2>Thema</h2>
            </li>

            <li>    
                <select class="filterCheckbx" id="topic" name="topic" size="3">
                    <option value="Lorem">Lorem</option>
                    <option value="Ipsum">Ipsum</option>
                    <option value="Dolor">Dolor</option>
                </select>   
            </li>
        </div>

        <li>
            <button class="submit-filter" type="submit">Ergebnisse anzeigen</button>
        <li>
    </ul>   
</form>

What´s the way to go through the json and check which items are true. When more than one item in a form-section is selected, the results are enlarged.

The for-loop would be quite huge, I already implemented that for testing. Working - but nice and clean is looking kinda different ^^ — David Nnamremmiz
– David Nnamremmiz, Commented Nov 24, 2015 at 11:32

Andreas · Accepted Answer · 2015-11-24 11:32:49Z

2

Array.prototype.filter(): creates a new array with all elements that pass the test implemented by the provided function

Array.prototype.some(): tests whether some element in the array passes the test implemented by the provided function

.done(function(data) {
    var elementsFoundInData = data.searchtest.filter(function(test) {
        return checkedFilter.some(function(flt) {
            return test.section === flt.filterEL;
        });
    });

    // show found elements...
})

This is more like pseudo code as you probably would have to adjust the variables (checkFilter, data) a little bit depending on their scopes/types.

answered Nov 24, 2015 at 11:32

Andreas

21.9k7 gold badges52 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Nnamremmiz Over a year ago

Looking pretty neat! Trying to implement it and give you a feedback in a few hours! Thanks in advance!

David Nnamremmiz Over a year ago

Wow that was straight forward! Working awesomely easy and thanks for the explanation! Have a great day mate

Deepanshu Gupta · Accepted Answer · 2015-11-24 12:09:48Z

1

Instead push values in object, why should you not try with 'serialize' object property of jQuery.

Try this to store all form data in single string and then use filer and some method to match the values.

function showValues() {
    var str = $( "form" ).serialize();
    console.log(str);
  }
$('[type=reset]').on("click",function(e){
 showValues();
  event.preventDefault();
})

answered Nov 24, 2015 at 12:09

Deepanshu Gupta

2401 silver badge5 bronze badges

Collectives™ on Stack Overflow

Javascript Object to filter json Array

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related