Cannot convert object to primitive value with imported json

Question

I'm trying to dynamically build a vuetify component in a nuxt project ( Using different text values with vuetify component ) by importing and iterating through json in a module (https://hackernoon.com/import-json-into-typescript-8d465beded79 ).

My json in /static/info.json is:

{
  "id": 1,
  "name": "Johnson, Smith, and Jones Co.",
  "amount": 345.33,
  "Remark": "Pays on time"
}

In my vue component I have:

  import * as data from '../static/info.json';

  const word = data.name;

  console.log(word); // output 'testing'
  console.log(data); // output 'testing'
  var jsonData = JSON.parse(data);
  // console.log(jsonData); // output 'testing'

The line:

  var jsonData = JSON.parse(data);

causes:

 Cannot convert object to primitive value 

How can I iterate through the imported json?

Answer 1

I would guess data is already an object and doesn't need to be parsed again. The import has turned it into an object. You've already used it with data.name