Using Vue: Incorporating and extracting JSON data with JavaScript

I need to import the following JSON from a different component because it includes require and Math. I am having trouble saving it in JSON file format.

let test = [
    {
      name:"A",
      imgSrc: require('@/assets/img/A.png'),
      range: Math.pow(10, 6),
      isShow: true
    },
    {
      name:"B",
      imgSrc: require('@/assets/img/B.png'),
      range: Math.pow(10, 2),
      isShow: false
    }
  ];

Answer №1

To incorporate that statement into a JavaScript document, place it in a separate file and apply the export keyword at the beginning:

// items.js
export let data = [/*...*/]
 👆

Subsequently, in another JavaScript file, you have the option to utilize the import keyword to access the variable by its given name:

// index.js
import { data } from './items'
  👆

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

Is it possible to use jQuery to set a value for a form control within an Angular component?

I'm currently working on an Angular 5 UI project. In one of my component templates, I have a text area where I'm attempting to set a value from the component.ts file using jQuery. However, for some reason, it's not working. Any suggestions o ...

Preventing the submission of a form using jQuery until all input, radio, select, and checkbox fields are filled out

I currently have a form that includes various field types, all of which must be filled out before submission. The submit button is disabled by default and I am looking to enable it once all fields are completed. I came across examples of this feature work ...

Drawing mysteriously disappeared from the canvas

Having trouble with my JavaScript code. I created a function called drawLine to trace lines on a canvas from one point (x,y) to another point (xdest, ydest). The first few lines display correctly but after the fourth line, it stops working and I can't ...

The compatibility between json_encode and JSON.parse is not seamless

I am encountering a situation on my PHP page where I am using json_encode and getting the following output: {"id":"761","user":"Moderator","message":"test"} {"id":"760","user":"Patrick","message":"test"} My goal is to parse these values using JSON.parse ...

Dealing with an Undefined Property: Troubleshooting Guide

Encountering an error message Uncaught TypeError: Cannot read property 'top' of undefined at VM32939 own.js:819 resulting from var hands_corrected = (hands_original.top + 680) this issue arises because "hands_original" is not used in any par ...

Error: Browserify jQuery Plugin Not Working

Having trouble browserifying a jQuery plugin and keep seeing this error in the browsers console: Uncaught Error: Cannot find module 'jquery' Here's how I have my package.json set up: "browserify": { "transform": [ "browserify-shim" ...

I am having trouble getting my AngularJS client to properly consume the RESTful call

As I venture into the world of AngularJS and attempt to work with a RESTful service, I am encountering a challenge. Upon making a REST call to http://localhost:8080/application/webapi/myApp/, I receive the following JSON response: { "content": "Hel ...

The default value in an Ionic select dropdown remains hidden until it is clicked for the first time

Having an issue with my ion-select in Ionic version 6. I have successfully pre-selected a value when the page loads, but it doesn't show up in the UI until after clicking the select (as shown in pic 2). I'm loading the data in the ionViewWillEnt ...

Shorten the content while preserving the HTML using JavaScript

When printing a string containing HTML links, I need to truncate the visible text while preserving the link structure. Simply using a substring method would disrupt the HTML tags in the string. I aim to display only 100 characters but also remove any inc ...

Repeat a command in Discord.js indefinitely

Looking for help with this discord.js code I have. Currently, when someone runs the command "!cat", it sends a random image from r/cats. Here is the snippet: var Discord = require('discord.js'); var bot = new Discord.Client() randomPuppy = requir ...

Troubleshooting TypeScript when importing external JavaScript: Module not found or no type declaration file available

I recently acquired a VueJS admin template built in JS and am looking to integrate it into my existing TS application. However, when I attempt to transfer the components, views, and other elements, I encounter the following error message. Is there a way to ...

"Efficiently handle multiple instances of the same name using AJAX, JavaScript

I have a PHP-generated multiple form with HTML inputs containing IDs and NAMEs. I am struggling to capture all this information. When I click the "Done" button, everything is marked as completed due to the button names. <?$command = "SELECT * FROM exam ...

Having trouble retrieving properties from a JavaScript JSON object?

I am currently working with a JSON object that contains properties for MAKEs, MODELs, YEARs, STATEs, PLATEs, and COLORs. There are 4 instances of each property within the object: Object {MAKE1="xxx ", MODEL1='xxx', YEAR1='xxx', STATE1= ...

Is there a way to stop myself from accidentally clicking twice on the same tile?

I'm currently working on a game and facing an issue where my "X" gets deleted when clicking twice on the same tile. I am able to move my "X" around, but the double-click deletion is causing trouble. I attempted using booleans but struggle with them. I ...

Error encountered in Google's Structured Data Testing Tool

<script type="application/ld+json"> {"@context" : "http://schema.org", "@type" : "LocalBusiness", "name" : "mywebsite.com", "description": "Lorem ipsum dolor sit amet", "image" : "http://mywebsite.com/image.jpg", "telephone" : "987654321", ...

Adjust the Placement of Images in Relation to Mouse Movements

Is there a way to creatively animate the positions of images or background images based on mouse movement? Let's take Github, for instance: https://github.com/thispagedoesntexist The 404 page on Github is truly impressive. I aim to captivate my use ...

Exploring the capabilities of storing and retrieving nested objects within a React database

I'm having trouble retrieving nested items from my database. This is how my database is structured: GET /dwelling/room/ [ { "room_id": 1, "room_name": "Living Room", "room_data": [ { "id": 1, ...

What are the steps to integrate my server-side PHP code into this form wizard?

Having created a straightforward 3 step form wizard for registration, I encountered an issue at the last stage when users click on submit. The desired action is to direct users to the PHP code that has been written. Update: Despite updating the HTML code ...

Utilizing functions as parameters and implementing a flexible number of arguments

I have two different functions: Function called 'first' which takes 1 argument Another function called 'second' that takes 2 arguments Next, there is a third function that accepts a function and a value as its parameters. I am strugg ...

What is the process to subscribe and obtain data from a server-to-user channel using pusher-js?

I am currently hosting my application using next.js on Vercel. I want to integrate Pusher to provide real-time messages to users in a private and secure manner. Despite successful log entries, I am facing challenges in subscribing to the channel and retrie ...