In TypeScript, fetch JSON data from a URL and gain access to an array of JSON objects

Question

In TypeScript, fetch JSON data from a URL and gain access to an array of JSON objects

I'm struggling to find a solution and implement it in the correct format.

An API returns a JSON file to me via a URL. The format is as follows:

{"success":true,

    "data":[
    {
      "loadTimestamp":"2022-07-20T15:12:35.097Z",
      "seqNum":"9480969",
      "price":"45.7",
      "quantity":"0.2",
      "makerClientOrderId":"1658329838469",
      "takerClientOrderId":"1658329934701"
    },
    {
      "loadTimestamp":"2022-07-20T14:49:11.446Z",
      "seqNum":"9480410",
      "price":"46",
      "quantity":"0.1",
      "makerClientOrderId":"1658328403394",
      "takerClientOrderId":"0"
    }]

}

Since it is received via URL, I cannot directly access the object using code like:

myobj['data']['price']

I have the option to either convert the data from a string using JSON.parse(), or work with it as an object. However, I am facing difficulties in using it directly.

It seems like the JSON file contains an array of data inside it. My objective is to display all the data from the array, focusing on values like price and quantity.

How can I extract the specific values I need?

json typescript

Answer 1

Answer №1

Finally, I have located what I was searching for. Instead of receiving the outcome in JSON format, I am now extracting it from the text using response.text()

Upon accomplishing this task, I established a new constant named res and stored JSON.parse(data) within it

const website  = 'https://myurl.com/'+pub_key
const feedback = await fetch(website)
let data = ''
if (feedback.ok) { data = await feedback.text() } else { console.log("Error HTTP: " + feedback.status) }

const res = JSON.parse(data)

Following these steps, I can access my data in two different manners:

console.log(res["data"][0]["price"])
console.log(res.data[0].price)

Alternatively, I could mix it up and create a delicious cocktail using my trusty blender :)))

if(res.success==true){
    for(let element in res.data){
        console.log(res.data[element].price,res.data[element].quantity)
    }
}

Answer 2

Finally, I have located what I was searching for. Instead of receiving the outcome in JSON format, I am now extracting it from the text using response.text()

Upon accomplishing this task, I established a new constant named res and stored JSON.parse(data) within it

const website  = 'https://myurl.com/'+pub_key
const feedback = await fetch(website)
let data = ''
if (feedback.ok) { data = await feedback.text() } else { console.log("Error HTTP: " + feedback.status) }

const res = JSON.parse(data)

Following these steps, I can access my data in two different manners:

console.log(res["data"][0]["price"])
console.log(res.data[0].price)

Alternatively, I could mix it up and create a delicious cocktail using my trusty blender :)))

if(res.success==true){
    for(let element in res.data){
        console.log(res.data[element].price,res.data[element].quantity)
    }
}

In TypeScript, fetch JSON data from a URL and gain access to an array of JSON objects

Answer №1

Similar questions

A Guide on Using Multiple Clauses to Filter Data in Elasticsearch

What are the steps to incorporate JSON into my ActionScript 3 code?

Python tutorial: Efficiently sorting dictionaries by their values

The API for monitoring Jenkins build time trends through curl does not produce any results

Clicking on an icon to initiate rotation (Material UI)

What is the best way to track events in angular-meteor when a user logs in, logs out, or when there is a change in the user

Verify if the value is larger or smaller in WireMock

Rediscovering the Depths of Nested JSON Arrays in Postgres

Issue with Value Update in Angular 7 Reactive Forms

Pinia is having trouble importing the named export 'computed' from a non-ECMAScript module. Only the default export is accessible in this case

Having trouble transforming the JSON object into a usable format

Retrieve information from the accuweather api endpoint

Tips for effectively transmitting JSON data through SuperAgent within the React framework

Using Node to upload various large JSON files into mongoDB

Encountering a Runtime Exception while setting up a Client Component in the latest version of Next JS (v13.3

Arranging JSON structure using json_build_object and json_build_array functions within Postgresql

Increasing the PHP memory limit while updating large JSON files can help improve performance and

Angular 2/4 throws an Error when a Promise is rejected

The AJAX request encountered an error due to an Unexpected End of JSON Input

Using Json with React's Context API