导入 json 文件时遇到问题答案

【问题标题】：Trouble importing json file导入 json 文件时遇到问题
【发布时间】：2020-06-09 09:02:06
【问题描述】：

我正在尝试使用公共 json 文件作为具有以下 javascript 的数据源：

const url = "https://data.melbourne.vic.gov.au/resource/ez6b-syvw.json";

var table = new Tabulator("#example-table", {
    ajaxConfig:{
        method: 'GET'
    },
    ajaxURL: url, //ajax URL
    index:"MessageID",
    autoResize:true,
    layout:"fitData", //layout options
    placeholder:"Awaiting Data...",
    columns:[ //Define Table Columns
        {title:"timestamp", field:"timestamp"},
        {title:"temperature", field:"temp_avg"},
        {title:"humidity", field:"humidity_avg"},
        {title:"latitude", field:"latitude"},
        {title:"longtitude", field:"longtitude"},

    ],

    ajaxResponse:function(url, params, response){
        //url - the URL of the request
        //params - the parameters passed with the request
        //response - the JSON object returned in the body of the response.

        return response; //pass the data array into Tabulator
    },

    rowClick:function(e, row){ //trigger an alert message when the row is clicked
    alert("Row " + row.getData().MessageId + " Clicked!!!!");
    },
});

但我在 chrome 中收到以下控制台消息：

CORS 策略已阻止从源“http://192.168.0.6”获取“https://data.melbourne.vic.gov.au/resource/ez6b-syvw.json”的访问权限：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 access-control-allow-origin . data.melbourne.vic.gov.au/resource/ez6b-syvw.json:1 加载资源失败：net::ERR_FAILED tabulator.min.js：5 Ajax 加载错误 - 连接错误：TypeError：无法获取（匿名）@tabulator.min.js:5 tabulator.min.js:5 Ajax 加载错误：TypeError：获取失败

我不知道我做错了什么？

请帮忙。

谢谢。

【问题讨论】：

看看：tabulator.info/docs/4.6/data#ajax-cors。如果直接点击链接会发生什么？
感谢您的指点。我现在移动到服务器上的本地文件以获取数据。我在 ESP32 上有一个网络服务器，但它生成以下格式的 json 数据：
感谢您的指点。我现在移动到服务器上的本地文件以获取数据。我在 ESP32 上有一个网络服务器，但它生成以下格式的 json 数据文件：{"Location":"Livingroom","SingnalStrength":-82,"DeviceMode":0,"DeviceIP":26,"WiFiChannel":7, “睡眠时间”：1，“正常运行时间”：138} {“位置”：“客厅”，“信号强度”：-82，“设备模式”：0，“设备IP”：26，“WiFiChannel”：7，“睡眠时间”： 1,"UpTime":138} 我试过了，但格式与制表符不兼容。我可以做些什么来将其转换为制表符中的兼容格式。谢谢。
如果数据是对象数组，那么只要 Tabulator 表中的字段名称与对象键匹配，它就应该兼容。您遇到什么错误？
tabulator.min.js:6 Ajax Load Error: SyntaxError: Unexpected token , in JSON at position 119 (anonymous) @ tabulator.min.js:6 [Violation] 执行 JavaScript 时强制重排耗时 236ms

标签： tabulator

【解决方案1】：

从您的资源中获取数据似乎存在问题。 Tabulator 似乎总是发送Access-Control-Allow-Origin，但您的资源不允许这样做。因此，一种解决方法是使用您自己的 fetch 请求而不是 Tabulator ajax 选项。然后你可以在表实例上使用setData。

这是一个例子。 https://jsfiddle.net/nrayburn/8wd3zo9q/33/

我不确定这是否是一个错误，或者我只是没有找到解决办法。

【讨论】：

是的，适用于外部数据文件。谢谢，但我仍然要解决本地文件问题。我在早期的 cmets 中提供了错误消息。
我尝试了本地文件源的解决方案，但在 Chrome 控制台中得到以下结果： Uncaught (in promise) SyntaxError: Unexpected token , in JSON at position 105 Promise.then (async) (anonymous) @ index1. htm:122 getData().then((data) => { //以上对这一行的引用。
这只是意味着您的数据不是有效的 JSON，因此在将其移动到本地源时发生了一些事情。从错误来看，在字符位置 105 处似乎有一个 ,，并且它不希望那里有逗号。

【解决方案2】：

将此添加到您的 ajaxConfig 中，您就可以开始了。

ajaxConfig:{ 模式：“无cors”，
方法：“获取” }

【讨论】：