Question

I have a codeigniter app and in one of my views, i have an ajax call to an API that returns json data. Once i get the data, I loop through it and append records to an existing table.
There are two ways to run this ajax call. One is to request “all” data, the other is to filter by location.
Both ways return data, but when Im trying to loop through the filtered data set, the ajax is failing.

Here’s the code that loops through the record set:

if (JSONdata.length != 0) 
{
        //create a heading row and attach it to the existing table.
        var heading = $('<tr id="tblheading" naming="tblheading">').appendTo($('#switchrecords'));
        heading.append($('<td>').append().text('Name'));
        heading.append($('<td>').append().text('Object ID'));

        //loop through each JSONdata item in the array and append another row to the switchrecords table.
        $.each(JSONdata, function(i, objswitch) {                           
            console.log('objectid is:'.objswitch.id);
            console.log(objswitch.id);
            var row = $('<tr>').appendTo($('#switchrecords'));
            row.append($('<td>').append($('<a href='+ BASEPATH + 'index.php/controller/methodname/' + objswitch.id + '>').text(objswitch.name)));
            row.append($('<td>').append(objswitch.id).text(objswitch.id));
});

Here’s what I’ve done so far:

1. I’ve made sure that both result sets have the same fields, namely “id” and “name”. Mind you, the filtered data set includes more fields than the non filtered result but i don’t think that should matter.

2. I’ve used console.log to dump both result sets… Here’s a snippet from both. The first one is ALL and the other is filtered.

   [{“name”:”888-12-993-99-1″,”id”:”1″,”dict_value”:”compact”},{“name”:”888-22-SR1-RTR-1″,”id”:”2″,”dict_value”:”compact”},{“name”:”888-21-SR1-SW-1″,”id”:”3″,”dict_value”:”compact”},{“name”:”888-11-SR2-SW-2″,”id”:”4″,”dict_value”:”compact”},….etc

   [{“parent_id”:”2″,”tag_id”:”10″,”Location”:”Building1″,”id”:”7″,”name”:”888-22-228-22-1″,”label”:null,”asset_no”:”1026067″,”objtype_id”:”1503″},{“parent_id”:”2″,”tag_id”:”5″,”Location”:”Building2″,”id”:”6″,”name”:”888-2-263-88-1″,”label”:null,”asset_no”:”1026068″,”objtype_id”:”1503″}, …. etc.

3. As you can see from the code snippet, I’ve tried to add some debug information to see what’s happening inside the loop. However, I’m getting the following error message on the first console.log() call:

   [17:13:30.675] TypeError: “objectid is:”.objswitch is undefined

I’m not really too sure how to resolve this. Any suggestions would be appreciated.
I apologize in advance if it’s a silly mistake! I’ve been programming all day and my brain is mush! =)

Thanks in advance for the help.

Answer 1

Looks like your syntax is wrong for concatenation .. It should be done using a + , I see you are using a .
Instead of objswitch try using this

$.each(JSONdata, function(i) {                           
    console.log('objectid is:' +  this.id);
    console.log(this.id);
    var row = $('<tr>').appendTo($('#switchrecords'));
    row.append($('<td>').append($('<a href='+ BASEPATH + 'index.php/switches/getswitchdetails/' + this.id + '>').text(this.name)));
    row.append($('<td>').append(this.id).text(this.id));
});

Otherwise try using the variable in general

$.each(JSONdata, function(i) {                           
    console.log('objectid is:'+  JSONdata[i].id);
    console.log(JSONdata[i].id);
    var row = $('<tr>').appendTo($('#switchrecords'));
    row.append($('<td>').append($('<a href='+ BASEPATH + 'index.php/switches/getswitchdetails/' + JSONdata[i].id + '>').text(JSONdata[i].name)));
    row.append($('<td>').append(JSONdata[i].id).text(JSONdata[i].id));
});