Well Formed JSON file

Question

I am attempting to set up a local json file that I can use to mock some data for axios for a vuejs project i am working on.

Following this guide https://medium.com/@negarjf/how-to-access-a-static-json-file-in-vue-cli-3-8943dc343f95

everything seems to work except my json file is returning the data as one big string?

My JSON file looks like this....

[{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}]

however my console.log is showing me JSON that looks like this...

{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}

As you can see my data is being treated as a string instead of well formed json.

Any idea why?

UPDATE As requested, this is the axios code I run in my vue file

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

Update 2 I updated my response.data

It's literally just giving me the json as a string, im not seeing it as a json tree in the firefox console.

Answer 1

Looks like you are making an http request to fetch the .json file and then you are logging the entire response that you are getting back to the console. So the 'data' field is the actual file contents, and the entire object you are logging to console is the whole http request being made.

[Update] Since you are now logging response.data which is a string, parse the string into an object like so:

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

Answer 2

I think you need console data from response.

For example:

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