How to load an external js file and use their data in reactjs?

Question

I'm doing a react project using create-react-app and my current goal is to load an external js file (that is hosted in iis) and use their data.

I'm getting this file throught a script in index.html like:

<script type="text/javascript" src="http://localhost:5000/GetJsFile"></script>

Example of my js file:

var data = {
   vars: {
      id: ****,
      user ******,
      name: *******,
      date: *******,
   }
   //...
}

My question is: how can I use/access the data from js file inside a component of react js?

your example does not contain a json but javascript. Either export / import your js Object or call a json by an online API. Loading json files from your local file system will not work in a browser context but in node. You cannot simply add a script tag and make the src a json file... — messerbill
– messerbill, Commented Dec 11, 2019 at 14:52
The example you presented is not json file. It is a javascript. It defines global variable. You can use window.data to access it. — Mx.Wolf
– Mx.Wolf, Commented Dec 11, 2019 at 14:52
@messerbill sorry, it is js file, I updated the question thx — Kit
– Kit, Commented Dec 11, 2019 at 14:56
no - this is definitely not an answer to the question. If you need to use external functions those are usually imported using import or require. Often this is also used to import libraries and stuff out off node_modules — messerbill
– messerbill, Commented Dec 11, 2019 at 15:08
are you talking about data or about logic / functionality? Data will be called using http requests while third-party-functionality will be imported using npm. If your script is not available via npm you can still push it into a git repository and include it using npm — messerbill
– messerbill, Commented Dec 11, 2019 at 15:43

Mohammad · Accepted Answer · 2019-12-11 16:13:45Z

1

In your utils.js page

you must change your code to this shape:

utils page

const data = {
   vars: {
      id: ****,
      user ******,
      name: *******,
      date: *******,
   }
   //...
}
export default data;

and after that in other component that you want to use this data write this code:

import data from '../../../../utils';

...
console.log('data', data);

answered Dec 11, 2019 at 16:13

Mohammad

1271 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrés Hevia · Accepted Answer · 2019-12-11 15:09:12Z

0

The problem with loading the JSON's data from the html file directly is that it will not be available for your react code to use.

Since you are loading it from an external source, you need to use something like fetch, axios or superagent to retrieve it.

You can either use async/await or promises.

async function loadJsonFromExternal() {
    const dataFromJSON = await axios.get('http://localhost:5000/GetJson');
    return dataFromJSON;
}

Say you have your component.js file with something like this:

import React, { useEffect } from 'react';
export default function CoolComponent (props) {
  let myName = 'Enigma';
  useEffect(() => {
      loadJsonFromExternal()
      .then((result) => { myName = result.name });
  }, [])
  return (
     <div>My name is: {myName}</div>
  )
}

That would be the approach to do.

answered Dec 11, 2019 at 15:09

Andrés Hevia

461 silver badge6 bronze badges

1 Comment

messerbill Over a year ago

the question is not about loading json files anymore but how to import js files....

Collectives™ on Stack Overflow

How to load an external js file and use their data in reactjs?

2 Answers 2

In your utils.js page

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

In your utils.js page

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related