What is the best way to retrieve information from a JavaScript file?

Learning.vue

<template>
    <div>
        <button @click="test()">test</button>
    </div>
</template>
<script>
import records from './records.js'
export default {
    data () {
        return {
            items1: records.data.info,
            items2:
            {
                logId: 1,
                logDetail: "This is some log detail for log 1",
                logType: "general",
                createdBy: "name",
                createdAt: "date",
            },
        }
    },
    methods:{
        test(){
            console.log(this.items1.logId)
            console.log(this.items2.logId)
        }
    }
}
</script>

records.js

export default {
    data() {
        return {
            info: {
                logId: 1,
                logDetail: "This is some log detail for log 1",
                logType: "general",
                createdBy: "name",
                createdAt: "date",
            },
        };
    },
};

Although I can access logitems2, I am facing difficulties accessing the data in logitems1, even though they contain similar information. My challenge lies in accessing data from external files other than components.

Answer №1

Ensure you make a functional call.

<script>
    import logs from './data.js'
    export default {
        data () {
            return {
            logitems1: logs.data().infomation,
            logitems2:
          {
            log1d: 1,
            logDetail: "This is some log detail for log 1",
            logType: "general",
            createdBy: "name",
            CreatedAt: "date",
          },
        }
        },
        methods:{
          test(){
             console.log(this.logitems1.log1d)
             console.log(this.logitems2.log1d)
          }
        }
    }
    </script>

If you solely require the data to be accessible, exporting the object directly from js file without a function would be more suitable.

logdata.js

export default logInformation{
    log1d: 1,
    logDetail: "This is some log detail for log 1",
    logType: "general",
    createdBy: "name",
    CreatedAt: "date",
}

Then simply use it like this

import logInformation from "logdata.js"

console.log(logInformation)

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

Create an Array with a dynamic name derived from the values of other variables

In my JavaScript project, I am facing a challenge in naming arrays based on dynamic data such as room numbers and user IDs. As the rooms and users are constantly changing, I need to create multiple arrays accordingly. Although this code is incorrect, it s ...

Retrieving data from a nested array within an array of objects using JavaScript

Below is an example of an array object: const data = [ { name: "A", values: [ { name: "PASS", value: 36, }, ], }, { name: "B", values: [ { ...

Incorporate text into the URL of the image

Got a URL of an image like this: https://lipsum.mobi/catalog/product/SE0229E/YG/AAA/4/1/SE0229E-YG-AAA-4.jpg', and looking to add 240x240 within the URL. Current Url: https://lipsum.mobi/catalog/product/SE0229E/YG/AAA/4/1/SE0229E-YG-AAA-4.jpg Desire ...

Angular integrated with DOJO application

I'm currently working on incorporating Angular into an existing DOJO application. I've set up a plunkr http://plnkr.co/edit/8pgdNwxFoxrDAQaQ4qfm?p=preview, but unfortunately, the angular module is not loading. Can anyone provide guidance on what ...

Minor Chrome compatibility problems with CSS alignment

As someone who is new to stackoverflow, I've always found it to be a valuable resource for answers. I've had success building HTML 5 banner ads using GSAP (Greensock Animation Platform) in the past, but now I'm facing a CSS alignment issue t ...

Exploring Techniques for Adjusting Website to User's Screen Resolution

My website is currently designed for a screen resolution of 1024x768. However, I am aware that when viewed on computers with smaller or larger screen resolutions, the layout starts to distort. Is there a way to make the website adaptable to any user&apos ...

Custom directive with nested objects within a scope object

What is preventing me from having a binding in a nested object within my scope object, as demonstrated here: app.directive('myDirective', function() { return { scope: { dropdown: { option: '=selectedO ...

Having difficulties showing selectors content in Cheerio

Seeking assistance with extracting a table from a website, specifically trying to retrieve all the columns first. When I make the request and load the html into cheerio, I am facing an issue where the selector content does not display anything on the conso ...

Is there a way to trigger the vue-cli build command automatically when specific files are modified?

One way I can build my JavaScript file is by using the following command: vue build main.js --dist dist --prod --lib While this works, I am looking for a way to automate this process whenever I make changes to my JS or Vue files. I prefer not to rely on ...

Trouble in testing: ComponentDidMount is mysteriously bypassed by Jest/Enzyme when it's supposed to be triggered

In my code, there is a method called componentDidMount that triggers the fetchUser() function. I am currently working on testing the componentDidMount method. Here is the Component Code: static propTypes = { match: PropTypes.shape({ isExact: Pr ...

JavaScript code is failing to render data properly within HTML documents

I am facing an issue while trying to display data extracted from JSON in HTML. Despite my efforts, the data is not showing up on the webpage. I am unsure about what might be causing this error. Any assistance in resolving this matter would be greatly appre ...

What is the proper way to utilize setTimeout in TypeScript?

Let's take a look at an example of how to use setTimeout in Angular and TypeScript: let timer: number = setTimeout(() => { }, 2000); However, upon compilation, you may encounter the following error message: Error TS2322: Type 'Timeout' ...

Retrieve information in JSON format from a document

I'm trying to extract data from a JSON file without knowing the exact location of the data. Here is an example JSON: var names= [ { "category":"category1" , "name1":"david", "name2":"jhon", "name3":"peter" }, { "category":"catego ...

Can you explain the distinction between $(document) and $('*') and how can we determine which library $ is referring to?

My interpretation is this: $(document) will contain the entire DOM of the current page just like document, while $('*') also selects the entire DOM. What sets them apart, aren't they essentially the same? Will assigning $ from different lib ...

Mastering the art of Promises and handling errors

I've been tasked with developing a WebApp using Angular, but I'm facing a challenge as the project involves Typescript and asynchronous programming, which are new to me. The prototype already exists, and it includes a handshake process that consi ...

Error Uploading File to Cloudinary Platform

I am currently developing a REST API using Express.js. The main functionality of the API involves accepting a video file from the client and uploading it to Cloudinary. Interestingly, when I test the API by returning the file back to the client, everything ...

What is the procedure for including a js file in typescript?

I am trying to import a js file in typescript and access objects and functions within the file. I have added the js file in index.html, but it is not working as expected. I tried using "import '[js file path]'" but it did not work. import { Comp ...

I'm having trouble with accessing an object by index in a knockout observablearray. It seems like the binding process is encountering difficulties

I'm completely new to stackoverflow and knockout, and I have a query. I want to access a JSON object by index. It works fine when I insert dummy data in my code, but it throws an error when I try to add data from JSON. Error Uncaught TypeError: Unab ...

Error: Unable to update Ember Array - Property 'destroy' cannot be read because it is undefined

Is there a way to efficiently update an Ember Array so that changes in the array reflect in the view? Take a look at this simplified code snippet - cacheArr: Em.A([]), count: 1, updateFxn: function() { this.incrementProperty(count); devObj = Embe ...

Deactivate the AJAX button after the specified number of clicks

Imagine I have a model called Post, and it can be associated with up to n Comments (where the number is determined by the backend). Now, let's say I have a view that allows users to add a Comment through an AJAX request. What would be the most effecti ...