Develop Reference

Is there a way to dynamically import arrays inside separate files in a directory in Reactjs?

What I had tried.
I tried importing every file inside the directory using require.context. It did the job and read the files but I am stuck at accessing what's inside the files.
function importAll(r) {
let imports = {};
r.keys().map((item, index) => { imports[item.replace('./', '')] = r(item); });
return imports;
}
const imports = importAll(require.context('../questionsdata', false, /\.(js)$/));
If I get it correctly, That is the equivalent of me importing every single JS file in the directory.
Each file contains 1 array that is exported and needs to be accessed.

laravel 8 include certain javascrip file into other js file

I have two files, one is my main js file called app.js and I have a file where I store all my js functions, called functions.js. As you can see on the image below.
But I want to include the functions.js file into the app.js file. So I googled on how to do it and this is what people said:
But my npm run dev says the file doesn't exist. But the path is correct. What am I doing wrong here, is there a other way to do it?

You can simply just create the file wherever you want to create it, and then export some properties or methods, and then import them in your app.js file, or in whatever file you need. Something like this :
//new_file.js
export const jokes = function() {
return ['funny', 'not really funny', 'boring']
}
export const heading = 'some global heading to be reused.'
And in your app.js file :
import { jokes, heading } from 'new_file.js'//specify actual path here .
console.log(jokes) // ['funny', 'not really funny', 'boring']
console.log(heading)//some global heading to be reused.
This tutorial might be helpful too .
http://www.2ality.com/2014/09/es6-modules-final.html

Importing default value from each file in specified folder [duplicate]

This question already has answers here:
Is it possible to import modules from all files in a directory, using a wildcard?
(14 answers)
Closed 2 years ago.
Lets say in my project i have a folder models and i dont know how many js-files are within it? Is there way to import all default values from each file with sintax like this or something
import * as models from './models'
so variable models would have an object where keys are files' names and values are default values or i should import from each file separately?
Thank you

I assume you might have following structure:
models
|------> model1.js
|------> model2.js
So now Add another file called index.js as like as given below:
models
|------> model1.js
|------> model2.js
|------> index.js
And index.js file will be like:
import * as model1 from "./model1.js"
import * as model2 from "./model2.js"
export { model1, model2 };
Now you can call models/index.js file from anywhere as like as given below:
import * as models from "./models";
// models.model1
// models.model2
Hope it might solve your problem.

importing files from a folder within local directory React

I have a react project. I am trying to grab all of the files from a help folder and store them in an array or object to be iterated throught within a react component. I am not sure how to do this. i tried a few differnt things....
Here is the directory:
i tried:
import * as files from '../../../public/help/';
and
var req = require.context('../../../public/images/help', false);
console.log(typeof req)
console.log(req)
req.keys().forEach(function(key){
console.log(req(key));
});

You can get the path of public folder using process.env.PUBLIC_URL
in your case the path you want will be process.env.PUBLIC_URL + "/help"
and this might also work,
window.location.origin + "/help"

Using ember-cli-sheetjs in an ember component

I'm creating a website using ember and am currently having difficulty using the 'ember-cli-sheetjs' module in a component titled 'add-student.js'. I cannot seem to call any functions in the documentation using my current code.
To get the module in ember I added it to my dev dependencies inside package.json and then ran the "npm install" command which successfully installed the "ember-cli-sheetjs" module. I then try and use it by writing:
import Ember from 'ember';
import xlsx from 'npm:ember-cli-sheetjs';
//have also tried directly using the sheetjs module after
//installing sheetjs with the command
//npm install xlsx --save-dev
//import xlsx from 'npm:xlsx';
export default Ember.Component.extend({
fileinput: null, //this is set with an input handler in the hbs
actions: {
fileLoaded: function() {
console.log(this.get('fileinput')); //properly outputs the file name
var workbook = xlsx.readFile(this.get('fileinput'));
},
}
However this results an error saying:
add-student.js:134 Uncaught TypeError: _npmEmberCliSheetjs.default.readFile is not a function
I feel like the problem is that its not following the correct path to the function (which exists in the function documentation). If anyone can tell me what I'm doing wrong it would be a huge help.
Link to the module: https://www.npmjs.com/package/ember-cli-sheetjs

If anyone runs into this problem I have figured out a work around.
First in your index.html include the line:
<script src="assets/parsing/dist/xlsx.full.min.js"></script>
Next create a folder inside public (if it doesn't already exist) called assets. Next create a folder inside assets called 'parsing' and a folder in 'parsing' called 'dist'. Next in 'dist' create a file called 'xlsx.full.min.js'.
Next copy and paste the code from: https://raw.githubusercontent.com/SheetJS/js-xlsx/master/dist/xlsx.full.min.js into the xlsx.full.min.js file.
Finally, in whatever component you want to use the sheetjs module in just put the following below your import statement:
/* global XLSX */
This is a work around but it does allow you to use the sheetjs module.

Use Bower
// bower.json
"dependencies": {
"js-xlsx": "^0.11.5"
}
// ember-cli-build.js
module.exports = function(defaults) {
app.import('bower_components/js-xlsx/dist/xlsx.min.js');
}
and in your component as #Russ suggested:
import Ember from 'ember';
/* global XLSX */