Как напечатать набор результатов, связанный только с одной ячейкой в ​​HTML-таблице

Question

Моя БД состоит из двух таблиц Пользователь и Друзья

• An User имеют много Friends

Мне нужно показать следующее представление таблицы

Я запросил обе таблицы с помощью INNER JOINследующим образом

SELECT usr.FirstName, usr.Phone, usr.Email, fri.FirstName AS friendName
FROM User AS usr
INNER JOIN Friends AS fri
WHERE fri.idUser = usr.idUser

Поскольку многие Friends имеют User, Friends имеют контроль, сколько результатов установленобудет возвращено.

Вывод:

{
  "FirstName" : "jose", "Phone" : 123, "Email": "jose@jose.com", "friendName" : "Pedro",
  "FirstName" : "jose", "Phone" : 123, "Email": "jose@jose.com", "friendName" : "Juan", // Same user, with another friend
}

Набор результатов верный, но я не могу понять, как его распечатать, как в виде таблицы, показанной ранее из Javascript или любого другого языкапрограммный код, который запросил этот запрос

Есть идеи, как решить эту проблему?

Answer 1

Для уточнения, с HTML вы можете просто использовать неупорядоченные списки <ul> для Friends столбец

<table border="1">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Phone</th>
      <th>E-Mail</th>
      <th>Friends</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Jose</td>
      <td>123</td>
      <td>jose@jose.com</td>
      <td>
        <ul>
          <li>Pedro</li>
          <li>Juan</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Felipe</td>
      <td>456</td>
      <td>felipe@felipe.com</td>
      <td>
        <ul>
          <li>Carlos</li>
          <li>Jose</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

Чтобы использовать Javascript давайте предположим, что у вас есть массив users, вы можете зациклить его и сгенерировать <table> следующим образом:

let users = [
    {"userId": 1, "FirstName": "jose", "Phone": 123, "Email": "jose@jose.com", "friendName": "Pedro"},
    {"userId": 1, "FirstName": "jose", "Phone": 123, "Email": "jose@jose.com", "friendName": "Juan"},
    {"userId": 2, "FirstName": "felipe", "Phone": 456, "Email": "felipe@felipe.com", "friendName": "Carlos"},
    {"userId": 2, "FirstName": "felipe", "Phone": 456, "Email": "felipe@felipe.com", "friendName": "Jose"}
];

// To combine friends of the same user in an array at property friendNames
let usersWithFriends = {};
for (let user of users) {
  let index = 'user' + user.userId;
  if (typeof usersWithFriends[index] === 'undefined') {
    usersWithFriends[index] = user;
  } else {
    if (typeof usersWithFriends[index].friendNames === 'undefined') {
      usersWithFriends[index].friendNames = [usersWithFriends[index].friendName];
      delete usersWithFriends[index].friendName;
    }

    usersWithFriends[index].friendNames.push(user.friendName);
  }
}

let tbodyHTML = '';
// For the # column
let no = 1;

for (let user in usersWithFriends) {
  let userDetails;
  if (usersWithFriends.hasOwnProperty(user)) {
    userDetails = usersWithFriends[user];
  }
  tbodyHTML += '<tr>';
  tbodyHTML += `<td>${no++}</td>`;
  tbodyHTML += `<td>${userDetails.FirstName}</td>`;
  tbodyHTML += `<td>${userDetails.Phone}</td>`;
  tbodyHTML += `<td>${userDetails.Email}</td>`;
  tbodyHTML += '<td><ul>';
  for (let friendName of userDetails.friendNames) {
    tbodyHTML += `<li>${friendName}</li>`;
  }
  tbodyHTML += '</td></ul>';
  tbodyHTML += '</tr>';
}

document.getElementsByTagName('tbody')[0].innerHTML = tbodyHTML;

<table border="1">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Phone</th>
      <th>E-Mail</th>
      <th>Friends</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Answer 2

ОК, я вижу тег, помечающий этот вопрос как mysql, поэтому очень просто реализовать вывод html при использовании команды mysql с конфигурацией --html.как показано ниже:

mysql -u username -p password -D database --html -e"select * from your_table_name limit 10" > data_result.html

когда вы откроете вышеупомянутый HTML-файл data_result.html в браузере, вы получите желаемый стиль печати.