CODEWITHSUNDEEP
javascriptjavareactjs
vynabhnnqwxleicntw
vynabhnnqwxleicntw

Reputation: 17

Call Java methods in Javascript using React

I am trying to make a webpage that displays the price of assets from different exchanges. I have a java class that makes the http requests and now I need to somehow call those variables with my js code that is designing my webpage. Any help would be amazing, and please let me know if there is anything else that should be added code-wise to help determine my issue?

I figure the calls go around here, but I am unsure if I need to also do anything in my java class, like save the variables in certain formats as right now they are in maps.

<div className = 'Middle'>
       <Exchange name = "Coinbase" btcBuy = "" btcSell = "" ethBuy = "" ethSell = ""/>
       <Exchange name = "Binance" btcBuy = "" btcSell = "" ethBuy = "" ethSell = ""/>
       <Recommendations/>
    </div>

Upvotes: 0

Views: 988

Answers (2)

Baubak Gandomi
Baubak Gandomi

Reputation: 45

One solution you can try is to expose the java program as a Rest API. We put in place this project initially for Java script access to Java code, but it would work for other projects as well.

https://github.com/adobe/bridgeService

You can either put the bridgeService in your java project, or put your java library directly in the bridgeService project.

Once running you can call your java code with the following payload.

{
  "callContent": {
    "<ID>": {
      "class": "<package name>.<class Name>",
      "method": "<method name>",
      "args": [
        "argument1",
        "argument2"
      ]
    }
  }
}

I hope this helps.

Upvotes: 0

Andy
Andy

Reputation: 63540

There are a couple of issues. The first is how you deal with state - once you've got your data how can your component render it. The second is how do you call an endpoint lots of times, but still update the state with just one collection of data.

First: React functional components can use hooks, and in this example we're using both useState to store the data, and useEffect to get the data.

Second: build an array of promises (where each element in the array is a new fetch to the server), and then use Promise.all to wait for all of the server calls to resolve. You can then update the state with the data, and then use that state to render the component, and its child components.

The code will look vaguely like this.

const { useEffect, useState } = React;

function Example() {

  const [ data, setData ] = useState([]);

  useEffect(() => {

    // Generic fetch params
    const arr = [1, 2, 3];

    async getData() {

      // Get an array of fetch promises using the params
      // Wait for them to resolve, return the parsed data, and
      // then set the state with that data
      const promises = arr.map(el => fetch(`endpoint?query${el}`));
      const response = await Promise.all(promises);
      const data = response.map(async el => await el.json());
      setData(data);
    }
    getData();
  }, []);

  // `map` over the data to create your
  // Exchange components
  return (
    <div>
      {data.map(obj => {
        <Exchange
          name={obj.name}
          btcBuy=""
          btcSell=""
          ethBuy=""
          ethSell=""
        />
      })}
    </div>
  );
};

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

Upvotes: 1

Related Questions