Fault Syntax Error: Unexpected Token: getJSON

Question

I am trying to populate my page dynamically using data from my JSON file. I get this error.

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

I am new to this, so please tell me.

So, here is my json file, there is something else, but I do not want to publish the whole 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 is my .getJSON function (document.write only temporarily until it works)

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

So I'm not sure what the problem is. Looking at other questions and other solutions, I feel a little more embarrassed than before.

Answer 1

json, jobs - . title . , ,

$(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

stringify,

$(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);
        });
});

, .

Answer 3

AJAX, HTML-, -

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

, , AJAX