How to fetch and console.log all items from an associative array

[John Keets]

I am trying to work with php and Javascript to select all username and info from a database, echo that into the <script> and then create a new div element for each username: info pair. The div will have a <span> at the top, into which the username will go, and then a <p> element below that for the info. So I fetched the info as an associative array using php. However, when I iterated over that by using for(var key in result), it returned only one of each value, and each user had multiple divs needed with their username. So yes, it created divs, but only one for each user, whereas I needed several per user. How can I get all values from the associative array, including duplicates?

 

[VBService]

Did you tried with for (const value of result) ... ?

<style>
  .users-list {
    width: 500px;
    margin: 2rem;
    background-color: hsl(0 0% 0% /.1);
    font: 400 .85rem/1 system-ui, monospace;
  }
  .users-list div {
    padding: .5rem;
  }
  .users-list div:nth-child(even) {
    background-color: hsl(0 0% 0% /.1);
  }
  .users-list div span {
    font-weight: bold;
    font-size: 105%;
  }
</style>

<div class="users-list"></div>

<script>
  const users = [
    { username: 'john_doe',      info: 'Lorem ipsum dolor sit amet.' },
    { username: 'emma_smith',    info: 'Consectetur adipiscing elit.' },
    { username: 'alex_jones',    info: 'Sed do eiusmod tempor incididunt.' },
    { username: 'olivia_taylor', info: 'Ut labore et dolore magna aliqua.' },
    { username: 'liam_brown',    info: 'Ut enim ad minim veniam.' }
  ];

  window.onload = populateUserList;
  function populateUserList() {
    const list = document.querySelector('.users-list');
    let html = '';

    for (const user of users) {
      html += `<div><span>${user.username}</span><p>${user.info}</p></div>`;
    }
    list.insertAdjacentHTML('beforeend', html);

    console.log(users);
    console.table(users);
  }
</script>

 

[VBService]

UPDATE

You can use the sql command ORDER BY `username` in php and get, for example, an array like this

const users = [
    { username: 'alex_jones',    info: 'Sed 1 do eiusmod tempor incididunt.' },
    { username: 'alex_jones',    info: 'Sed 2 do eiusmod tempor incididunt.' },
    { username: 'alex_jones',    info: 'Sed 3 do eiusmod tempor incididunt.' },
    { username: 'emma_smith',    info: 'Consectetur adipiscing elit.' },
    { username: 'john_doe',      info: 'Lorem 1 ipsum dolor sit amet.' },
    { username: 'john_doe',      info: 'Lorem 2 ipsum dolor sit amet.' },
    { username: 'liam_brown',    info: 'Ut enim ad minim veniam.' },
    { username: 'olivia_taylor', info: 'Ut labore et dolore magna aliqua.' }
];

<style>
  .users-list {
    width: 500px;
    margin: 2rem;
    background-color: hsl(0 0% 0% /.1);
    font: 400 .85rem/1 system-ui, monospace;
  }
  .users-list div {
    padding: .5rem;
  }
  .users-list div:nth-child(even) {
    background-color: hsl(0 0% 0% /.1);
  }
  .users-list div span {
    font-weight: bold;
    font-size: 105%;
  }
</style>

<div class="users-list"></div>

<script>
  const users = [
    { username: 'alex_jones',    info: 'Sed 1 do eiusmod tempor incididunt.' },
    { username: 'alex_jones',    info: 'Sed 2 do eiusmod tempor incididunt.' },
    { username: 'alex_jones',    info: 'Sed 3 do eiusmod tempor incididunt.' },
    { username: 'emma_smith',    info: 'Consectetur adipiscing elit.' },
    { username: 'john_doe',      info: 'Lorem 1 ipsum dolor sit amet.' },
    { username: 'john_doe',      info: 'Lorem 2 ipsum dolor sit amet.' },
    { username: 'liam_brown',    info: 'Ut enim ad minim veniam.' },
    { username: 'olivia_taylor', info: 'Ut labore et dolore magna aliqua.' }
  ];

  const users_merged_info = {};

  for (const user of users) {
    if (! users_merged_info[user.username]) {
      users_merged_info[user.username] = [];
    }
    users_merged_info[user.username].push(user.info);
  }

  console.log(users_merged_info);

  window.onload = populateUserList;
  function populateUserList() {
    const list = document.querySelector('.users-list');
    let html = '';

    for (const username in users_merged_info) {
      html += `<div><span>${username}</span>`;
      if (users_merged_info.hasOwnProperty(username)) {     
        for (const info of users_merged_info[username]) {
          html += `<p>${info}<p>`;
        }     
      }
      html += '</div>';
    }
    list.innerHTML = html;
  }
