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 plete Plunker.

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 plete Plunker.

• javascript
• jquery
• arrays
• json
• object

• 1 Doesn't JS's default sort sort alphabetically? – Benjamin Gruenbaum Commented Jan 5, 2015 at 19:57
• Just profile[i].category although you might want to use Array#filter that could make your life easier (google mdn filter) – Benjamin Gruenbaum Commented Jan 5, 2015 at 19:58
• if (responseObject.profiles[i].category == 1) – Barmar Commented Jan 5, 2015 at 19:58
• .val() is used to get (or set) values on form control elements, not for dealing with objects – charlietfl Commented Jan 5, 2015 at 20:11

1 Answer 1

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./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.