在JavaScript的forEach回圈中通過索引從jsonAPI獲取物件值？-有解無憂

fetch()這個周末我正在嘗試學習如何使用API……
我看到了這個有趣的 API 服務，我試圖學習如何使用它

我遇到了一個小問題，javascript

問題

我想從 a 中獲取資料.Json（這很好用），
但是當我想將值放入a 時，<div>
并object[index]沒有顯示任何內容

據我所知，這似乎是可能的，
但在這種情況下，不是（......我在互聯網上到處搜索，沒有結果）

基本上......
這行不通object[index]; //index variable, is a number
這行得通 object.object1; //normal method

我試過的

是的，我嘗試了使用傳統方法obj1.obj2
并且作業正常，得到了我想要的結果！

但效率不高，就像我想要的那樣。

因為我想獲取值并將值index
放入<div>
indexNodeListOf<element>

完整的代碼，我寫的

打開代碼片段以查看代碼

顯示代碼片段

let orarioText = document.querySelectorAll('.orario');

const fetchPreghieraTime = async() => {
  const data = await fetch('http://api.aladhan.com/v1/timingsByCity?city=Milano&country=Italy&method=8');
  const orarioJson = await data.json();
  const orario = orarioJson.data.timings;

  orarioText.forEach((item, index) => {
    item.textContent = orario[index];
    console.log(item.textContent   ""   index);
  });
}

fetchPreghieraTime();

<div class="container">
  <div class="tempo-preghiera-container">
    <!-- 1 -->
    <div class="tempo-fajr">
      <div class="nome-preghiera">fajr</div>
      <div class="orario">error</div>
      <!-- this error text, It will change dinamically with JS -->
    </div>
    <!-- 2 -->
    <div class="tempo-duhr">
      <div class="nome-preghiera">duhr</div>
      <div class="orario">error</div>
      <!-- this error text, It will change dinamically with JS -->
    </div>
    <!-- 3 -->
    <div class="tempo-asr">
      <div class="nome-preghiera">asr</div>
      <div class="orario">error</div>
      <!-- this error text, It will change dinamically with JS -->
    </div>
    <!-- 4 -->
    <div class="tempo-maghrib">
      <div class="nome-preghiera">maghrib</div>
      <div class="orario">error</div>
      <!-- this error text, It will change dinamically with JS -->
    </div>
    <!-- 5 -->
    <div class="tempo-isha">
      <div class="nome-preghiera">isha</div>
      <div class="orario">error</div>
      <!-- this error text, It will change dinamically with JS -->
    </div>
  </div>
</div>

<script src="./script.js"></script>

我說的高效是什么意思？

這是撰寫更少、更簡單的代碼的想法：

elementClass.forEach((item, index) => {
    item.textContent = object[index];
});

您可以在下面看到效率低下的方法，這是有效的

elementClass[0].textContent = object.Fajr;
elementClass[1].textContent = object.Dhuhr;
elementClass[2].textContent = object.Asr;
elementClass[3].textContent = object.Maghrib;
elementClass[4].textContent = object.Isha;

如果可以的話，我想要更少的代碼或更簡單的解決方案
（我不希望您提供更快的程式，不，不，對我來說，如果簡單的邏輯對我來說就足夠了）
（想想我是否需要撰寫所有物件的名稱（如果有 50 個專案等），這就是原因）

由于陣列，我想到了第一個想法……
在陣列中，您可以使用帶數字的括號，以 0 開頭，即（不作業）

問題

代碼不起作用

let orarioText = document.querySelectorAll('.orario');
//there are 5 elements with the same class

orarioText.forEach((item, index) => {

    item.textContent = orarioJson.data.timings[index]; 
});

這作業正常

let orarioText = document.querySelectorAll('.orario');
//there are 5 elements with the same class

orarioText.forEach((item, index) => {
    item.textContent = orarioJson.data.timings.Fajr; //here you see the [index] is replaced by the actual name  
});

如果你也想試試，這里是我使用的 API

這里是API服務鏈接，我用的是
http://api.aladhan.com/v1/timingsByCity?city=Milano&country=Italy&method=8

這就是它的外觀：

