как отображать данные из двух объектов для l oop in javascript

Question

Я создал два объекта для отображения номера счета и доступного баланса. Номер счета отображает номер счета, но когда я попытался отобразить доступный баланс, используя внутреннюю для l oop, отображается только последнее значение, пожалуйста, помогите мне в this.

данные будут отображаться в виде скриншота

var acctInfo = [
{
"acctNum": "AAA - 1234",
"user": "Alice"
},
{
"acctNum": "AAA - 5231",
"user": "Bob"
}];

var balances = {
 "AAA-1234": 4593.22,
 "AAA-9921": 0
}

function bankinfo(){
  for(var i=0; i<acctInfo.length; i++){ 
    
    var div = document.createElement('div');
    div.setAttribute('class', 'border-bottom p-3 mx-2');
    var h5 = document.createElement('h5');
    h5.setAttribute('class', 'd-inline text-primary');  
    var h6 = document.createElement('h6');
    h6.setAttribute('class', 'float-right d-inline');
    div.appendChild(h5);
    div.appendChild(h6);

    h5.innerHTML = acctInfo[i].acctNum; 
     var result = Object.values(balances);       
    // Printing values 
    for(var j = 0; j < result.length; j++) { 
         h6.innerHTML = "$"+result[j];    
    }  
  document.querySelector('.main-card').appendChild(div);
  } 
  
}
bankinfo();

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<main class="col-5 m-2 p-0 main-card" id="data-content">
   <div class="bg-light border-bottom p-3">
     <h5 class="d-inline">Account</h5>
     <h5 class="float-right d-inline">Available Cash  </h5>
   </div>   
  </main>

Answer 1

const acctInfo = [
  {
    acctNum: "AAA-1234",
    user: "Alice",
  },
  {
    acctNum: "AAA-5231",
    user: "Bob",
  },
];

const balances = {
  "AAA-1234": 4593.22,
  "AAA-5231": 0,
};

function bankinfo() {
  acctInfo.forEach((item) => {
    const div = document.createElement("div");
    const h5 = document.createElement("h5");
    const h6 = document.createElement("h6");

    div.setAttribute("class", "border-bottom p-3 mx-2");
    h5.setAttribute("class", "d-inline text-primary");
    h6.setAttribute("class", "float-right d-inline");
    
    h5.textContent = item.acctNum;
    h6.textContent = balances[item.acctNum];

    div.appendChild(h5);
    div.appendChild(h6);

    document.querySelector(".main-card").appendChild(div);
  });
}
bankinfo();

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<main class="col-5 m-2 p-0 main-card" id="data-content">
   <div class="bg-light border-bottom p-3">
     <h5 class="d-inline">Account</h5>
     <h5 class="float-right d-inline">Available Cash  </h5>
   </div>   
</main>

вам не нужен второй l oop, если у вас будут правильные записи, оба объекта

Если вы все еще хотите ... Вы можете сделать это

const result = Object.keys(balances);
 result.forEach(x => {
    if(item.acctNum.toLowerCase() === x.toLowerCase()) {
       h6.innerHTML = "$"+balances[x];
    }
 });