CODEWITHSUNDEEP
javascriptjqueryarraysjsonobject
Andrew
Andrew

Reputation: 241

JSON - If Object's Value Equals

In my JSON file I have an object, with an array of multiple objects. I am wanting to call a function if the value of an object is equal to a certain number. If equal, then the objects with only that value would be inputted in to the selected div. What is the best way to go about this?

Example:
I have a "profiles" object and want to find out if the object "category" is equal to the number "1". If so, input those objects in to the first ".contentBox .viewed". If the "category" object is equal to the number "2", input those objects in to the second ".contentBox .viewed".

The JSON Data:

{
    "profiles": [
        { "firstName" : "John", "lastName" : "Doe", "gender": "male", "category": 1 },
        { "firstName" : "Jane", "lastName" : "Austen", "gender": "female", "category": 1 },
        { "firstName" : "Alexander", "lastName" : "Beth", "gender": "male", "category": 1 },
        { "firstName" : "Sarah", "lastName" : "Kelly", "gender": "female", "category": 2 },
        { "firstName" : "Rachel", "lastName" : "Haiworth", "gender": "female", "category": 2 },
        { "firstName" : "Thomas", "lastName" : "Alfae", "gender": "male", "category": 2 },
        { "firstName" : "William", "lastName" : "Lee", "gender": "male", "category": 2 }
    ]
}

Sample of the current JS:

xhr.onload = function() {
    if (xhr.status === 200) {
        responseObject = JSON.parse(xhr.responseText);
        responseObject.profiles.sort(function(a, b) {
            return SortAlphabetically(a.firstName, b.firstName);    
        });

        var newViewers = '';
        for (var i = 0; i < responseObject.profiles.length; i++) { 
            newViewers += '<span class="user">' + responseObject.profiles[i].firstName + ' ';
            newViewers += responseObject.profiles[i].lastName + '</span>';
            newViewers += ' ';
        }

        //Update Page With New Content
        var viewerSection = $('div.viewed');
        viewerSection.html(newViewers);
        checkViewers();

    }
};

xhr.open('GET', 'data.json', true);
xhr.send(null);

I am not sure if something along the lines of "profiles.category.val() === 1" might work or if there is a better route.

View the current and complete Plunker.

Upvotes: 0

Views: 10253

Answers (1)

Howard Renollet
Howard Renollet

Reputation: 4739

I made a very basic example for you that loads the names into columns of a table depending on the category.

var json = {
    "profiles": [
        { "firstName" : "John", "lastName" : "Doe", "gender": "male", "category": 1 },
        { "firstName" : "Jane", "lastName" : "Austen", "gender": "female", "category": 1 },
        { "firstName" : "Alexander", "lastName" : "Beth", "gender": "male", "category": 1 },
        { "firstName" : "Sarah", "lastName" : "Kelly", "gender": "female", "category": 2 },
        { "firstName" : "Rachel", "lastName" : "Haiworth", "gender": "female", "category": 2 },
        { "firstName" : "Thomas", "lastName" : "Alfae", "gender": "male", "category": 2 },
        { "firstName" : "William", "lastName" : "Lee", "gender": "male", "category": 2 }
    ]
}
for (var i = 0; i < json.profiles.length; i++) {
    var obj = json.profiles[i];
    if (obj.category == 1) {
        $("#content").append("<tr><td>" + obj.firstName + " " + obj.lastName + "</td><td></td></tr>");
    }
    else if (obj.category == 2) {
        $("#content").append("<tr><td></td><td>" + obj.firstName + " " + obj.lastName + "</td></tr>");
    }
}
table, tr, td, th{border: 1px solid black; border-collapse:collapse;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>Category 1</th>
            <th>Category 2</th>
        </tr>
    </thead>
    <tbody id="content">
            
    </tbody>
    <tbody>

    </tbody>
</table>

This is the part that sorts out which category the object belongs to, then extracts the first name and last name. For my example, it just drops it into a column of a table, but you could do anything you want to with the data once it's extracted.

for (var i = 0; i < json.profiles.length; i++) {
    var obj = json.profiles[i];
    if (obj.category == 1) {
        $("#content").append("<tr><td>" + obj.firstName + " " + obj.lastName + "</td><td></td></tr>");
    }
    else if (obj.category == 2) {
        $("#content").append("<tr><td></td><td>" + obj.firstName + " " + obj.lastName + "</td></tr>");
    }
}

Basically, you have the loop in your code, you just need to add in a conditional statement to check which category the object belongs to.

Upvotes: 4

Related Questions