1

I'm trying to create a table from an API using jQuery in JavaScript, I'm brand new to the language and it's unclear to me how to access the data that is returned from the .ajax query.

In the code below I am able to fetch the data and return it in the console but when I try to set it to a variable to use to visualize I am getting the error:

"<a class='gotoLine' href='#65:39'>65:39</a> Uncaught ReferenceError: data is not defined"

Is there a step I am missing to set the data variable to something I can access outside of the fetch request?

Here is my code:

HTML

<script src="script.js"></script>

<table>
  <thead>
    <tr>
      <th>City</th>
      <th>County</th>
      <th>Percent Immunized</th>
    </tr>
  </thead>
  <tbody id="vaxData">

JS

$.ajax({
    url: "https://health.data.ny.gov/resource/nvtm-yit2.json",
    type: "GET",
    data: {
      "$limit" : 5000,
      "$$app_token" : "aGFbKDOg0gCeCm2c9Od2EsFjL"
    }
}).done(function(data) {
  alert("Retrieved " + data.length + " records from the dataset!");
  console.log(data);
  
  return data
});

var vaxData = document.getElementById(data);

JSFiddle - https://jsfiddle.net/jconoranderson/bgk3Lvx5/25/

Improve this question
12
  • Hi John, please check this : stackoverflow.com/questions/52399080/… Commented Apr 14, 2023 at 16:08
  • in the 'done(callback)' you are receiving the data, but you are not storing it anywhere. Either you process your data and then present it to the view (as @rajatJha showed you) or you store it in a variable outside the scope of the callback, so that it can be accessed later. Plus, getElementById accepts a string, not a set of data. Commented Apr 14, 2023 at 16:11
  • That's what I'm wondering, is how to store it. Commented Apr 14, 2023 at 16:13
  • save any database Commented Apr 14, 2023 at 16:15
  • The problem I am having with that example though is that it is using a newly declared variable to create the 'data'. What I am trying to understand is how to take the data that is returned from the fetch command and put it into a variable that can be used elsewhere in the script. Commented Apr 14, 2023 at 17:51

1 Answer 1

Reset to default
2

The specific error that you get relates to this line:

var vaxData = document.getElementById(data);

As there is no data variable in scope here.

You may be thinking that returning a value from the done callback would populate this variable, but it won't because it's in a different scope (which you could fix by declaring var data before the $.ajax call) and it happens at a different time and context. The execution of the javascript won't wait for the done callback to finish and var vaxData = document.getElementById(data); will run before alert("Retrieved " + data.length + " records from the dataset!"); will run. A better explanation for this sort of thing can be found on MDN.

Also, document.getElementById() expects a string not an array like the data returned from the API should be.

To resolve this issue you could declare the data variable before the call to $.ajax and execute the update of the table in the done callback function. In the example below, I've used the a function called update_table to do this and I've called data vaccination_data.

One other issue is the HTML for the table is not completed in your example.

var vaccination_data = [];

$.ajax({
  url: "https://health.data.ny.gov/resource/nvtm-yit2.json",
  type: "GET",
  data: {
    "$limit" : 5000,
    "$$app_token" : 'your_app_token'
  }
}).done(function(api_data) {
  vaccination_data = api_data;
  update_table();
});

var vaxData = document.getElementById('vaxData');

const cell_keys = ['city', 'county', 'percentcompletelyimmunized'];

function create_element(tag, attributes, children = []) {
  const element = Object.assign(document.createElement(tag), attributes);
  element.append(...children);
  return element;
}

function create_row_element(item) {
  return create_element(
    'tr', {},
    cell_keys.map( (key) => create_element('td', { innerHTML: item[key] }) )
  );
}

function update_table() {
  vaxData.innerHTML = '';
  vaxData.append(...vaccination_data.map(create_row_element));
}


<table>
  <thead>
    <tr>
      <th>City</th>
      <th>County</th>
      <th>Percent Immunized</th>
    </tr>
  </thead>
  <tbody id="vaxData"></tbody>
</table>

Edit to add, this line: vaccination_data = api_data; also uses something called a closure to work so that the done callback function has a reference to the vaccination_data variable.

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

8 Comments

This is very helpful, thank you! I appreciate your detailed response. Though when I try to run this in jsfiddle I am now getting the error: "<a class='gotoLine' href='#52:1'>52:1</a> Uncaught ReferenceError: $ is not defined". I am trying to debug before I finally accept, I'm still learning how to discern .js errors. I'm used to python where it identifies the exact line...
Are you including jQuery in the new fiddle?
Ah, never mind! I was running it in pure javascript. Thanks so much for your help and patience. I'm very new to javascript.
One more question @Ben Stephens. If I wanted to access the data in the table as an object. How would I go about that? The vaxData function for example returns a. ot more information than just a json object containing the data...
@JohnConor I don't think I understand the question. vaxData is a variable containing a reference to an HTMLElement object. By "If I wanted to access the data in the table as an object." do you mean the data you've retrieved from the API or the contents of the cells of the table (or something else)?
|

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.