How to get data from a json file?

Question

I have been trying to use json and ajax with jquery and I am running in to some trouble. I am trying to get data from a json file to display on my page.

At the moment I am just trying to send it to the console but I am getting null in the console. I am not sure what I am doing right and what I am doing wrong so I was just wondering if I could get some pointers.

This is what I have for the request

$(document).ready(function() {
var json = (function () {
var json = null;
$.ajax({
    'async': false,
    'global': false,
    'url': 'js/refs.json',
    'dataType': "json",
    'success': function (refs) {
        json = refs;
    }
});
return json;
})(); 
console.log(json);

This is what is in refs.json

var refs = {
"referee": [
        {
            "name": "Ellie",
            "company": "University",
            "position": "Lecturer",
            "address": "",
            "phone": "5750",
            "email": "ellie@ac.uk",
            "type": "Education"
        },
        {
            "name": "Matthew",
            "company": "",
            "position": "",
            "address": "23 High Street",
            "phone": " 962",
            "email": "matthew@aaa.com",
            "type": "Character"
        }
    ],
"project": [
        {
            "tab": "Dissertation",
            "title": "Can technology in the home be used to enhance learning of numeracy, in conjunction with the nantional curriculum",
            "yr": "2013",
            "link": [
                {
                    "name": "Artefact",
                    "links": "fypc",
                    "size": "",
                    "misc": ""
                }
                ],
            "docs": [
                {"type": "doc",
                "links": "fyp.docx",
                "size" :"3.78MB",
                },
                {"type": "pdf",
                "links": "fyp.pdf",
                "size" :"1.76MB",
                }
                ],
            "purpose": "School - Anglia Ruskin University",
            "grade": "Not yet awarded",
            "sshot": "fypc.png"
        },
        {
            "tab": "Network and IT Operations",
            "title": "Virtual inter-office network with firewall. (Built using PacketTracer 5.3.3)",
            "yr": "2013",
            "link": [
                {
                    "name": "Serial Cable Connection Version",
                    "links": "",
                    "size": "204KB",
                    "misc": "(Submitted version)"
                },
                {
                    "name": "Frame Relay Version",
                    "links": "",
                    "size": "129KB",
                    "misc": ""
                },
                {
                    "name": "Packet Tracer 5.3.3 Download",
                    "links": "",
                    "size": "48.2MB",
                    "misc": "(.zip)"
                }
            ],
            "docs": [
                {
                    "type": "doc",
                    "links": "nio.docx",
                    "size" :"223KB",
                },
                {
                    "type": "pdf",
                    "links": "nio.pdf",
                    "size" :"943.KB",
                }
                ],
            "purpose": "School - Anglia Ruskin University",
            "grade": "Not yet awarded",
            "sshot": "nio1.png"
        }
    ]
};

As I say, the response from the console using console.log is null. I can't see where I am going right or wrong. The request is a snippet I got from a post on here (load json into variable)

Any pointers would be much appreciated

Thanks in advance

score 4 · Answer 1 · answered May 29 '13 at 21:45

4

Your file is not JSON!

It starts with var refs = ....

Suprress the assignment (and trailing semicolon).

(if you are really lazy, copy/paste what should be in the file from @MikeB's answer)

answered May 29 '13 at 21:45

fge

119,121
33
254
329

score 2 · Answer 2 · answered May 29 '13 at 21:46

One thing that I noticed was that your JSON is invalid.

Line 39 "size": "3.78MB",

Line 44 "size": "1.76MB",

Line 79 "size": "223KB",

All had an extra comma

Try using this as your JSON

{
    "referee": [
        {
            "name": "Ellie",
            "company": "University",
            "position": "Lecturer",
            "address": "",
            "phone": "5750",
            "email": "ellie@ac.uk",
            "type": "Education"
        },
        {
            "name": "Matthew",
            "company": "",
            "position": "",
            "address": "23 High Street",
            "phone": " 962",
            "email": "matthew@aaa.com",
            "type": "Character"
        }
    ],
    "project": [
        {
            "tab": "Dissertation",
            "title": "Can technology in the home be used to enhance learning of numeracy, in conjunction with the nantional curriculum",
            "yr": "2013",
            "link": [
                {
                    "name": "Artefact",
                    "links": "fypc",
                    "size": "",
                    "misc": ""
                }
            ],
            "docs": [
                {
                    "type": "doc",
                    "links": "fyp.docx",
                    "size": "3.78MB"
                },
                {
                    "type": "pdf",
                    "links": "fyp.pdf",
                    "size": "1.76MB"
                }
            ],
            "purpose": "School - Anglia Ruskin University",
            "grade": "Not yet awarded",
            "sshot": "fypc.png"
        },
        {
            "tab": "Network and IT Operations",
            "title": "Virtual inter-office network with firewall. (Built using PacketTracer 5.3.3)",
            "yr": "2013",
            "link": [
                {
                    "name": "Serial Cable Connection Version",
                    "links": "",
                    "size": "204KB",
                    "misc": "(Submitted version)"
                },
                {
                    "name": "Frame Relay Version",
                    "links": "",
                    "size": "129KB",
                    "misc": ""
                },
                {
                    "name": "Packet Tracer 5.3.3 Download",
                    "links": "",
                    "size": "48.2MB",
                    "misc": "(.zip)"
                }
            ],
            "docs": [
                {
                    "type": "doc",
                    "links": "nio.docx",
                    "size": "223KB"
                },
                {
                    "type": "pdf",
                    "links": "nio.pdf",
                    "size": "943.KB"
                }
            ],
            "purpose": "School - Anglia Ruskin University",
            "grade": "Not yet awarded",
            "sshot": "nio1.png"
        }
    ]
}

I have done that but still get null. When I try to do json = refs.referee I get undefined or [object Object] Would I then need to use a for loop to loop through the referee array to get all the data? — Chris, May 29 '13 at 21:51
My ideal aim of this is to populate a table with this data. I know that I would need a loop to do this. I have seen a regular for loop used and also a for in loop. Which would be the best to use would you say? — Chris, May 29 '13 at 22:06
you could use either. I googled populate table json jquery and found some stuff that might be useful. do that! — MikeB, May 29 '13 at 22:39

score 1 · Answer 3 · answered May 29 '13 at 21:50

1

You are returning Json var before you assigned the data. Please test this changes

var json= null;
$(document).ready(function() {

$.ajax({
    'async': false,
    'global': false,
    'url': 'js/refs.json',
    'dataType': "json",
    'success': function (refs) {
        json= refs;
        LoadedJSON();
    }
});
}); 

function LoadedJSON(){
console.log(json);
}

answered May 29 '13 at 21:50

Alberto León

2,879
2
25
24

I have tried this, but I get a reference error on console.log(json) saying it is not defined. I have tried changing it to downloadedjson but get the same error – Chris May 29 '13 at 21:57
@Chris the other responses could point you in more changes that you need. When you implement all responses, you will have the code running – Alberto León Jun 01 '13 at 08:13

score 0 · Answer 4 · answered May 29 '13 at 22:15

You can use eval, a native javascript function to convert server responses (plain text with json formating) to json objects. If you are using some sort of javascript library you there must be functions there. In jQuery there is Jquery.parseJson and in Dojo there is fromJson

How to get data from a json file?

4 Answers4

Linked