https://i.sstatic.net/HcY5M.png
I am currently working on creating a Vuetify component dynamically within a Nuxt project, as discussed in this Stack Overflow thread (Using different text values with Vuetify component). To achieve this, I am importing and iterating through JSON data stored in a module, as detailed in this Hacker Noon article ().
The contents of my /static/info.json file are as follows:
{
"id": 1,
"name": "Johnson, Smith, and Jones Co.",
"amount": 345.33,
"Remark": "Pays on time"
}
Within my Vue component, I have implemented the following code:
import * as data from '../static/info.json';
const companyName = data.name;
console.log(companyName); // output 'testing'
console.log(data); // output 'testing'
var jsonData = JSON.parse(data);
// console.log(jsonData); // output 'testing'
However, I encountered an issue with the line:
var jsonData = JSON.parse(data);
This resulted in the error message:
Cannot convert object to primitive value
Can anyone provide guidance on how I can effectively iterate through the imported JSON data?