Display JSON data members with one and more objects

Question

I have written a JavaScript to display data from JSON object. member employeeType has two employees members; one contains an array containing 3 employee objects, each containing three members and one has 3 members which are "employee", "id" and "email". I am able to display the members if a member has more than one objects but I am unable to display members of an object if the object is alone in employees. I might be unclear to explain it but you can have a look at this fiddle here.

My JSON looks like this;

var data = {"employeeSearch":{"employeeType":[{"employees":[{"employee":"name1", "id":"1", "email":"name1@company.com"},{"employee":"name2", "id":"2", "email":"name2@company.com"},{"employee":"name3", "id":"3", "email":"name3@company.com"}]},{"employees":{"employee":"name4", "id":"4", "email":"name4@company.com"}}]}};

This script display the data

for(var i = 0; i < data.employeeSearch.employeeType.length; i++) {
    for (var j = 0; j < data.employeeSearch.employeeType[i].employees.length; j++) {
        countItem++;
        output += "<tr><td>"+ countItem +"</td>" + 
                "<td>"+ data.employeeSearch.employeeType[i].employees[j].employee + "</td>" + 
                "<td>"+ data.employeeSearch.employeeType[i].employees[j].id +"</td>" + 
                "<td>"+ data.employeeSearch.employeeType[i].employees[j].email +"</td></tr>";
    }
}
return output;

This is how it looks in JsonViews

enter image description here

Now how can I display the last employee object? Please point me in the right direction and explain what wrong I am doing and what should I do.

JSFiddle

Your data structure is inconsistent. On time `employees` is an array, the other time it's an object. Make the data consistent. Use an array in both cases and it will work. — Felix Kling, Jun 10 '14 at 00:49
I am using external APIs and this is how they have developed the APIs. I cannot change the data structure. — mbkh10, Jun 10 '14 at 00:56
because index zero is non existent on the single value employee. you could convert it to an array — Shanimal, Jun 10 '14 at 01:00

score 0 · Answer 1 · answered Jun 10 '14 at 00:55

Notice that the second employees is not an array but an object, it should be an array.

The jsfiddle: http://jsfiddle.net/fish_ball/HASuY/1/

var data = {
  "employeeSearch": {
    "employeeType": [{
       "employees":[
          {"employee":"name1", "id":"1", "email":"name1@company.com"},
          {"employee":"name2", "id":"2", "email":"name2@company.com"},
          {"employee":"name3", "id":"3", "email":"name3@company.com"}
        ]},{
        // Notice the differences HERE!
        "employees":[
          {"employee":"name4", "id":"4", "email":"name4@company.com"}
        ]
    }]
  }
};

Felix Kling · Accepted Answer · 2014-06-10T01:10:24.023

0

As already said, if you can, change the data structure so that you have an array in both cases.

If you can't do that and assuming that an employee never has a length property, you can simple test for it and then convert it to an array at runtime:

for(var i = 0; i < data.employeeSearch.employeeType.length; i++) {
    var employees = data.employeeSearch.employeeType[i].employees;
    if (typeof employees.length !== 'number') { // not an array? Make it one.
        employees = [employees];
    }
    for (var j = 0; j < employees.length; j++) {
        // ...
    }
}

edited Jun 10 '14 at 01:10

answered Jun 10 '14 at 01:04

Felix Kling

795,719
175
1,089
1,143

This now works fine. But I don't understand this piece of code, "typeof employees.length !== 'number'". Should not it be "typeof employees.length !== 'array'". If it is not an array then make it an array. ?? – mbkh10 Jun 10 '14 at 01:21
No. To find out whether `employees` is an array or not, I see if it has a `length` property (which has a number as value), since arrays have such a property. There are other ways to test whether a value is an array (http://stackoverflow.com/q/767486/218196). – Felix Kling Jun 10 '14 at 01:37
`employees.length` would be `typeof` `number` since it is a `.length`. He copy the `data.employeeSearch.employeeType[i].employees` to become a new variable `employees`. If `employees.length` is not `typeof` `number`, he put the `employees` into the array bracket to turn it into an array and assign back to the same variable `empolyees` then finally iterate it. – jhyap Jun 10 '14 at 01:37

jhyap · Answer 3 · 2014-06-10T01:31:45.100

Now how can I display the last employee object? Please point me in the right direction and explain what wrong I am doing and what should I do.

Like what fish_ball said, your json format is not ordinary.

Your data.employeeSearch.employeeType[0] contain an array of objects empployees whereas data.employeeSearch.employeeType[1] contain a single object employees

Any how, you can access the last employee object like below:

getEmployees = function() {
    var countItem = 0;

            for (var j = 0; j < data.employeeSearch.employeeType[0].employees.length; j++) {
                countItem++;
                output += "<tr><td>"+ countItem +"</td>" + 
                            "<td>"+ data.employeeSearch.employeeType[0].employees[j].employee + "</td>" + 
                            "<td>"+ data.employeeSearch.employeeType[0].employees[j].id +"</td>" + 
                            "<td>"+ data.employeeSearch.employeeType[0].employees[j].email +"</td></tr>";
            }

                            output += "<tr><td>"+ (++countItem) +"</td>" + 
                            "<td>"+ data.employeeSearch.employeeType[1].employees.employee + "</td>" + 
                            "<td>"+ data.employeeSearch.employeeType[1].employees.id +"</td>" + 
                            "<td>"+ data.employeeSearch.employeeType[1].employees.email +"</td></tr>";


        return output;
    }

JSFiddle Demo

Like what Felix King pointed out, empolyeeType might not always be only 2. If that is the case, then you will need to check the empolyees.length or typeof and iterate the array if the empolyees.length is >0 or typeof is not number. See the example below:

getEmployees = function() {
var countItem = 0;

for (var i = 0; i < data.employeeSearch.employeeType.length; i++){

    if (data.employeeSearch.employeeType[i].employees.length > 0){

        for (var j = 0; j < data.employeeSearch.employeeType[i].employees.length;j++){
            countItem++;            
            output += "<tr><td>"+ countItem +"</td>" + 
                        "<td>"+ data.employeeSearch.employeeType[i].employees[j].employee + "</td>" + 
                        "<td>"+ data.employeeSearch.employeeType[i].employees[j].id +"</td>" + 
                        "<td>"+ data.employeeSearch.employeeType[i].employees[j].email +"</td></tr>";
        }

    }else{
                        output += "<tr><td>"+ (countItem+1) +"</td>" + 
                        "<td>"+ data.employeeSearch.employeeType[i].employees.employee + "</td>" + 
                        "<td>"+ data.employeeSearch.employeeType[i].employees.id +"</td>" + 
                        "<td>"+ data.employeeSearch.employeeType[i].employees.email +"</td></tr>";
    }

}


    return output;
}

Another JSFiddle Demo

What makes you think that `employeeType` will only ever have two entries? — Felix Kling, Jun 10 '14 at 01:06

Display JSON data members with one and more objects

3 Answers3