Uncaught Syntax Error: Unexpected Token : getJSON

Question

I am trying to populate my page dynamically using the data from my JSON file I am getting this error

"Uncaught Syntax Error: Unexpected Token :" on line 2.

So here's my json file, there is more to it but I didnt want to post the entire file.

{
"jobs": [
    {
        "title": "Graduate IT Development Programme #1",
        "path": "/path/to/job",
        "type": "Graduate job",
        "location": [
            "North West",
            "North East"
        ],
        "closingDate": "20/05/2014",
        "continuous": false,
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "Java",
            "CI",
            "Testing"
        ],
        "contract": "Permanent",
        "salary": {
            "lower": 14501,
            "upper": 17000,
            "currency": "£"
        },
        "employer": {
            "name": "Mercer",
            "href": "/path/to/employer",
            "logo": "img/mercer-logo.png"
        }
    },
    {
        "title": "Web Developer",
        "path": "/path/to/job",
        "type": "Graduate job",
        "location": ["Greater London"],
        "continuous": true,
        "skills": [
            "HTML",
            "CSS",
            "JavaScript"
        ],
        "salary": {
            "lower": 16000,
            "upper": 21000,
            "currency": "€"
        },
        "employer": {
            "name": "FDM plc",
            "href": "/path/to/employer",
            "logo": "img/fdm-logo.png"
        }
    },
    {
        "title": "Front-end Web Developer",
        "path": "/path/to/job",
        "type": "Graduate scheme",
        "location": ["Greater London"],
        "closingDate": "20/04/2014",
        "continuous": false,
        "skills": [
            "HTML",
            "CSS",
            "Java",
            "Testing"
        ],
        "salary": {
            "lower": 17001,
            "upper": 19500,
            "currency": "£"
        },
        "employer": {
            "name": "British Airways plc",
            "href": "/path/to/employer",
            "logo": "img/british-airways-logo.png"
        }
    }
    ]
}

And here's my .getJSON function (document.write is just temporary until it's working)

$(document).ready(function() {
     $.getJSON( 'js/jobs.json',function( result ){
        document.write(result.jobs.title);
     });
});

So I'm not sure what the problem is. Having looked at other questions and other solutions I feel somewhat more confused than I was before.

Answer 1

If you have looked at the json structure, jobs is an array of objects. Therefore title cannot be directly accessed. You should get it by the index, for eg.

$(document).ready(function () {
    $.getJSON('js/jobs.json', function (result) {
        // in case the result is not in json data type
        // otherwise not necessary
        result = JSON.parse(result); 
        result.jobs.map(function (v) {
            console.log(v.title);
            document.write(v.title);
        });        
    });
});

DEMO

EDITED DEMO

Answer 2

try using stringify, like below

$(document).ready(function() {
        $.getJSON( 'js/jobs.json',function( result ){
            var jsonString = JSON.stringify(result);
            var result = JSON.parse(jsonString);
            console.log(result); 
            //document.write(result.jobs.title);
        });
});

Hope this helps you out.

Answer 3

If the error is coming up after removing that AJAX call, the issue may actually be in one of your HTML pages that is trying to include something such as

<script src="js/myJsonFile.json"></script>

If that is the case, you need only remove that line since you want to load the file through an AJAX call and don't need to try and include the file in the header