如何从 json 文件中获取数据？ [复制]答案

【问题标题】：How to get data from a json file? [duplicate]如何从 json 文件中获取数据？ [复制]
【发布时间】：2013-05-29 21:43:42
【问题描述】：

我一直在尝试将 json 和 ajax 与 jquery 一起使用，但遇到了一些麻烦。我正在尝试从 json 文件中获取数据以显示在我的页面上。

目前我只是想将它发送到控制台，但我在控制台中得到了 null。我不确定自己做对了什么，做错了什么，所以我只是想知道是否可以得到一些指示。

这就是我的请求

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

这是 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"
        }
    ]
};

正如我所说，控制台使用 console.log 的响应为空。我看不出我要去哪里对或错。该请求是我从这里的帖子 (load json into variable) 中得到的一个 sn-p

任何指针将不胜感激

提前致谢

【问题讨论】：

标签： jquery ajax json

【解决方案1】：

您的文件不是 JSON！

以var refs = ....开头

取消赋值（和结尾的分号）。

（如果您真的很懒，请从@MikeB 的回答中复制/粘贴文件中应包含的内容）

【讨论】：

【解决方案2】：

我注意到的一件事是您的 JSON 无效。

第 39 行"size": "3.78MB",

第 44 行"size": "1.76MB",

第 79 行"size": "223KB",

都多了一个逗号

尝试将其用作您的 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"
        }
    ]
}

【讨论】：

我已经这样做了，但仍然为空。当我尝试执行 json = refs.referee 时，我得到 undefined 或 [object Object] 那么我是否需要使用 for 循环遍历裁判数组以获取所有数据？
如果你只想看文字，请使用JSON.stringify
我的理想目标是用这些数据填充表格。我知道我需要一个循环来做到这一点。我已经看到使用了一个常规的 for 循环和一个 for in 循环。你说哪个最好用？
你可以使用任何一个。我用谷歌搜索填充表 json jquery 并找到了一些可能有用的东西。这样做！

【解决方案3】：

您在分配数据之前返回 Json var。请测试此更改

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

【讨论】：

我已经尝试过了，但是我在 console.log(json) 上收到一个参考错误，说它没有定义。我尝试将其更改为下载的json，但得到相同的错误
@Chris 其他回复可能会指出您需要的更多更改。当您实现所有响应时，您将运行代码

【解决方案4】：

您可以使用 eval，一个本机 javascript 函数，将服务器响应（带有 json 格式的纯文本）转换为 json 对象。如果您使用某种 javascript 库，则那里必须有函数。在 jQuery 中有 Jquery.parseJson，在 Dojo 中有 fromJson

【讨论】：