格式良好的 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)