forEach loop keeps appending to first child element only-CodePudding

I'm in a bit of a pickle. I'm running a forEach loop for an API that will create a new div for each result with some html appended inside it. While the data is being retrieved, it appends only to the first div created. I'm trying to ensure each set of text ends up in each individual div. Can anyone enlighten me on what I'm doing wrong? Thanks

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)
  })
}

CodePudding user response：

In the last line of your forEach callback, you're querying the first .resultContainer element instead of the one you've created before. Instead of immediately appending that div to the DOM, append your record to resultContainer, then append only resultContainer to the DOM, like this (I've changed Object to obj because Object is already defined):

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); 
  })
}

CodePudding user response：

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);
  })
}

CodePudding user response：

How about adding an identifier?

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