Retrieve all items or information from the API that must satisfy a specific criteria in order to be retrieved

I am looking to retrieve a list of items or data from an API source based on a specific VirtualOrganization, such as ATCclub. I am using Axios to fetch the data.

Basically, I only want to retrieve the JSON data from the API that matches the specified VirtualOrganization, and then display it.

Below is the code I am using:

let data;
axios.get(URLBASE + '/flights/' + expert + '?apikey=' + APIKEY, {
    params: {
        virtualOrganization: "ATCclub"
    }
  })
.then(response => {
    console.log(response.data.result);
     if (response.data.result.virtualOrganization === "ATCclub") {
        for (let i = 0; i < response.data.result.virtualOrganization.array.length; i++) {
            document.getElementById("username").innerHTML = response.data.result.username;
            document.getElementById("aircraftId").innerHTML = response.data.result.aircraftId;
            document.getElementById("heading").innerHTML = response.data.result.heading;
            document.getElementById("latitude").innerHTML = response.data.result.latitude;
            document.getElementById("longitude").innerHTML = response.data.result.longitude;
            document.getElementById("speed").innerHTML = response.data.result.speed;
            document.getElementById("altitude").innerHTML = response.data.result.altitude;
        }
    }
    
    
})
.catch(error => console.error(error));

NOTE: I have successfully displayed one row from the JSON data.

Answer №1

After receiving a helpful tip on "filter it after," I was able to find a solution. Here is the code snippet that solved my problem:

// resF (result of flights)
const resF = response.data.result.filter(function (e){
        return e.virtualOrganization === "ATCclub";
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Enhancing Webpages with AngularJS: The Power of Binding and Re

Using AngularJS to load AJAX content and ng-repeat to generate a list of items. I have a placeholder {{noun}} in the content, expecting it to be replaced with data from $scope.noun when the AJAX content is loaded. However, this does not happen automaticall ...

What is the best way to send messages to both my queue and make a post request?

Currently, I have a function in place that successfully posts data to the database. However, I am now trying to enhance this function by also incorporating sending a message to trigger another function simultaneously. I attempted to implement both sending ...

Incorporating a Script into Your NextJS Project using Typescript

I've been trying to insert a script from GameChanger () and they provided me with this code: <!-- Place this div wherever you want the widget to be displayed --> <div id="gc-scoreboard-widget-umpl"></div> <!-- Insert th ...

What is the process for invoking a functional component within a class-based component using the onClick event?

I am trying to display my functional component in a class-based component, but it is not working as expected. I have created a SimpleTable component which is function-based and displays a table with some values. However, I want to show this table only wh ...

Is it possible to incorporate spread syntax(...) within a vue.js 2.x template?

Is it possible to utilize a similar structure in a vue.js template? <template> <vxe-table> <vxe-column v-for="options in someConsts" ...options width="160"> </vxe-column> </vxe-ta ...

Sometimes, it feels like TypeScript's async await does not actually wait for the task to complete before moving on

Recently, I have been transitioning to using the async await pattern more frequently instead of the traditional Promise syntax because it can help in keeping the code structure cleaner. After some experimentation, I felt like I had a good grasp on how to u ...

Unraveling the enigmatic duality of self-closure with Bootstrap 4

In the small div element, I need to incorporate multiple tooltip functionalities. Furthermore, as this div has an "overflow: auto" attribute, Popper.js automatically ensures that the tooltips remain within the boundaries of the element. In such situation ...

What is the process of passing data from a jQuery-AJAX function to a PHP file and how can these values be retrieved within the PHP

Here is the jQuery-AJAX function I have written: $('#request_form').submit(function(e) { var form = $(this); var stud_id = $('#stud_id').val(); var reg_date = $('#reg_date').val(); var formdata = false; var fileIn ...

Promise.all does not wait for the inner Promise.all to complete before continuing

let dataObj = [ { Id: 1, name: 'Alice', Address:[{ city: 'Paris', country: 'France' }] }, { Id: 2, name: 'Bob', Address: [{ city: 'NYC', country: &a ...

Change the color of the menu icon based on the specified HTML class or attribute

I'm trying to create a fixed menu that changes color depending on the background of different sections. Currently, I am using a data-color attribute but I am struggling with removing and adding the class to #open-button. Adding the class works fine, ...

Leveraging TypeScript to Access Parameters in React Router

Currently, I am delving into the realm of TypeScript usage in my React projects and I have encountered a stumbling block when it comes to implementing React Router's useParams() feature. My import statement looks like this: import { useParams } from ...

Storing numbers with a thousand separator in a JavaScript Array: tips and tricks

I need to save an Array in this format const price = [ 1.000, 24.500, 3.99, 4.00 ]; However, when I use console.log to print it, the numbers get truncated to integers (1 instead of 1.000, and 4 instead of 4.00). What's the best way to preserve the ...

What is the best way to retrieve the post JSON data in the event of a 404 error?

When my service call returns a 404 error, I want to display the server's message indicating the status. The response includes a status code and message in JSON format for success or failure. This is an example of my current service call: this._trans ...

Navigating Through Different Environments in Your React Application

Currently, I am tackling a small project where I am utilizing React for the frontend and Java for the backend. The project involves two distinct environments. My main struggle revolves around effectively managing multiple environments. To set the API URL, ...

Tips for enabling browser back and forward functionality in a one-page website design

Building on the previous discussion about optimizing a horizontal sliding layout (Most efficient way to do a horizontal sliding layout), I'm curious if it's feasible to enable the back and forward buttons in the browser when implementing a single ...

Experience the magic of Fancybox 2 with ever-changing JSON content

I've been working on integrating dynamic content into a Fancybox 2.0 popup that triggers when a button is clicked. Despite trying different approaches, I'm encountering a persistent "The requested content cannot be loaded" error. My objective is ...

Parsing dynamic JSON fields using GSON: A comprehensive guide

Currently, I am using GSON to parse JSON from an API and I have encountered a challenge in parsing the dynamic fields within the data. For illustration, here is an example of the JSON data that is returned from a query: { - 30655845: { id: "30655845 ...

How should a function be correctly implemented to accept an object and modify its attributes?

I have a question regarding the update method in my code. In the function below, it takes an object called newState and uses Object.assign() to update the properties of the class instance. I want TypeScript to only allow: An object as input Properties tha ...

Issues with Autofocus while Searching and Selecting from Dropdown menu

Here is the JavaScript code I am using: <script type="text/javascript"> function handleSelectionChange(selectElement, nextField) { nextField.focus(); } function handleKeyPress(event, currentField, nextField) { i ...

Remove information from the database seamlessly without the need to refresh the page

I need assistance with deleting data from a database without having to refresh the page. While my current code works, it still requires the page to be refreshed after deleting a product. I am looking for a solution similar to this Below is the JavaScript ...