Tips for importing a JSON file from your local directory in Vue.js

I've been attempting to load data from a local JSON file in Vue. My goal is to simply load the data from the file and assign it to a variable. I'm not sure if I'm on the right track or if I'm missing something essential in my approach. If you notice any mistakes in my question, please let me know.

Thank you in advance.

This is what my JavaScript file looks like:

import json from './ecommerce-products.json';

 var vm=new Vue({
     el:'#container',
     data(){
         return {
             items:json
         }
     }
})

Answer №1

For those working with vuecli, storing json files in the 'public' folder allows for easy retrieval using 'axios'. Here is an example using the $axios method: this.$axios({ method:'get', url:'json/test.json' }).then(res =>{ this.data=res.data })

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Utilizing Javascript's Regex to selectively replace only the first character

Forgive me if this is a beginner question, but I'm really unsure about this. Is there a regex solution to replace a character that appears first in a string? For example: 12 13 14 15 51 41 31 21 All data where '1' is the first character s ...

Encountering an unidentified entity within a ReactJS application

Within a container, I've included a search bar inside a form element with two inputs - from and to, along with a submit button. Upon submitting the form, I create an OBJECT named query which looks like this: const query = { from : this.s ...

The AJAX call was successful with a return code of 200, however an error

HTML code snippet: <a href="javascript:void(0)" onclick="$.join_group(<?=$USER_ID?>, <?=$groups[$i]["id"]?>)"><?=$language["join"]?></a> JavaScript function: $.join_group = function(user_id, group_id) { var input = "u ...

Having trouble getting `sudo apt install npm` to work? You might be encountering the error message "The following packages have unmet dependencies

Creating dependency tree Retrieving status information... Completed Certain packages could not be installed. This might indicate that you have requested an unrealistic scenario or if you are utilizing the unstable version, some necessary packages could s ...

Unusual patterns observed when employing the splice method in AngularJS for ordering

Take a look at this Plunker demo link I have encountered an issue after implementing the orderby feature (line 24) in my application. When I try to add an item without priority and then add another one with priority, followed by deleting the first item, t ...

Is it possible to dynamically create and add new partitions to an existing topic in Node.js?

I am currently utilizing the "kafka-node" module to communicate with a kafka server, but I am unable to determine how to increase the number of partitions in an existing topic. For instance, I need to modify it from 4 partitions to 5. ...

Tips for setting up Code Coverage in a Cypress environment for testing a NextJS build simultaneously

We are currently exploring the possibility of integrating code coverage into our setup utilizing cypress and nextjs. Within our cypress configuration, we utilize the next() function to mimic backend requests within nextjs. The cypress.config.ts file is st ...

Step-by-step guide on defining a property within the ng-repeat's scope

My goal is to create a dynamic list of items that can be edited individually. Each item should have its own editing mode. Here's the code I'm using: <ul ng-controller="ItemCtrl"> <li ng-repeat="item in items"> <div cl ...

Retrieving the selected values of TimePicker (hour and minute)

Posting my question here as the vue.js forum appears inactive and I'm unable to receive a confirmation email via Slack. I've recently begun coding with .vue and have come across an inquiry. Upon selecting a time using the timepicker, I would li ...

Can ko.toJSON() handle date objects effectively?

Currently, I am utilizing knockoutjs within an asp.net mvc page. My approach involves using ajax to store a form's data on the server by executing ko.toJSON(viewModel) and subsequently sending the results back to the server with jQuery. Remarkably, al ...

What is the correct way to generate an await expression by utilizing recast/esprima?

I have an issue with a JavaScript function export const cleanUp = async () => { await User.destroy({ where: {} }); }; I am attempting to add a line below await User.destroy({ where: {} }) using recast.parse(`await ${module}.destroy({ where: {} } ...

Can the details of a package be retrieved from a Nuget private store using a REST API?

Currently working on an Angular 8 project that involves displaying the details of Nuget packages from a custom store. I am wondering if it is possible to retrieve package details from an NPM custom store using a REST API? Something similar to: https://lea ...

Deactivate a function within Bootstrap JavaScript

Is there a way to temporarily disable a function within Bootstrap after a click event? <a href="#"><span class="glyphicon glyphicon-triangle-right" id="btn04" onclick="myfun();"></span></a> Additionally, I am looking for a soluti ...

Can you tell me what this code on Facebook is for?

Upon inspection of Facebook's activity in my browser, I stumbled upon the following code snippet: for (;;);{"t":"refresh"} Attempting to decipher its purpose reveals an infinite loop. Can you identify its function? ...

Steps to delete a JSON object from a JSON array using the org.json.simple library

Looking for a way to remove JSON Objects from a JSON ARRAY if the longitude or latitude value is empty. Here's a snippet of my JSON file: [ { "Longitude": 9.96233, "Latitude": 49.80404 }, { ...

How do I extract elements from an array?

I'm working with an array of objects: var aoo = [{},{},{},....{},{},{}]; I am looking for an efficient function that can retrieve elements from index n to m. For example: var getEl = function(from, to) { ... return array } What is the best way to ...

Tips for saving a web service response to a JSON file

After receiving a response from a webservice request and successfully printing it to the console, I attempted to write this response to a JSON file. Despite trying with BufferedWriter, the response still failed to be written. String cwd = System.getProper ...

Having difficulty modifying the values of my input types on the edit page

After successfully adding user values from the add user page, I encounter an issue when attempting to edit these values such as firstname and lastname on the edit page. Please review the code snippet below for any possible errors. import React from ' ...

Retrieve information from XML using jQuery

<?xml version="1.0" encoding="UTF-8"?> <slider> <csliderData1> <title>Kung Fu Panda</title> <content>In the Valley of Peace, Po the Panda finds himself chosen as the Dragon Warrior despite</content ...

Using Redis for caching in Node.js applications

As I delved into this module, I found myself pondering the use of callbacks within it. My understanding is that memory caching is designed to be speedy, providing instant results. So why introduce callbacks, which may imply a waiting period? If the resul ...