'Rendering fetch data to HTML list

I am new to JS and I have to use Fetch API to get the data as JSON and render currencies' data to an HTML list, which already has 3 items as sample HTML that should be replaced.

The initialize(json) is supposed to do the work but I've not found a way to render object keys and values inside HTML.

I can print them in the console but the problem comes when I need to reference json key-value pairs to match Code and Name inside list items.

How can I do it without having properties names?

Thank you!

HTML List

<ul class="currencylist js-currencylist">

    <li class="currencylist__item currencylist__item--header">
        <span class="currencylist__item-code">Code</span>
        <span class="currencylist__item-name">Name</span>
        <span class="currencylist__item-actions">&nbsp;</span>
    </li>

    <li class="currencylist__item js-currency-item" data-code="ADA">
        <span class="currencylist__item-code">ADA</span>
        <span class="currencylist__item-name">
            <a href="#" class="link">Cardano</a>
        </span>
        <span class="currencylist__item-actions">
            <a class="link js-item-fav" href="#" data-code="ADA">
                <span class="icon link__icon">
                    <img src="img/ico-fav-outline.svg" alt="Add to favs">
                </span>
            </a>
        </span>
    </li>

    <li class="currencylist__item js-currency-item" data-code="EUR">
        <span class="currencylist__item-code">EUR</span>
        <span class="currencylist__item-name">
            <a href="#" class="link">Euro</a>
        </span>
        <span class="currencylist__item-actions">
            <a class="link js-item-fav" href="#" data-code="EUR">
                <span class="icon link__icon">
                    <img src="img/ico-fav-outline.svg" alt="Add to favs">
                </span>
            </a>
        </span>
    </li>

    <li class="currencylist__item js-currency-item" data-code="USD">
        <span class="currencylist__item-code">USD</span>
        <span class="currencylist__item-name">
            <a href="#" class="link">United States Dollar</a>
        </span>
        <span class="currencylist__item-actions">
            <a class="link js-item-fav" href="#" data-code="USD">
                <span class="icon link__icon">
                    <img src="img/ico-fav-outline.svg" alt="Add to favs">
                </span>
            </a>
        </span>
    </li>

</ul>

JavaScript

function fetchData () {
    fetch ('https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies.json')
        .then (response => {
            if(!response.ok) {
                throw new Error (`HTTP error: ${response.status}`);
            }  
            return response.json();
        })

        .then (json => initialize(json) )
        .catch (err => console.error(`Fetch problem: ${err.message}`) );
}

Fetch data sample

{1inch: '1inch Network', ada: 'Cardano', aed: 'United Arab Emirates Dirham', afn: 'Afghan afghani', algo: 'Algorand', …}
1inch: "1inch Network"
ada: "Cardano"
aed: "United Arab Emirates Dirham"
afn: "Afghan afghani"
algo: "Algorand"
all: "Albanian lek"
amd: "Armenian dram"
ang: "Netherlands Antillean Guilder"
...

Printing pairs in the console

//inside fetchData()

.then ( json => {
            Object.keys(json).forEach(function(key) {
                console.log('Key : ' + key + ', Value : ' + data[key]) 
              });
            })
javascripthtml


Solution 1:[1]

Have a look in this code. Hope this solves your issue.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .currencylist__item-code{
            padding-right:  50px;
        }
    </style>
</head>

<body>
    <ul class="currencylist js-currencylist" id="currency-ul">

        <li class="currencylist__item currencylist__item--header">
            <span class="currencylist__item-code">Code</span>
            <span class="currencylist__item-name">Name</span>
            <span class="currencylist__item-actions">&nbsp;</span>
        </li>



    </ul>
    <script>
        fetch('https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies.json')
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error: ${response.status}`);
                }
                return response.json();
            })

            .then(json => {
                for (var key in json) {
                    if (json.hasOwnProperty(key)) {
                        var val = json[key];
                        var dataspan='<span class="currencylist__item-code">'+key+'</span><span class="currencylist__item-name">'+val+'</span>'
                        const node= document.createElement("li")
                        document.getElementById("currency-ul").appendChild(node).innerHTML=dataspan;
                    }
                }
            }
        

        )
            .catch(err => console.error(`Fetch problem: ${err.message}`));

    </script>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Debashis Panda

Related Questions