Sometimes, we want to access external JSON file objects in a Vue.js app.
In this article, we’ll look at how to access external JSON file objects in a Vue.js app.
How to access external JSON file objects in a Vue.js app?
To access external JSON file objects in a Vue.js app, we can import the JSON file directly.
For instance, we write
data.json.
[
{
firstname: "toto",
lastname: "jones",
},
{
firstname: "toto2",
lastname: "jones2",
},
];
Then we can use it in a component by writing
<script>
import json from "./data.json";
//...
export default {
//...
mounted() {
json.forEach((x) => {
console.log(x.firstname, x.lastname);
});
},
//...
};
</script>
We import the JSON array with
import json from "./data.json";
And then we call json.forEach to loop through it since json is an array.
Conclusion
To access external JSON file objects in a Vue.js app, we can import the JSON file directly.