</script>

 

[VBService]

UPDATE

Even with "such a little bit messy" data in array like below

  const users = [
    { username: 'emma_smith',    info: 'Consectetur adipiscing elit.' },
    { username: 'alex_jones',    info: 'Sed 1 do eiusmod tempor incididunt.' },
    { username: 'john_doe',      info: 'Lorem 1 ipsum dolor sit amet.' },
    { username: 'sarah_smith',   info: 'Fusce consequat libero in sapien faucibus.' },
    { username: 'liam_brown',    info: 'Ut enim ad minim veniam.' },
    { username: 'olivia_taylor', info: 'Ut labore et dolore magna aliqua.' },
    { username: 'david_jackson', info: 'Nulla hendrerit lectus sed metus scelerisque.' },
    { username: 'john_doe',      info: 'Lorem 2 ipsum dolor sit amet.' },
    { username: 'michael_adams', info: 'Vivamus venenatis mauris at libero.' },
    { username: 'alex_jones',    info: 'Sed 2 do eiusmod tempor incididunt.' },
    { username: 'kate_smith',    info: 'Integer tristique tortor vel nisi dapibus, nec fringilla eros faucibus.' },
    { username: 'alex_jones',    info: 'Sed 3 do eiusmod tempor incididunt.' },
    { username: 'sarah_smith',   info: 'Pellentesque nec est in quam vestibulum vehicula vel eget purus.' },
    { username: 'kate_smith',    info: '' }, // empty
    { username: 'alex_jones',    info: 'Suspendisse potenti. In hac habitasse platea dictumst.' },
    { username: 'kate_smith',    info: 'Maecenas convallis mi eu urna viverra dignissim.' }
  ];

<style>
  .users-list {
    width: 500px;
    margin: 1rem;
    background-color: hsl(0 0% 0% /.1);
    font: 400 .75rem/1 system-ui, monospace;
  }
  .users-list div {
    padding: .5rem;
  }
  .users-list div:nth-child(even) {
    background-color: hsl(0 0% 0% /.1);
  }
  .users-list div span {
    font-weight: bold;
    font-size: 105%;
  }
  .users-list div p:last-of-type {
    margin-bottom: 0;
  }
</style>

<div class="users-list"></div>

<script>
  const users = [
    { username: 'emma_smith',    info: 'Consectetur adipiscing elit.' },
    { username: 'alex_jones',    info: 'Sed 1 do eiusmod tempor incididunt.' },
    { username: 'john_doe',      info: 'Lorem 1 ipsum dolor sit amet.' },
    { username: 'sarah_smith',   info: 'Fusce consequat libero in sapien faucibus.' },
    { username: 'liam_brown',    info: 'Ut enim ad minim veniam.' },
    { username: 'olivia_taylor', info: 'Ut labore et dolore magna aliqua.' },
    { username: 'david_jackson', info: 'Nulla hendrerit lectus sed metus scelerisque.' },
    { username: 'john_doe',      info: 'Lorem 2 ipsum dolor sit amet.' },
    { username: 'michael_adams', info: 'Vivamus venenatis mauris at libero.' },
    { username: 'alex_jones',    info: 'Sed 2 do eiusmod tempor incididunt.' },
    { username: 'kate_smith',    info: 'Integer tristique tortor vel nisi dapibus, nec fringilla eros faucibus.' },
    { username: 'alex_jones',    info: 'Sed 3 do eiusmod tempor incididunt.' },
    { username: 'sarah_smith',   info: 'Pellentesque nec est in quam vestibulum vehicula vel eget purus.' },
    { username: 'kate_smith',    info: '' }, // empty
    { username: 'alex_jones',    info: 'Suspendisse potenti. In hac habitasse platea dictumst.' },
    { username: 'kate_smith',    info: 'Maecenas convallis mi eu urna viverra dignissim.' }
  ];


  const users_merged_info = {};

  for (const user of users) {
    if (! users_merged_info[user.username])
      users_merged_info[user.username] = [];
    users_merged_info[user.username].push(user.info);
  }

  window.onload = populateUserList;
  function populateUserList() {
    const list = document.querySelector('.users-list');
    const fragment = document.createDocumentFragment();

    for (const username in users_merged_info) {
      const div = document.createElement('DIV');
      if (users_merged_info.hasOwnProperty(username)) {
        div.innerHTML += `<span>${username}</span>`;
        for (const info of users_merged_info[username])
          div.innerHTML += `<p>${info}</p>`;
      }
      fragment.appendChild(div);
    }
    list.appendChild(fragment);
  }
</script>