Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Подскажите как массив вывести в <table> (https://javascript.ru/forum/misc/84896-podskazhite-kak-massiv-vyvesti-v-table.html)

Aidec 31.01.2023 16:26
Подскажите как массив вывести в <table>
 
Извините что только так могу скинуть материал, фотками:










Тут скрипт, массив(или объект, путаюсь) и результат.
Мне нужно все данные каждого объекта в массиве, вывести в таблицу, но получается совсем не то что хочу.
Массив берется с левого сайта скриптом. ListTr.
Закоментированный код, это моя попытка вывести элемент объекта.
Пожалуйста объясните почему у меня не получается.

рони 31.01.2023 17:31
Aidec,
второй цикл должен быть не по персоналу а по элементу пишите код, или хотя бы пяток объектов из массива

Aidec 31.01.2023 17:46
Извини пожалуйста, а можешь пример написать?
А то я чет не совсем понял

Aidec 31.01.2023 17:52
Если я правильно понял то у меня должно было все выводиться даже убрав второй цикл, но почемуто если убрать его то у меня ничего не выведется, да и вывелось вообще не правильно, там место $(key), должен был номер объектов в массиве

Aidec 31.01.2023 17:54
Думаю в первом цикле тоже не personal, а что-то другое нужно писать

рони 31.01.2023 17:59
Aidec,
пять объектов вашей структурой напишите от фонаря
[{ID : ...},{ID : ...},{ID : ...},{ID : ...},{ID : ...}]

рони 31.01.2023 18:16
Aidec,
ау!!!

Aidec 31.01.2023 18:49
[{ID : ‘13355’, title: ‘Вася’, foto: ‘http://www.wincore.ru/uploads/posts/2015-03/1427372648_29_result.jpg‘},{ID : ‘77777’, title: ‘Паша ’, foto: ‘http://www.wincore.ru/uploads/posts/2015-03/1427372648_29_result.jpg‘}, {ID : ‘4444’, title: ‘света’, foto: ‘http://www.wincore.ru/uploads/posts/2015-03/1427372648_29_result.jpg‘}, {ID : ‘99999’, title: ‘зоя’, foto: ‘http://www.wincore.ru/uploads/posts/2015-03/1427372648_29_result.jpg‘}, {ID : ‘111111’, title: ‘рома’, foto: ‘http://www.wincore.ru/uploads/posts/2015-03/1427372648_29_result.jpg‘}]

Aidec 31.01.2023 18:50
Я правильно тебя понял?

рони 31.01.2023 18:53
Aidec,
ок

рони 31.01.2023 19:01
таблица из массива объектов
 
Aidec,
песочница не работает с http, поэтому нет фото тут, нужно https для макета
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        table {
            border-collapse: collapse;
        }

        td,
        th {
            border: 1px solid #999;
            padding: 0.5rem;
            text-align: left;
        }

        td img {
            height: 50px;
            width: 50px;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const tbody = document.querySelector(".presentation tbody");
            const personal = [{
                ID: "13355",
                title: "Вася",
                foto: "http://www.wincore.ru/uploads/posts/2015-03/1427372648_29_result.jpg"
            }, {
                ID: "77777",
                title: "Паша ",
                foto: "http://www.wincore.ru/uploads/posts/2015-03/1427372648_29_result.jpg"
            }, {
                ID: "4444",
                title: "света",
                foto: "http://www.wincore.ru/uploads/posts/2015-03/1427372648_29_result.jpg"
            }, {
                ID: "99999",
                title: "зоя",
                foto: "http://www.wincore.ru/uploads/posts/2015-03/1427372648_29_result.jpg"
            }, {
                ID: "111111",
                title: "рома",
                foto: "http://www.wincore.ru/uploads/posts/2015-03/1427372648_29_result.jpg"
            }];
            for (const {
                    ID,
                    title,
                    foto
                } of personal) tbody.insertAdjacentHTML("beforeend", `<tr><td>${ID}<td>${title}<td><img src="${foto}" alt=""><td>нет<td>нет`)
        })
    </script>
</head>

<body>
    <table class="presentation">
        <thead>
            <tr>
                <th>Ключ</th>
                <th>Имя</th>
                <th>Фото</th>
                <th>Уровень</th>
                <th>Специализация</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>

</html>

Aidec 31.01.2023 19:16
Скажи, а как сделать что бы эти объекты автоматически проставлялись в таблицу, просто я замучаюсь 500 с копейками объектов сюда вписывать.

Я на ютубе ролик нашел, там как раз мой вариант, но я немогу его использовать, знаний не хватает.
Посмотри пожалуйста, может ты поймёшь как использовать его метод в моей сетуации( ролик короткий)
https://youtu.be/TYRJ_X9qMSE

рони 31.01.2023 19:23
Цитата:
Сообщение от Aidec
Скажи, а как сделать что бы эти объекты автоматически проставлялись в таблицу, просто я замучаюсь 500 с копейками объектов сюда вписывать.
бред какой-то... вам дали готовое решение что не так?
вам надо только одну строку поменять на
const personal = getPersonal();
и всё

Aidec 31.01.2023 19:33
Блин сори)))
Я не понял сразу.
Огромное спасибо!)

рони 31.01.2023 19:38
Aidec,

document.addEventListener("DOMContentLoaded",async function() {
            const tbody = document.querySelector(".presentation tbody"); //куда выводить,указать селектор своей таблицы
            const personal = await getPersonal();// что выводить, getPersonal должна быть доступна
            for (const {   //вывод данных в таблицу
                    ID,
                    title,
                    foto //указать остальные ключи если нужно тут и ниже
                } of personal) tbody.insertAdjacentHTML("beforeend", `<tr><td>${ID}<td>${title}<td><img src="${foto}" alt=""><td>нет<td>нет`)
        })

Aidec 01.02.2023 07:46
Сделал все как ты написал, но чет не выводится, может не getPersonal
Просто массив выводится когда я пишу console.log(listTr)

рони 01.02.2023 09:25
Aidec,
где у вас есть массив туда и ставьте код, учитывая ваши классы элементов на странице и названия переменных.
const tbody = document.querySelector(".presentation tbody");
 for (const {   //вывод данных в таблицу
                    ID,
                    title,
                    foto //указать остальные ключи если нужно тут и ниже
                } of listTr) tbody.insertAdjacentHTML("beforeend", `<tr><td>${ID}<td>${title}<td><img src="${foto}" alt=""><td>нет<td>нет`)

рони 01.02.2023 09:28
Цитата:
Сообщение от Aidec
может не getPersonal
в таком случае смотрят ошибки в консоли и скорее всего getPersonal либо не доступна либо не учтена асинхронность ответа с сервера

Aidec 01.02.2023 14:03
Ну я попробовал с тем кодом что я писал с самого начала, он мне весь список массива выдал(его номера от 0-500), дальше пробовал писать так: personal[0].ID в итоге он мне выдал таблицу с четырьмя строками 0,1,2,3, ID был под номером 1520, короче он просто посчитал сколько цифр в этом ID, так же и с ФИО-Title.

рони 01.02.2023 14:24
Aidec,
без живого макета, можно только гадать.


Часовой пояс GMT +3, время: 08:09.