Вытащить данные из объекта массивов с объектами

Question

Сразу к вопросу.

Есть объект с массивами, внутри которого лежат объекты:

const data = {
    "rating": [
    {
      "id": "123",
      "name": "Владимир",
      "lastName": "Ларионов",
      "img": "./male.png",
      "points": "463"
    },
    {
      "id": "9",
      "name": "Владимир",
      "lastName": "Сергеев",
      "img": "./male.png",
      "points": "521"
    },
    {
      "id": "231",
      "name": "Вениамин",
      "lastName": "Васильев",
      "img": "./male.png",
      "points": "865"
    },
    
    ],
    "friends": [
        {
            "id": "15411",
            "name": "Ирина",
            "lastName": "Чеснокова",
            "img": "./female.png"
        },
        {
            "id": "15564",
            "name": "Дарина",
            "lastName": "Боброва",
            "img": "./female.png"
        }
    ]
}

И есть соответствующие строки, в которые нужно вставить эти данные:

<div class="rating-text-down">
             <p class="rating-number-place">Рейтинг</p>
              <img src="img/brownitem.png" width="28" height="28" alt="friend-icon" class="player-photo-place">
              <p class="rating-name-place">ФИО</p>
              <p class="rating-exp-place">Очки</p>
</div>

<div class="rating-text-down">
             <p class="rating-number-place">Рейтинг</p>
              <img src="img/brownitem.png" width="28" height="28" alt="friend-icon" class="player-photo-place">
              <p class="rating-name-place">ФИО</p>
              <p class="rating-exp-place">Очки</p>
</div>

<div class="rating-text-down">
             <p class="rating-number-place">Рейтинг</p>
              <img src="img/brownitem.png" width="28" height="28" alt="friend-icon" class="player-photo-place">
              <p class="rating-name-place">ФИО</p>
              <p class="rating-exp-place">Очки</p>
</div>

Каким образом вытащить данные из такого сложного массива и записать их в соответствующие строки? Перепробовал и foreach и циклы всякие. Но не понимаю - как заполнить таблицу данными из такого массива?

Answer 1

const renderHtmlByData = (data) => {
    let html = data.rating.reduce((acc, el) => {
        return acc + `<div class="rating-text-down">
             <p class="rating-number-place">Рейтинг</p>
              <img src="${el.img}" width="28" height="28" alt="friend-icon" class="player-photo-place">
              <p class="rating-name-place">${el.name} ${el.lastName}</p>
              <p class="rating-exp-place">${el.points}</p>
</div>`;
    }, '');
    
    document.getElementById('test').innerHTML = html;
};

let data = {
    "rating": [
      { "id": "123", "name": "Владимир", "lastName": "Ларионов", "img": "./male.png", "points": "463" },
      { "id": "9", "name": "Владимир", "lastName": "Сергеев", "img": "./male.png", "points": "521" },
      { "id": "231", "name": "Вениамин", "lastName": "Васильев", "img": "./male.png", "points": "865" },    ],
    "friends": [
        { "id": "15411", "name": "Ирина", "lastName": "Чеснокова", "img": "./female.png" }, 
        { "id": "15564", "name": "Дарина", "lastName": "Боброва", "img": "./female.png" }
    ]
}

renderHtmlByData(data);

.rating-text-down {
    border: 1px solid black;
    margin-bottom: 5px;
}

<div id="test"></div>

БЛОГ НА HUSL

Вытащить данные из объекта массивов с объектами

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