forEach回圈只附加到第一個子元素

我有點苦惱。我正在為一個 API 運行一個 forEach 回圈，該回圈將為每個結果創建一個新的 div，并在其中附加一些 html。在檢索資料時，它僅附加到創建的第一個 div。我試圖確保每組文本都出現在每個單獨的 div 中。誰能告訴我我做錯了什么？謝謝

app.displayResults = (arrayOfObjects) => {
  arrayOfObjects.forEach((Object) =>{
    
    const number = Object.house_number;
    const address = Object.street_name;
    const zipCode = Object.zip_code;
    const borough = Object.borough;
    const date = Object.inspection_date;
    const initial = Object.inspection_type;
    const iResult = Object.result;
  
    const resultContainer = document.createElement("div");
    resultContainer.classList.add('resultContainer');
    document.querySelector('.inspectionResults').append(resultContainer); 
    
    const innerHTML = `
    <p class = "recordDetails"> ADDRESS: ${number}${address}</p>
    <p class = "recordDetails"> DATE: ${date}</p>
    <p class = "recordDetails"> BOROUGH: ${borough}</p>`

    const record = document.createElement("div");
    record.classList.add('record');
    record.innerHTML = `${innerHTML}`

    document.querySelector(".resultContainer").append(record)
  })
}

uj5u.com熱心網友回復：

forEach在回呼的最后一行，您查詢的是第一個.resultContainer元素，而不是您之前創建的元素。不要立即將該 div 附加到 DOM，而是將您的附加record到resultContainer，然后僅附加resultContainer到 DOM，如下所示（我已更改Object為，obj因為Object已定義）：

app.displayResults = (arrayOfObjects) => {
  arrayOfObjects.forEach((obj) =>{
    const number = obj.house_number;
    const address = obj.street_name;
    const zipCode = obj.zip_code;
    const borough = obj.borough;
    const date = obj.inspection_date;
    const initial = obj.inspection_type;
    const iResult = obj.result;
  
    const resultContainer = document.createElement("div");
    resultContainer.classList.add('resultContainer');
    
    const innerHTML = `
    <p class = "recordDetails"> ADDRESS: ${number}${address}</p>
    <p class = "recordDetails"> DATE: ${date}</p>
    <p class = "recordDetails"> BOROUGH: ${borough}</p>`

    const record = document.createElement("div");
    record.classList.add('record');
    record.innerHTML = `${innerHTML}`

    resultContainer.appendChild(record); // instead of directly appending record to document append it to the container, then append the container to the document
    document.querySelector('.inspectionResults').append(resultContainer); 
  })
}

uj5u.com熱心網友回復：

app.displayResults = (arrayOfObjects) => {
  arrayOfObjects.forEach((obj) =>{
    /*
    const number = Object.house_number;
    const address = Object.street_name;
    const zipCode = Object.zip_code;
    const borough = Object.borough;
    const date = Object.inspection_date;
    const initial = Object.inspection_type;
    const iResult = Object.result;
    */
    // Destructuring Assignment maybe better here
    const { house_number : number, 
           street_name : address, 
           zip_code : zipCode,
           borough,
           inspection_date : date,
           inspection_type : initial,
           result : iResult } = obj
  
    const resultContainer = document.createElement("div");
    resultContainer.classList.add('resultContainer');

    // below is the problem, you appended several divs with the class name 'resultContainer', every time you query, there were a array of it, and you always got the first.
    // document.querySelector('.inspectionResults').append(resultContainer); 
    
    const innerHTML = `
    <p class = "recordDetails"> ADDRESS: ${number}${address}</p>
    <p class = "recordDetails"> DATE: ${date}</p>
    <p class = "recordDetails"> BOROUGH: ${borough}</p>`

    const record = document.createElement("div");
    record.classList.add('record');
    record.innerHTML = innerHTML

    // here just append to the exact div you created above
    resultContainer.append(record)
    // then append the container which contains the content you expected to the documment
    document.querySelector('.inspectionResults').append(resultContainer);
  })
}

uj5u.com熱心網友回復：

添加識別符號怎么樣？

terms.setAttribute(‘id’,‘para-1’);

標籤：javascriptapi拿来附加附子

上一篇：嘗試按日期范圍對API集進行排序

下一篇：單擊按鈕，在控制臺中顯示由api獲取的資料