如何使用 javascript 顯示從外部 api 和 html 中同一卡上的本地存儲中獲取的數據

Question

我需要幫助通過編輯我的代碼來顯示我從外部 api 和本地 json 文件中獲取的數據，以便我的卡可以顯示用戶的頭像、姓名、職業、總印象數和同一張卡上的總轉化次數。

這是我的代碼：

<script>
        
        fetch("https://api.airtable.com/v0/appBTaX8XIvvr6zEC/tblYPd5g5k5IKIc98?api_key=key4v56MUqVr9sNJv")
      
            .then((data)=>{
               // console.log(data)
               return data.json();

            })
            .then ((completedata)=>{
             //console.log(completedata.records[0])
             //an empty variable to catch the incoming data
             let data1="";
             // Then i added a html template to the data1 variable
               completedata.records.forEach((values)=>{
                data1+=` 
                <div class="card">
                    <span class="avatarLetter">${values.fields.Name.substr(0,1)}</span>
                    <p class="name">${values.fields.Name}</p>
                    <p class="occupation">${values.fields.occupation}</p>
             </div> `;
               });

               document.querySelector("#card").innerHTML=data1;
            })

            
            .catch((error)=>{
             console.log(error);

            })
    //pulling data from local json file
    fetch('./logs.json')
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    // console.log(data);
    let data1 = "";
  let totalImpressions = 0;
  let totalConversions = 0;
    data.forEach((values) => {
      totalImpressions += values.impression;
      totalConversions += values.conversion;
      data1 += ` 
            <div class="card">
            <p class="impression">${values.impression}</p>
            <p class="conversion">${values.conversion}</p>
            </div> `;
    });
    data1 += `<div>Total impressions = ${totalImpressions} Total conversions = ${totalConversions}</div>`;
    document.querySelector("#card").innerHTML = data1;

  })
  .catch((error) => {
    console.log(error);
  })

        </script>

Answer 1

當你第二次寫

document.querySelector("#card").innerHTML = data1;

您覆蓋#card內容。

正確的方式：

document.querySelector("#card").innerHTML += data1;