HTTP Request, Object/Array Destructuring : <p>I have an array of objects, that are on an api.</p>

<pre><code>{
    "ErrorCode": 0,
    "ErrorMessage": null,
    "Warehouses": [
        {
            "Code": null,
            "Name": "Depozit Fabrica",
            "WarehouseID": "cb4fbab4-b8db-4807-a2b0-fad710f1fd9e"
        },
        {
            "Code": "3",
            "Name": "Depozit Magazin",
            "WarehouseID": "dfa08a15-e3a0-4d43-8af6-c24a9d43101c"
        },
        {
            "Code": null,
            "Name": "Depozit Ograda",
            "WarehouseID": "0dc8318d-305c-4e09-a31c-aa6fd44bf2ca"
        }
    ]
}
</code></pre>

<p>I got the "Name" of "Warehouses" showed in my DOM. These "Name" have different ID's. SO, what I'm trying to do is everytime I click on a certain "Name" object, I get its ID and further call another REST API, with this ID, that shows an assortment list for example.</p>

<pre><code>async function getWarehouse() {
    const response = await fetch(url);
    const data = await response.json();
    const { Warehouses } = data;

    for (var i = 0; i &lt; Warehouses.length; i++) {
        const dataItem = Warehouses[i].Name;
        console.log(dataItem);

        document.getElementById("depList").innerHTML += 
         `
         &lt;ul&gt;
           &lt;li class="data-item"&gt;${dataItem}&lt;/li&gt;
         &lt;/ul&gt;
         `
... 
</code></pre>
