Getting the above error in Chrome console while the actual script works and generates the right output, wonder how I can get rid of this error and what is causing it.

JSFiddle: /

HTML Code:

<ul id="menu"></ul>
<script src="//ajax.googleapis/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

JS Code:

$(function(){
var data = [{"weekending":"09\/10\/2013","jobs":[{"jobnumber":"1001","jobaddress":"Test1001","employees":[{"employeenumber":"1","name":"James Blabla","class":"FHM","notes":"xx","nt-wkmon":"2","t12-wkmon":"5","dt-wkmon":"4","status-wkmon":"Public Holiday","startTime-wkmon":"4","finishTime-wkmon":"6","nt-wktue":"7"}]},{"jobnumber":"1002","jobaddress":"Test1002","employees":[{"employeenumber":"1","name":"Cameron Le","class":"FHQ","notes":"xx","nt-wkmon":"2","t12-wkmon":"5","dt-wkmon":"4","status-wkmon":"Public Holiday","startTime-wkmon":"4","finishTime-wkmon":"6","nt-wktue":"7"},{"employeenumber":"2","name":"David Le","class":"FHQ","notes":"xx","nt-wkmon":"2","t12-wkmon":"5","dt-wkmon":"4","status-wkmon":"Public Holiday","startTime-wkmon":"4","finishTime-wkmon":"6","nt-wktue":"7"}]},{"jobnumber":"1003","jobaddress":"Test1003","employees":[{"employeenumber":"1","name":"Nick G","class":"sdf","notes":"sdf","nt-wkmon":"2","t12-wkmon":"5","dt-wkmon":"4","status-wkmon":"Public Holiday","startTime-wkmon":"4","finishTime-wkmon":"6","nt-wktue":"7"}]}]}];

for(var i = 0, j = data[0].weekending.length; i<j; i++) {
    rootMenu = data[0].jobs[i];
    $("#menu").append("<li id='job_" + rootMenu.jobnumber + "'>" + rootMenu.jobnumber);
    if(rootMenu.hasOwnProperty("employees")) {
        $("#menu").append("<ul id='employees_job_" + rootMenu.jobnumber + "'>");
        for(var n = 0, m = rootMenu.employees.length; n<m; n++) {
            var subMenu = rootMenu.employees[n];
            if(subMenu.hasOwnProperty("name")) {
                $("#employees_job_" + rootMenu.jobnumber).append("<li>" + subMenu.name + "</li>");
            }
        }
        $("#menu").append("</ul>");
    } else {
        $("#menu").append("</li>");
    }
}
});

Note: I'm still in the development stage of my application and I have the flexibility to change and manipulate the data structure, if embedded JSON data looks bad I can change it, actual data is stored in a XML file and then read by PHP and outputted as JSON.

Getting the above error in Chrome console while the actual script works and generates the right output, wonder how I can get rid of this error and what is causing it.

JSFiddle: http://jsfiddle/wJUeP/

HTML Code:

<ul id="menu"></ul>
<script src="//ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>

JS Code:

$(function(){
var data = [{"weekending":"09\/10\/2013","jobs":[{"jobnumber":"1001","jobaddress":"Test1001","employees":[{"employeenumber":"1","name":"James Blabla","class":"FHM","notes":"xx","nt-wkmon":"2","t12-wkmon":"5","dt-wkmon":"4","status-wkmon":"Public Holiday","startTime-wkmon":"4","finishTime-wkmon":"6","nt-wktue":"7"}]},{"jobnumber":"1002","jobaddress":"Test1002","employees":[{"employeenumber":"1","name":"Cameron Le","class":"FHQ","notes":"xx","nt-wkmon":"2","t12-wkmon":"5","dt-wkmon":"4","status-wkmon":"Public Holiday","startTime-wkmon":"4","finishTime-wkmon":"6","nt-wktue":"7"},{"employeenumber":"2","name":"David Le","class":"FHQ","notes":"xx","nt-wkmon":"2","t12-wkmon":"5","dt-wkmon":"4","status-wkmon":"Public Holiday","startTime-wkmon":"4","finishTime-wkmon":"6","nt-wktue":"7"}]},{"jobnumber":"1003","jobaddress":"Test1003","employees":[{"employeenumber":"1","name":"Nick G","class":"sdf","notes":"sdf","nt-wkmon":"2","t12-wkmon":"5","dt-wkmon":"4","status-wkmon":"Public Holiday","startTime-wkmon":"4","finishTime-wkmon":"6","nt-wktue":"7"}]}]}];

for(var i = 0, j = data[0].weekending.length; i<j; i++) {
    rootMenu = data[0].jobs[i];
    $("#menu").append("<li id='job_" + rootMenu.jobnumber + "'>" + rootMenu.jobnumber);
    if(rootMenu.hasOwnProperty("employees")) {
        $("#menu").append("<ul id='employees_job_" + rootMenu.jobnumber + "'>");
        for(var n = 0, m = rootMenu.employees.length; n<m; n++) {
            var subMenu = rootMenu.employees[n];
            if(subMenu.hasOwnProperty("name")) {
                $("#employees_job_" + rootMenu.jobnumber).append("<li>" + subMenu.name + "</li>");
            }
        }
        $("#menu").append("</ul>");
    } else {
        $("#menu").append("</li>");
    }
}
});

Note: I'm still in the development stage of my application and I have the flexibility to change and manipulate the data structure, if embedded JSON data looks bad I can change it, actual data is stored in a XML file and then read by PHP and outputted as JSON.

• javascript
• xml
• json

• 1 cache $("#menu") in variable, outside of loop .. it will improve performance – rab Commented Oct 10, 2013 at 7:19
• Done, cheers for that. – Nick Germi Commented Oct 10, 2013 at 7:27

2 Answers 2

the for loop condition is incorrect.

you have used j = data[0].weekending.length which is equal to 10 and you are iterating over the data[0].jobs object which has only 3 jobs. You are iterating more than 3 times over the jobs and hence you are getting the error.

checkout the fiddle http://jsfiddle/wJUeP/7/

The error is here:

j = data[0].weekending.length

This is returning 10, which is the length of the string in the weekending property == 10 ("09/10/2013") I think you need this instead:

j = data[0].jobs.length