{"code":200,"status":"OK","data":{"timings":{"Fajr":"05:31","Sunrise":"07:19","Dhuhr":"12:37","Asr":"15:26","Sunset":"17:56","Maghrib":"17:56","Isha":"19:26","Imsak":"05:21","Midnight":"00:37"}

在 JavaScript 的 forEach 回圈中通過索引從 json API 獲取物件值？

萬一，你不清楚問題：
你可以寫評論，詢問更多資訊，我會回答:)

我所問內容的簡短摘要

我想要這個 HTML

<!-- 0 -->
<div class="myClass"></div>
<!-- 1 -->
<div class="myClass"></div>
<!-- 2 -->
<div class="myClass"></div>
<!-- 3 -->
<div class="myClass"></div>
<!-- 4 -->
<div class="myClass"></div>

JS之后變成這樣的HTML

<!-- 0 -->
<div class="myClass">obj1 value</div>
<!-- 1 -->
<div class="myClass">obj2 value</div>
<!-- 2 -->
<div class="myClass">obj3 value</div>
<!-- 3 -->
<div class="myClass">obj4 value</div>
<!-- 4 -->
<div class="myClass">obj5 value</div>

我希望有一個非常有幫助的開發人員，他們有更多的經驗，
可以幫助我（也幫助看到這個問題的未來開發人員）

并感謝所有社區！

uj5u.com熱心網友回復：

您可以從父元素中獲取所需的屬性名稱。它的類名“tempo-....”中有它。它只需要對 HTML 進行一次更改，因為您對 dhurh 使用了不同的拼寫。因此，將其與 JSON 回應中的拼寫保持一致。

以下是如何從該“tempo”類中提取該名稱，然后使用它從回應物件訪問時間：

找到父元素.parentNode
獲取class屬性值.className
.match使用回傳陣列中的第一個條目提取“tempo-”之后的部分
將第一個字母轉換為大寫字母，其余字母轉換為小寫字母。
將其用作動態屬性

let orarioText = document.querySelectorAll('.orario');

const fetchPreghieraTime = async() => {
  const data = await fetch('http://api.aladhan.com/v1/timingsByCity?city=Milano&country=Italy&method=8');
  const orarioJson = await data.json();
  const orario = orarioJson.data.timings;

  orarioText.forEach((item, index) => {
    let name = item.parentNode.className.match(/(?<=\btempo-)\w /)[0];
    item.textContent = orario[name[0].toUpperCase()   name.slice(1).toLowerCase()];
  });
}

fetchPreghieraTime();

<div class="container">
  <div class="tempo-preghiera-container">
    <!-- 1 -->
    <div class="tempo-fajr">
      <div class="nome-preghiera">fajr</div>
      <div class="orario">error</div>
      <!-- this error text, It will change dinamically with JS -->
    </div>
    <!-- 2 -->
    <div class="tempo-dhuhr">
      <div class="nome-preghiera">duhr</div>
      <div class="orario">error</div>
      <!-- this error text, It will change dinamically with JS -->
    </div>
    <!-- 3 -->
    <div class="tempo-asr">
      <div class="nome-preghiera">asr</div>
      <div class="orario ">error</div>
      <!-- this error text, It will change dinamically with JS -->
    </div>
    <!-- 4 -->
    <div class="tempo-maghrib">
      <div class="nome-preghiera">maghrib</div>
      <div class="orario">error</div>
      <!-- this error text, It will change dinamically with JS -->
    </div>
    <!-- 5 -->
    <div class="tempo-isha">
      <div class="nome-preghiera">isha</div>
      <div class="orario">error</div>
      <!-- this error text, It will change dinamically with JS -->
    </div>
  </div>
</div>

<script src="./script.js"></script>

uj5u.com熱心網友回復：

嘗試這個

 <div class="container">
      <div class="tempo-preghiera-container">
      </div>
 </div>

const fetchPreghieraTime = async () => {
  const data = await fetch(
    "http://api.aladhan.com/v1/timingsByCity?city=Milano&country=Italy&method=8"
  );
  const orarioJson = await data.json();
  const orario = orarioJson.data.timings;

  let orarioText = document.querySelector(".tempo-preghiera-container");

  for (const property in orario) {
    if (property == "Sunset" 
         || property == "Sunrise"
         || property == "Midnight" ) continue;

    let div = document.createElement("div");
    div.classList.add("orario");
    let text = document.createTextNode(property   " - "   orario[property]);
    div.appendChild(text);
    orarioText.appendChild(div);
  }
};

fetchPreghieraTime();

輸出

Fajr - 05:31
Dhuhr - 12:37
Asr - 15:26
Maghrib - 17:56
Isha - 19:26
Imsak - 05:21

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/428654.html

標籤：javascript html json 前锋

上一篇：如何將段落元素放到下一行

下一篇：如何制作具有2種狀態的按鈕，單擊時根據狀態觸發不同的功能