Retrieving JSON data to create and showcase an HTML table

Question

Retrieving JSON data to create and showcase an HTML table

Can you help me figure out what's going wrong with my code?

I have an HTML page with a table where I fetch data from the web in JSON format using JavaScript. The logic works perfectly when the fetch code is let to run on its own, but when I try to execute it from a function called by an onclick event on a submit button, it stops working. I've tried different approaches like regular functions and async/await, but nothing seems to work.

Below is a snippet of my code starting at the form:

Thank you for your help!

<form enctype="multipart/form-data" action="" method="post">
    <button type="submit" name="submit" id="Submit" value="click" onClick = getEarnings()>Click </button>
</form>

<table>
  <thead>
    <tr">
        <th>Reported Date</th>
        <th>Reported EPS</th>
        <th>Estimated EPS</th>
        <th>Surprise</th>
    </tr>
  </thead>
  <tbody id="myData"><tbody>
</table>

<script>
/* function getEarnings() { */
    fetch('https://www.alphavantage.co/query?function=EARNINGS&symbol=IBM&apikey=demo')
      .then(res => res.text())
      .then((out) =>
         {
            alert("I am here"); // I can't see it if from function
            let jsonData = JSON.parse(out);
            for (let i = 0; i < jsonData.quarterlyEarnings.length; i++)
             {
                let earnings = jsonData.quarterlyEarnings[i];
                document.getElementById("myData").innerHTML +=
                "<tr><td>" + earnings.reportedDate + "</td>" +
                "<td align='right'>" + earnings.reportedEPS + "</td>" +
                "<td align='right'>" + earnings.estimatedEPS + "</td>" +
                "<td align='right'>" + earnings.surprise + "</td></tr>";
             };
         })
      .catch(err => console.error(err));
/* } */
</script>

javascript json fetch

Answer 1

Answer №1

You can easily retrieve data without the need for a form. Here's my recommendation:

getData.onclick = () => {
  fetch('https://www.alphavantage.co/query?function=EARNINGS&symbol=IBM&apikey=demo')
    .then(res => res.text())
    .then((out) => {
      let jsonData = JSON.parse(out);
      for (let i = 0; i < jsonData.quarterlyEarnings.length; i++) {
        let earnings = jsonData.quarterlyEarnings[i];
        myData.innerHTML +=
          "<tr><td>" + earnings.reportedDate + "</td>" +
          "<td align='right'>" + earnings.reportedEPS + "</td>" +
          "<td align='right'>" + earnings.estimatedEPS + "</td>" +
          "<td align='right'>" + earnings.surprise + "</td></tr>";
      };
    })
    .catch(err => console.error(err));
}

<button type="button" id="getData">Retrieve Data</button>
<table>
  <thead>
    <tr>
      <th>Reported Date</th>
      <th>Reported EPS</th>
      <th>Estimated EPS</th>
      <th>Surprise</th>
    </tr>
  </thead>
  <tbody id="myData">
    <tbody>
</table>

Answer 2

You can easily retrieve data without the need for a form. Here's my recommendation:

getData.onclick = () => {
  fetch('https://www.alphavantage.co/query?function=EARNINGS&symbol=IBM&apikey=demo')
    .then(res => res.text())
    .then((out) => {
      let jsonData = JSON.parse(out);
      for (let i = 0; i < jsonData.quarterlyEarnings.length; i++) {
        let earnings = jsonData.quarterlyEarnings[i];
        myData.innerHTML +=
          "<tr><td>" + earnings.reportedDate + "</td>" +
          "<td align='right'>" + earnings.reportedEPS + "</td>" +
          "<td align='right'>" + earnings.estimatedEPS + "</td>" +
          "<td align='right'>" + earnings.surprise + "</td></tr>";
      };
    })
    .catch(err => console.error(err));
}

<button type="button" id="getData">Retrieve Data</button>
<table>
  <thead>
    <tr>
      <th>Reported Date</th>
      <th>Reported EPS</th>
      <th>Estimated EPS</th>
      <th>Surprise</th>
    </tr>
  </thead>
  <tbody id="myData">
    <tbody>
