格式良好的 JSON 文件答案

【问题标题】：Well Formed JSON file格式良好的 JSON 文件
【发布时间】：2020-07-07 13:57:18
【问题描述】：

我正在尝试设置一个本地 json 文件，我可以使用该文件来模拟我正在处理的 vuejs 项目的 axios 的一些数据。

遵循本指南 https://medium.com/@negarjf/how-to-access-a-static-json-file-in-vue-cli-3-8943dc343f95

除了我的 json 文件将数据作为一个大字符串返回之外，一切似乎都正常吗？

我的 JSON 文件看起来像这样......

[{label: "Assamese", count: 13},
{label: "Bengali", count: 83},
{label: "Bodo", count: 1.4},
{label: "Dogri", count: 2.3},
{label: "Gujarati", count: 46},
{label: "Hindi", count: 300},
{label: "Kannada", count: 38},
{label: "Kashmiri", count: 5.5},
{label: "Konkani", count: 5},
{label: "Maithili", count: 20},
{label: "Malayalam", count: 33},
{label: "Manipuri", count: 1.5},
{label: "Marathi", count: 72},
{label: "Nepali", count: 2.9},
{label: "Oriya", count: 33},
{label: "Punjabi", count: 29},
{label: "Sanskrit", count: 0.01},
{label: "Santhali", count: 6.5},
{label: "Sindhi", count: 2.5},
{label: "Tamil", count: 61},
{label: "Telugu", count: 74},
{label: "Urdu", count: 52}]

但是我的 console.log 显示的 JSON 看起来像这样......

{label: "Assamese", count: 13},
{label: "Bengali", count: 83},
{label: "Bodo", count: 1.4},
{label: "Dogri", count: 2.3},
{label: "Gujarati", count: 46},
{label: "Hindi", count: 300},
{label: "Kannada", count: 38},
{label: "Kashmiri", count: 5.5},
{label: "Konkani", count: 5},
{label: "Maithili", count: 20},
{label: "Malayalam", count: 33},
{label: "Manipuri", count: 1.5},
{label: "Marathi", count: 72},
{label: "Nepali", count: 2.9},
{label: "Oriya", count: 33},
{label: "Punjabi", count: 29},
{label: "Sanskrit", count: 0.01},
{label: "Santhali", count: 6.5},
{label: "Sindhi", count: 2.5},
{label: "Tamil", count: 61},
{label: "Telugu", count: 74},
{label: "Urdu", count: 52}

如您所见，我的数据被视为字符串而不是格式正确的 json。

知道为什么吗？

更新根据要求，这是我在我的 vue 文件中运行的 axios 代码

let dataset = [];
        console.log(this.baseUrl);
        axios.get(this.baseUrl + '/mockdata/pie-chart-data.json').then(response => {
            dataset = response.data;
            console.log(response.data);
        })
            .catch(e => {
                console.log('axios error', e)
            });

更新 2 我更新了我的 response.data

实际上只是将 json 作为字符串提供给我，我没有在 firefox 控制台中将其视为 json 树。

【问题讨论】：

你能分享一些代码吗？在您解析它之前，JSON 只是字符串数据（JSON.parse）。许多使用 Ajax 的库都有办法为您做到这一点。
so "response.data` 是您记录的内容？在这种情况下，您的服务器发送错误的内容 - 您能否提供一些 http 服务器的详细信息
查看更新.....
是的 response.data 是我正在记录的内容。记录时我可以将其视为字符串，但不能将其视为 JSON 树。
为什么你改变了你看到的输出？让我猜猜……你最初显示的结果是console.log(response)

标签： javascript json vue.js

【解决方案1】：

看起来您正在发出一个 http 请求以获取 .json 文件，然后您正在记录返回到控制台的整个响应。所以“数据”字段是实际的文件内容，而您记录到控制台的整个对象就是正在发出的整个 http 请求。

[更新] 由于您现在正在记录作为字符串的 response.data，因此将字符串解析为一个对象，如下所示：

var json = JSON.parse(response.data);

【讨论】：

是的，我尝试过这样我的代码看起来像 console.log(JSON.parse(response.data)) 我收到以下错误。 SyntaxError：“JSON.parse：JSON 数据第 1 行第 2 列的预期属性名称或 '}'”
@skirtle 我认为这可能是问题所在，但现在我遇到了另一个错误。我从字面上将我的 JSON 文件剥离为一个对象。 {"label": "Assamese", "count": 13} 现在我得到以下 axios 错误 SyntaxError: "JSON.parse: unexpected character at line 1 column 2 of the JSON data"
是的，这就是问题所在，Axios 会为我解析它，所以当我删除 JSON.parse 时它解决了这个问题。

【解决方案2】：

我认为您需要来自响应的控制台data。

例如：

let res = await axios.get(
    'https://...'
  );
 console.log(res.data)

【讨论】：