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

Joined
Apr 17, 2024
Messages
1
Reaction score
0
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?
 
Joined
Jul 4, 2023
Messages
370
Reaction score
41
Did you tried with for (const value of result) ... ?
HTML:
<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>

1713374550260.png
 
Last edited:
Joined
Jul 4, 2023
Messages
370
Reaction score
41
UPDATE

You can use the sql command ORDER BY `username` in php and get, for example, an array like this
JavaScript:
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.' }
];

HTML:
<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>

1713483730297.png
 
Last edited:
Joined
Jul 4, 2023
Messages
370
Reaction score
41
UPDATE

Even with "such a little bit messy" data in array like below ;)
JavaScript:
  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.' }
  ];
HTML:
<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>

1713615492203.png
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,780
Messages
2,569,611
Members
45,285
Latest member
CryptoTaxxSoftware

Latest Threads

Top