0

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>
4
  • You don't want to do that. You want to make some HTTP request to a web server written in Java. Commented Oct 31, 2021 at 23:05
  • Do you mean you have a Java backend with an endpoint that your React code needs to call? Commented Oct 31, 2021 at 23:06
  • @Andy that is correct. I have a java backend that does the http requests, I just cannot figure out to get those values into the js frontend. Also by endpoint, does that mean I can only call a single variable with a js call as right now I have three hashmaps consisting of 12 variables whose values I need on the webpage. Commented Oct 31, 2021 at 23:07
  • Look up how to use fetch or axios with react. Commented Oct 31, 2021 at 23:09

2 Answers 2

1

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')
);
Sign up to request clarification or add additional context in comments.

4 Comments

Thank you for this! I am going to give this a try tomorrow, but to clarify, the example code you wrote would go in the file where the Exchange blocks are being instantiated?
You have a React component which creates the JSX (your Exchange components). That's where the code goes. It's a bit late here so I had to code that from memory so there might be something missing. If there's anything you need to know give me a shout in the morning :)
Hi Andy, I figured my issue, in part, is that I need to actually create an API in my backend java before I can even begin to think about the fetches. I'm looking to use Spring to do this, and hopefully, not too much of my work needs to be recoded.
That would definitely help. Good luck with the coding. @vynabhnnqwxleicntw.
0

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.