Unlocking the contents of an array from a separate file in Next.js

I am developing a Quiz App that consists of two main pages: takeQuiz.js and result.js. My goal is to transfer the data from the multiple-choice questions (mcqs) in takeQuiz.js to be accessible in result.js. Utilizing router.replace(), I ensure that once the user submits the quiz, they cannot go back.
takeQuiz.js

mcqsData = [
{quesId:1,correct:'Option A',selectedOption:'Option C'},
{quesId:1,correct:'Option C',selectedOption:'Option B'},
{quesId:1,correct:'Option D',selectedOption:'Option D'},
]

I attempted to access this array in result.js by using import data from './takeQuiz.js', but it resulted in returning undefined.

javascriptnode.jsreactjsnext.js

Answer №1

One crucial thing to remember is to include the export statement before your array. Otherwise, the import statement won't be able to access it.

export mcqsData = [
{quesId:1,correct:'Option A',selectedOption:'Option C'},
{quesId:1,correct:'Option C',selectedOption:'Option B'},
{quesId:1,correct:'Option D',selectedOption:'Option D'},
]

Then, in your main result.js file, make sure you import the array correctly. 

import {mcqsData} from './takeQuiz.js'

If you need more details on this topic, check out: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

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

What is the best way to access an excel file using JavaScript and Protractor?

Is it possible to read an Excel file dynamically in JavaScript and iterate through cell values using row and column counts, without converting it into a JSON object? I have searched through several posts on Stack Overflow but have not found a solution yet. ...

javascriptangularjsjasmineprotractor

Issue: The login.component.html file failed to load

I attempted to utilize a custom-made HTML file with the templateUrl attribute in Angular2. Below is the content of my login.component.ts file: import {Component} from '@angular/core'; @Component({ selector: 'login' , template ...

javascriptjqueryhtmlangulartypescript

The timing calculations in Vue.js do not align with the standard JavaScript version

I am currently working on developing a 'beats per minute' (BPM) calculator, which is similar to the one available here. However, I have noticed that when using the BPM calculator from that link for testing on a particular song, it quickly approxi ...

javascriptvue.jsvuejs2

Select a checkbox in Cypress based on the status of a different checkbox within a table

I am facing a challenge with a table that contains 2 columns of checkboxes. My goal is to automatically select the first checkbox on the left side that has a checked value displayed on the right side. Please note: The checkboxes on the left are all active ...

reactjsmaterial-uicypress

Having trouble establishing a connection between React Native and a local MySQL database with the Redux framework

export const FETCH_JOB_LIST = "FETCH_JOB_LIST"; const apiEndpoint = "http://example.com/api/jobs" export const fetchJobs = () => { try { return async dispatch => { const response = await fetch(apiEndpoint, { ...

reactjslaraveldatabasereduxconnection

Key factors to keep in mind when comparing JavaScript dates: months

Check the dates and determine if the enddate refers to the following month by returning a boolean value. Example startdate = January 15, 2020 enddate = February 02, 2020 Output : enddate is a future month startdate = January 15, 2020 enddate = January 2 ...

javascriptnode.jstypescript

On initial load, React router switch fails to find a match

I am encountering an issue with my switch and react-router. Whenever I open a new tab and navigate to any path, it always redirects me to /login. However, if I remove the bottom switch (the one without a path - the default), everything works as expected. A ...

javascriptreactjsreact-routerreact-router-dom

What is the process for modifying the output format of npm ls?

My client is requesting the dependencies of our projects, including the library name and github/NPM URL. Currently, I am using 'npm ll' command to retrieve this information for each project, but the output is in a tree structure. Is there a way t ...

node.jsshellnpm

Executing a function in Angular 2 depending on the class assigned to a <div>

In my HTML code, I am using *ngFor to iterate through an array of messages. <div *ngFor="let message of messages; let i=index" [focused]="i === activeIndex;" [ngClass]="{'message-list-active': activeIndex === i }" (click)="onAddtoMessag ...

javascriptcssangularng-class

Nested div within another div, shifting position relative to scrolling (React)

My goal is to create a unique effect where an object falls from the sky as the user scrolls down the page. The concept involves having the object div remain stationary in the center of its parent container, positioned 50 pixels from the top. However, when ...

htmlcssreactjsanimationscroll

Send a response with missing JSON data using Express

The version information is as follows: "express": "~4.15.2", "express-session": "^1.15.5", I am using the following code to send large JSON data to the client: router.get('/exportAllData',function(req,res,next){ async function ge ...

jsonnode.jsexpressresponse

Numerous SVGs sharing identical IDs

Is it possible to include multiple SVGs on an HTML page and utilize the same IDs in each of them? <div> <svg height="0" width="0"> <clipPath id="svgPath"> ........ </svg> <svg height="0" width="0"> < ...

javascripthtmlcsssvg

Module Augmentation for extending Material UI theme is not functioning as expected

I'm having trouble expanding upon the Theme with Material UI because an error keeps popping up, indicating that I am not extending it correctly. The error message states: Property 'layout' is missing in type 'Palette' but required ...

javascriptreactjstypescriptmaterial-ui

What is the best way to display loading details during a data loading process within a useEffect hook?

Whenever a specific custom React component I've created is initially mounted, it utilizes useEffect to initiate a lengthy multistep process of loading data that will later be rendered. Since the component isn't always rendered, this costly proces ...

javascriptreactjstypescriptreact-hooksreact-lifecycle

Experiencing difficulties retrieving data from FaunaDB while utilizing a variable in the API route

My API route is functioning well. Here is the code snippet: import { query as q } from 'faunadb'; export default async (req, res) => { try { const customer = await guestClient .query(q.Get(q.Match(q.Index('use ...

databasenext.jsfaunadb

Common causes leading to my header component experiencing hydration errors in Next.js

I am currently developing a job portal and encountering an issue with user authentication using JWT in combination with local storage. The problem arises in my header component when the user is authenticated, and if the web page is reloaded, I receive a hy ...

javascriptreactjsecmascript-6react-reduxnext.js

Conditional statement in Javascript for document.cookie

I am attempting to create a basic if statement that relies on the value of a cookie. The function looks like this: function setHomePage() { if ($.cookie('settingOne') == 'jjj') { $('.secO').css('display', & ...

javascripthtmlif-statementcookies

Assign the value from a drop-down menu to an SQL variable dynamically without the need for a submit button

I am trying to retrieve the value of the selected item in a drop-down menu populated from an SQL database. This value is essential for me to formulate the SQL statement required to access a specific record. The drop-down menu has already been populated. S ...

javascriptphpjquerymysqlsql

Leveraging a mono-repository for optimizing Google Cloud Functions_integration

I have a situation where multiple nodejs functions are using the same repository and dependencies. Following the advice in the official GCF documentation, I have created an index.js file which exposes multiple function entrypoints like this: /** * GCF En ...

node.jsgoogle-cloud-platformgoogle-cloud-functionsgoogle-cloud-pubsub

Ways to retrieve an array following a function call

After a lot of testing and troubleshooting, I finally got my array to function properly in the console. However, when I click the button, the array is displayed on the console but not in my HTML. TS: jogar(){ for(var u=0;u<6;u++){ this.y ...

javascriptangularionic2