</table>

Answer 3

Answer №2

When the button in the <Tag> element is clicked, it triggers a page refresh which should be avoided.

function retrieveEarnings(e) {
    // Prevent the browser from refreshing
    e.preventDefault();

    // Call fetch function here
}

Answer 4

When the button in the <Tag> element is clicked, it triggers a page refresh which should be avoided.

function retrieveEarnings(e) {
    // Prevent the browser from refreshing
    e.preventDefault();

    // Call fetch function here
}

Answer 5

Answer №3

Here are a few key points to consider:

It's recommended to use "onclick" instead of "onClick" for consistency.
When setting the call on your HTML attribute, make sure to enclose it in quotes like this:
```
onClick="getEarnings();"
```
To prevent a page reload with a submit type button, you can either change the button type to "button" or handle the event and stop it from continuing within your function as shown below:

function getEarnings (e) {
    // Prevent page reload caused by submit button
    e.preventDefault();
    // Add your logic here
}

Ideally, consider moving this logic to a separate script file where you can target your button using a unique id and set an event listener once the DOM has loaded. This separation of presentation and logic is good practice. Here's a basic example:

window.addEventListener('DOMContentLoaded', function () {
    const submitButton = document.getElementById('Submit');
    submitButton.addEventListener('click', function (e) {
       e.preventDefault();
       // Implement your logic here
    });
});

Additional Notes:

Lowercase usage in JavaScript, such as using "onclick," is generally preferred over mixed case for consistency.
For legacy browser support, be mindful of differences between click events handled with addEventListener compared to traditional onclick methods.

Answer 6

Here are a few key points to consider:

It's recommended to use "onclick" instead of "onClick" for consistency.
When setting the call on your HTML attribute, make sure to enclose it in quotes like this:
```
onClick="getEarnings();"
```
To prevent a page reload with a submit type button, you can either change the button type to "button" or handle the event and stop it from continuing within your function as shown below:

function getEarnings (e) {
    // Prevent page reload caused by submit button
    e.preventDefault();
    // Add your logic here
}

Ideally, consider moving this logic to a separate script file where you can target your button using a unique id and set an event listener once the DOM has loaded. This separation of presentation and logic is good practice. Here's a basic example:

window.addEventListener('DOMContentLoaded', function () {
    const submitButton = document.getElementById('Submit');
    submitButton.addEventListener('click', function (e) {
       e.preventDefault();
       // Implement your logic here
    });
});

Additional Notes:

Lowercase usage in JavaScript, such as using "onclick," is generally preferred over mixed case for consistency.
For legacy browser support, be mindful of differences between click events handled with addEventListener compared to traditional onclick methods.

Retrieving JSON data to create and showcase an HTML table

Answer №1

Answer №2

Answer №3

Similar questions

Spin and flip user-submitted images with the power of HTML5 canvas!

Easily changing the state of a specific array item using React

What sets my project apart from the rest that makes TypeScript definition files unnecessary?

Rules for validating string and numeric combinations in Vuetify are essential for ensuring accurate

The NPM command fails to execute the Webpack script, yet it successfully runs when manually entered into the terminal

Trouble with Callback firing in Select2's 'Infinite Scroll with Remote Data' feature

How can we redirect to another page after checking a box?

What is the best way to send an Ajax Json Response to a php script?

display the text from the template after selecting it (including both the text-field and value-field)

Discover an Element within a JSON Array and Append a New Value to it

What is the best way to conditionally render table data in React JS using a loop?

Is there a way to retrieve files from a main directory as well as all its subdirectories?

Minecraft-Forge: Tracking JSON file checksums

Using AngularJS to refresh information stored in an array

Different options for determining network connectivity on a website

Each loop in the forEach function triggers the mouseup event

Node JS confirmation dialog box

Having trouble parsing an array from Alamofire in iOS using SwiftyJSON? You may encounter null values while attempting to parse

Utilizing jQuery's Chained Selectors: Implementing Selectors on Previously Filtered Elements

I would like to hide the button if there are fewer than five visible