JavaScript utilizing an API to retrieve specific data values

Below is some API Data that I have:

[
    {
        "symbol": "AAPL",
        "name": "Apple Inc.",
        "price": 144.98,
        "changesPercentage": -1.22,
        "change": -1.79,
        "dayLow": 142.54,
        "dayHigh": 146.96,
        "yearHigh": 150,
        "yearLow": 93.7125,
        "marketCap": 2419368132608,
        "priceAvg50": 138.45343,
        "priceAvg200": 131.05212,
        "volume": 113982837,
        "avgVolume": 85057328,
        "exchange": "NASDAQ",
        "open": 144.81,
        "previousClose": 146.77,
        "eps": 4.449,
        "pe": 32.587097,
        "earningsAnnouncement": "2021-07-27T16:30:00.000+0000",
        "sharesOutstanding": 16687599204,
        "timestamp": 1627504655
    }
]

Now, here is a piece of code using a mock API key to retrieve data:

var $stocks = $('#stocks');
    $.ajax({
        type: 'GET',
        url: 'https://financialmodelingprep.com/api/v3/quote/AAPL?apikey=c0dabd2d8a382584d2144bdefde830f2',
        success: function (percent) {
            $.each(percent, function (i, item) {
                $stocks.append(percent.changesPercentage);
            })
        }
    });

I am looking for a way to extract the changesPercentage value and display it on my webpage using HTML and CSS. Since I will be dealing with data from different companies, a flexible solution would be ideal.

javascripthtmlcssajaxapi

Answer №1

Attempting to retrieve changesPercentage from the percent array results in an undefined property.

To obtain this value from each element in the array, utilize the item parameter within the callback function of $.each:

$stocks.append(item.changesPercentage);

Alternatively, you can also make use of the i parameter as an indexer for the original array:

$stocks.append(percent[i].changesPercentage);

It seems like the confusion stems from inadequate variable naming conventions. Using percent for an array of objects is misleading. A more suitable name such as results, or any other noun that describes the API output in plural form, would be more appropriate.

The significance of names in code cannot be overstated. They provide crucial information about the purpose and usage of a particular entity.

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

Running a series of functions consecutively with JQUERY

Currently, I am facing an issue with using an ajax method .load to replace the content of a div. The library I am working with does not allow me to replace the content of a div as some functions continue to run in the background. To overcome this challeng ...

javascriptjqueryhtmlajax

Utilizing 'Ng-If' causes a glitch in the program during the execution of a $( '#x' ).change event or when adding a new item with AngularFire $add

After implementing ng-if in my code, I observed two specific instances where it caused unexpected behavior. The first instance involves using ng-if="isOwnProfile" for an image-upload toolbar. However, the use of ng-if resulted in the event listener ceasin ...

javascriptangularjsfirebaseangularfire

Creating a Custom Error Object in Feathersjs: A Step-by-Step Guide

If I were to throw a GeneralError when calling a service, how can I create an error object with the following structure: { "status": "Failed", "code": "500_1", "detail": "Something is wrong with your API" } I have attempted to add this in the error hook: ...

javascriptnode.jsfeathersjsfeathers-hookfeathers-service

Implementing Ajax Js to search within a specific div - reducing text overload on the page

Our e-shop on Prestashop requires an Ajax search feature to find compatible batteries and adapters on the page. Here is the code I have created: https://jsfiddle.net/fgfjo2n9/ I am facing two issues: • 1st I want the output to only display the heading ...

javascriptjqueryhtmlajaxsearch

Reveal covert web data table

I am encountering difficulties while attempting to extract information from a table that does not seem to be visible. The specific table can be found on this page, within the 'Code History' section highlighted in light purple. Login credentials ...

pythonhtmlselenium

Locate a specific option that matches the value of the selected data-status and set it as "selected" using jQuery

Currently, I am facing an issue where I need to load 2 separate ajax responses into a select dropdown. The select dropdown will have a data-status attribute, and my goal is to loop through the options to find the one that matches the value of the select da ...

javascriptjqueryajax

Express.js - What is the method to determine the total number of routes set up in my application?

