格式良好的 JSON 文件

Question

我正在尝试设置一个本地 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 树。

Answer 1

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

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

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

Answer 2

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

例如：

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