Fetching an attribute from an array using a URL parameter in JavaScript

Question

Fetching an attribute from an array using a URL parameter in JavaScript

I am attempting to filter a JSON array based on a value from a URL and extract the vernacularName attribute. While debugging in F12, I can successfully retrieve the correct variable using record[0].vernacularName;, however, the code below still does not work.

document.getElementById("demo").innerHTML = datasetID;

functions as expected, but

document.getElementById("demo").innerHTML = vernacularName;

does not.

My end goal is to store the vernacularName as a session variable.

<body>
  <div class="">
    <h3>testing data</h3>
    <p id="demo" class = 'pl-5'></p>    
  </div>



<script type="text/javascript">
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);

  const species = urlParams.get('species')
  const bone = urlParams.get('bone')

  const datasetID = urlParams.get('datasetID')

  var data;
  $.getJSON("json/data.json", function(json){
    data = json;
  });

  record = data.filter(r => r.datasetID == datasetID);


  var vernacularName = record[0].vernacularName;
  // const vernacularName2 = record.vernacularName;
  $_SESSION["v"] = vernacularName;


</script>

<script>
document.getElementById("demo").innerHTML = vernacularName;
</script>

javascript json

Answer 1

Answer №1

Initially, I am uncertain as to why

document.getElementById("demo").innerHTML = vernacularName;

it is enclosed in its own script tag. It appears quite unusual.

Regardless, the issue at hand is that the data is not yet available. You cannot begin processing the data and updating elements on the page until the data has been retrieved.

This is where the second argument of getJSON comes into play - it is a function that is executed upon success, after the data has been fetched.

Therefore, all subsequent code should be placed inside that function:

  $.getJSON("json/data.json", function(json) {
    const data = json;
    const record = data.filter(r => r.datasetID === datasetID);
    const vernacularName = record[0].vernacularName;
    $_SESSION["v"] = vernacularName;
    document.getElementById("demo").innerHTML = vernacularName;
  });

Additional note: Given that you seem to be utilizing ES6+, it is advisable to avoid using var unless necessary. Instead, opt for let. More information can be found here and in this post. However, in this scenario, since everything in your code remains constant, sticking to const is suitable.

Answer 2

Initially, I am uncertain as to why

document.getElementById("demo").innerHTML = vernacularName;

it is enclosed in its own script tag. It appears quite unusual.

Regardless, the issue at hand is that the data is not yet available. You cannot begin processing the data and updating elements on the page until the data has been retrieved.

This is where the second argument of getJSON comes into play - it is a function that is executed upon success, after the data has been fetched.

Therefore, all subsequent code should be placed inside that function:

  $.getJSON("json/data.json", function(json) {
    const data = json;
    const record = data.filter(r => r.datasetID === datasetID);
    const vernacularName = record[0].vernacularName;
    $_SESSION["v"] = vernacularName;
    document.getElementById("demo").innerHTML = vernacularName;
  });

Additional note: Given that you seem to be utilizing ES6+, it is advisable to avoid using var unless necessary. Instead, opt for let. More information can be found here and in this post. However, in this scenario, since everything in your code remains constant, sticking to const is suitable.

Fetching an attribute from an array using a URL parameter in JavaScript

Answer №1

Similar questions

Step-by-step guide to creating a transition effect when the input changes

Issue with box shadow appearing incorrectly as element content increases in size while the body has an image background

What is the quickest method to perform a comprehensive comparison of arrays and combine distinct objects?

Issue with Ag-Grid's getRowClass not locating the appropriate CSS styling

Is there a way to utilize req.query, req.params, or req.* beyond its original scope without the need to store it in a database?

decoding JSON information on the Android platform

What is the best method for retrieving data from a website using Python and formatting it as either JSON or XML?

Struggling to successfully pass an array as an API response from Express to the Front End. Looking for any recommendations or

Show a table with rows that display an array from a JSON object using JavaScript

Error in the execution of the if statement within $(window).width() when it is not supposed to be

Troubleshooting Problems with Ajax Servlets

The struggle of accessing child components using ViewChild in Angular

The comparison between transmitting objects as JSON versus sending objects of a specified class

Getting the Angular component class reference within a triggered Highcharts selection event callback - what's the best approach?

Persistent hover effect for collapsible accordion panels when closing them

What is the best way to combine an array of objects into a single object in typescript?

Error occurred while looking for user by ID in the everyauth

Utilize module.exports to export objects containing callback functions

An anomaly where a mysterious symbol appears in front of every dollar sign in an HTML document

Steps to configure Jackson to exclude a specific `get()` method from object serialization