JSON from api to html - Javascript

amarton
April 17, 2023
200 views
0 votes
2 Answers

I am pulling json from an API but its format is not familiar to me.

It looks like this:

{"ok": true, "database": "boe_spending", "query_name": null, "rows": [["CITIBANK NA", 99237716.31], ["MARYLAND STATE RETIREMENT & PENSION SYSTEM", 16438857.25], ["DALY COMPUTERS INC", 9314951.79]], "truncated": false, "columns": ["payee_name_refined", "total"], "query": {"sql": "select payee_name_refined, sum(amount) as totalrnfrom vendors rnwhere agency_name = 'ALLEGANY COUNTY PUBLIC SCHOOLS'rngroup by 1rnorder by 2 descrnlimit 10", "params": {}}, "error": null, "private": false, "allow_execute_sql": true, "query_ms": 7.000529003562406}

I want to display the data in "rows" in HTML using javascript.

I am used to seeing JSON formatted like this (and I would know how to print it in my HTML):

[
    {
        "payee_name_refined": "CITIBANK NA",
        "sum": "99237716.31"
    },
    {
        "payee_name_refined": "MARYLAND STATE RETIREMENT & PENSION SYSTEM",
        "sum": "16438857.25"
    },
    {
        "payee_name_refined": "DALY COMPUTERS INC",
        "sum": "9314951.79"
    }
]

But I don’t know what to do with the data I get from the API.

Ultimately, I’d like to print the following in HTML:

CITIBANK NA, $99,237,716.31

MARYLAND STATE RETIREMENT & PENSION SYSTEM, $16,438,857.25

DALY COMPUTERS INC, $9,314,951.79

How can I use the provided JSON data to accomplish this?

Thanks for any help

Answers

Like this:

const data = {"ok": true, "database": "boe_spending", "query_name": null, "rows": [["CITIBANK NA", 99237716.31], ["MARYLAND STATE RETIREMENT & PENSION SYSTEM", 16438857.25], ["DALY COMPUTERS INC", 9314951.79]], "truncated": false, "columns": ["payee_name_refined", "total"], "query": {"sql": "select payee_name_refined, sum(amount) as totalrnfrom vendors rnwhere agency_name = 'ALLEGANY COUNTY PUBLIC SCHOOLS'rngroup by 1rnorder by 2 descrnlimit 10", "params": {}}, "error": null, "private": false, "allow_execute_sql": true, "query_ms": 7.000529003562406};

// Iterate over this as you normally would with what you're used to working with
data.rows
// Assuming that you're iterating as "item"
// This is your 'payee_name_refined'
item[0]
// This is your 'sum'
item[1]

// Such as...
for (const item of data.rows) {
    // payee_name_refined
    console.log(item[0]);
    // sum
    console.log(item[1]);
}

Or transform it to your usual format…

const transformedData = data.rows.map(item => ({
    payee_name_refined: item[0], sum: item[1]
}));

And then work with it in the way that you’re used to.

[] is a syntax for array

const data = {"ok": true, "database": "boe_spending", "query_name": null, "rows": [["CITIBANK NA", 99237716.31], ["MARYLAND STATE RETIREMENT & PENSION SYSTEM", 16438857.25], ["DALY COMPUTERS INC", 9314951.79]], "truncated": false, "columns": ["payee_name_refined", "total"], "query": {"sql": "select payee_name_refined, sum(amount) as totalrnfrom vendors rnwhere agency_name = 'ALLEGANY COUNTY PUBLIC SCHOOLS'rngroup by 1rnorder by 2 descrnlimit 10", "params": {}}, "error": null, "private": false, "allow_execute_sql": true, "query_ms": 7.000529003562406}

const container = document.querySelector('pre')

for (const row of data.rows) {
  container.textContent += row[0] + ' ' + row[1] + 'n'
}

<pre></pre>

Please signup or login to give your own answer.

Click here to cancel reply.

JSON from api to html – Javascript

Answers