Is there a way to calculate the total number of routes set up in Express.js without manually counting them? I have defined routes throughout my application and they are not grouped together, so I can't use a counter inside each one. I've searche ...

javascriptexpress

Is it possible to trigger an ajaxcall once another one has finished executing?

Just curious, do you think the code snippet below is capable of triggering a second ajax function once the first one has completed successfully? if(xmlHttp) // xmlHttp represents an XMLHttpRequest object { xmlHttp.onreadystatechange = function() ...

javascriptajax

Vue-moment displaying incorrect time despite timezone setting

Feeling a bit puzzled about my Laravel 8 application. I store time in UTC with timestamp_no_timezone in my PostgreSQL database. When I check the time in the database, it displays today's date with 13:45 as the time. However, when I use vue-moment and ...

javascriptlaravelvue.jsmomentjsinertiajs

Converting JSON array with ES6 functions

I have a specific array format that needs to undergo transformation. { [ { "condition": "$and", "children": [ { "column": "Title", "comparison": "$eq", "columnValue& ...

javascriptjsonmongodb

How can I make an HTML textbox in C# MVC flash a background color for one second using TextBoxFor?

I'm currently working with MVC and have the following code in my razor view. @Html.TextBoxFor(x => model.DateTimeStamp, new { @readonly = "readonly", @class=ViewBag.IsLatest ? "latest":""}) I want to briefly change the background color of this te ...

asp.net-mvccssrazor

Understanding the fundamentals of event handling in JavaScript

Is there a way to access the object that called the event handler within the event handler function itself? For example: marker.on('dragend', onDragEnd); In this case, marker is the object that triggers the ondragEnd function on the Dragend eve ...

javascripthtmljqueryevent-handlingjquery-events

Styling using CSS is effective only when applied locally, as it does not function properly on GitHub Pages

Although I have come across similar questions to the one I am facing, none of the solutions provided seem to work for me at the moment. My CSS file loads and functions as expected when tested locally, but once I upload it to GitHub, it stops working. In my ...

htmlcssgithub

Convert an array of objects into an object where the keys are determined by the value of a specific

I'm working with an array that looks like this: const inventory = [ { fruit: 'apple', quality: 'good', quantity: 10 }, { fruit: 'banana', quality: 'average', quantity: 5 }, { fruit: 'orange', qua ...

javascriptecmascript-6lodash

Exploring the depths of web automation using Python and Selenium, harnessing the power of a while

Currently, I am navigating through various pages on iens website using Selenium and Python. My goal is to click on the "Volgende" button (which means "next" in Dutch) continuously until there are no more pages left by implementing a while loop. Specificall ...

javascriptpythonseleniumcookies

What is the best way to automatically increase the value of another column in SQL when the primary key is set to auto

In my database, I currently have a table storing customer details. I am looking to introduce a new column that will provide either existing or new customers with a unique auto-incremented ID for identification purposes. Additionally, I require a primary ke ...

phphtmlmysqlauto-increment

Using the power of Javascript's jQuery library: the fantastic ".on()" Event Handler

I'm encountering an issue with the Jquery Event Handler ".on()". On my home page, I have a Favorite button on each post. If the post has not been favorited: li appears inactive Event 1 is triggered If the post has been favorited: li appears act ...

javascriptjqueryhtml

Tips for utilizing useQuery in React JS class component:

Currently, I'm working on an app that is exclusively built using React JS class components. Since UseQuery only functions with function components and the Query tag has been deprecated, I'm facing some challenges in getting the data I need. Any s ...

javascriptreactjsreact-reduxgraphqlapollo-client

Discover the Optimal Approach to Implementing Callback Function with JSON Using Javascript and Jquery

I have a function that looks like this : <script> function sticky(json){something here} </script> Now, I would like to utilize Jquery to invoke this function and display its output within a specific div element with the ID of "stickid". H ...

jqueryhtml

How to eliminate an item from an array using index in JavaScript with jQuery

In order to remove a specific array added in an object by index, I would like the functionality where when a user clicks on a button, it removes the corresponding array. Here's what I have in mind: HTML: <button>1</button> <button>2 ...

javascriptjquery