close

How to access external json file objects in vue.js app

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to access external json file objects in vue.js app in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to access external json file objects in vue.js app ?

  1. How to access external json file objects in vue.js app ?

    to access external json file objects in vue.js app Typescript projects (I have typescript in SFC vue components), need to set resolveJsonModule compiler option to true.
    In tsconfig.json:
    { "compilerOptions": { ... "resolveJsonModule": true, ... }, ... }

  2. How to access external json file objects in vue.js app ?

    to access external json file objects in vue.js app Typescript projects (I have typescript in SFC vue components), need to set resolveJsonModule compiler option to true.
    In tsconfig.json:
    { "compilerOptions": { ... "resolveJsonModule": true, ... }, ... }

Method 1


If your file looks like this:

[
    {
        "firstname": "toto",
        "lastname": "titi"
    },
    {
        "firstname": "toto2",
        "lastname": "titi2"
    },
]

You can do:

import json from './json/data.json';
// ....
json.forEach(x => { console.log(x.firstname, x.lastname); });

Method 2

Typescript projects (I have typescript in SFC vue components), need to set resolveJsonModule compiler option to true.

In tsconfig.json:

{
  "compilerOptions": {
    ...
    "resolveJsonModule": true,
    ...
  },
  ...
}

Happy coding 🙂

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment