Как парсить json и добавлять к нему рандомную картинку?

Question

Скрипт слушает есть ли оповещения.

var socket = io("wss://socket.donationalerts.ru:443");
socket.emit('add-user', {
  token: "ТОКЕН ОПОВЕЩЕНИЯ",
  type: "alert_widget"
});
socket.on('donation', function(msg){
  console.log(msg)
});

Если оно есть, присылает json:

{
  "id": "24335622",
  "alert_type": "1",
  "additional_data": "{"randomness":517}",
  "username": "Имя",
  "amount": "50.00",
  "amount_formatted": "50",
  "amount_main": "50.00",
  "currency": "RUB",
  "message": "Сообщение",
  "date_paid": "2017-06-01 11:46:56",
  "emotes": null,
  "_is_test_alert": true
}

Как вывести только username и рандомную картинку рядом с ним?

Answer 1

const jsonString = '{"id":"24335622","alert_type":"1","additional_data":{"randomness":"517"},"username":"Имя username","imgSrc":"https://picsum.photos/100/100","amount":"50.00","amount_formatted":"50","amount_main":"50.00","currency":"RUB","message":"Сообщение","date_paid":"2017-06-01 11:46:56","emotes":null,"_is_test_alert":true}';

function generateCard(container, json) {

  const card = `
    <div class="card">
      <div class="card__title">
        ${json.username}
      </div>
      <div class="card__img">
        <img src="${json.imgSrc}">
      </div>
    </div>
  `;

  container.insertAdjacentHTML("beforeend", card);
}

const cardContainer = document.querySelector('.card-container');
const jsonObject = JSON.parse(jsonString);
generateCard(cardContainer, jsonObject);

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  display: flex;
  flex-direction: column;
  border: 2px solid black;
  padding: 10px;
}

.card > *:not(:last-child) {
  margin-bottom: 20px;
}

<div class="card-container"></div>

Answer 2

<div id="userName"></div>
<div><img src="" id="imgz"></div>
<script language="JavaScript">
    var imgs=[
        'https://1.bp.blogspot.com/-s3TxswyAegw/U4IGwpGjmlI/AAAAAAAAC9o/DLfJtqOd3ns/s1600/so-logo.jpg',
        'https://miro.medium.com/proxy/1*MrXQa_suwvsJOF2gDrRGFg.jpeg',
        'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ9uAR2y2Vg6ltbhQMd0G0fxVvnZPNOnmxJXg&usqp=CAU'
    ];
    var socket = io("wss://socket.donationalerts.ru:443");
    socket.emit('add-user', {
        token: "ТОКЕН ОПОВЕЩЕНИЯ",
        type: "alert_widget"
    });
    socket.on('donation', function(msg){
        console.log(msg);
        let result = JSON.parse(msg); // Переводим json в массив
        if(result){ // Проверяем есть ли значение
            let Name = document.getElementById('userName'); // Получаем поле, куда будем выводить имя.
            let Img = document.getElementById('imgz'); // Получаем поле, куда будем выводить картинку.
            if(Name){
                Name.innerText = msg['userName']; // Выводим имя в поле.
            }
            if(Img){
                Img.src = imgs[Math.floor(Math.random()*imgs.length)]; // Выводим рандомную картинку из массива imgs в которой массив ссылок на картинки в папке images или просто url картинки
            }
        }
    });
</script>

БЛОГ НА HUSL

Как парсить json и добавлять к нему рандомную картинку?

Ответы (2 шт):