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?

Matthew Page Matthew Page · Accepted Answer · 2019-01-19T16:50:42

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

Cannot convert object to primitive value with imported json

1 Answers