Как json переформатировать в вид таблицы html?

Question

septim504 @septim504

JSON

Как json переформатировать в вид таблицы html?

Всем привет. У меня есть код

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var data = [
  {
    "UserID": 1,
    "UserName": "rooter",
    "Password": "12345",
    "Country": "UK",
    "Email": "sac@gmail.com"
  },
  {
    "UserID": 2,
    "UserName": "binu",
    "Password": "123",
    "Country": "uk",
    "Email": "Binu@gmail.com"
  },
  {
    "UserID": 3,
    "UserName": "cal",
    "Password": "123",
    "Country": "uk",
    "Email": "cal@gmail.com"
  },
  {
    "UserID": 4,
    "UserName": "nera",
    "Password": "1234",
    "Country": "uk",
    "Email": "nera@gmail.com"
  }
];
$(document).ready(function () {
    var html = '<table class="table table-striped">';
    html += '<tr>';
    var flag = 0;
    $.each(data[0], function(index, value){
        html += '<th>'+index+'</th>';
    });
    html += '</tr>';
     $.each(data, function(index, value){
         html += '<tr>';
        $.each(value, function(index2, value2){
            html += '<td>'+value2+'</td>';
        });
        html += '<tr>';
     });
     html += '</table>';
     $('body').html(html);
});

который хорошо работает, но вместо var data = [...] мне нужны данные из моего json файла, который находится там же где и скрипт и называется test.json . Как мне правильно прописать путь? Сколько не пытался ничего не получилось.

Вопрос задан более трёх лет назад
286 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

3 комментария

septim504 @septim504 Автор вопроса

попробовал так

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
  
$.getJSON("test.json", function(json){
        data = json;

    var html = '<table class="table table-striped">';
    html += '<tr>';
    var flag = 0;
    $.each(data[0], function(index, value){
        html += '<th>'+index+'</th>';
    });
    html += '</tr>';
     $.each(data, function(index, value){
         html += '<tr>';
        $.each(value, function(index2, value2){
            html += '<td>'+value2+'</td>';
        });
        html += '<tr>';
     });
     html += '</table>';
     $('body').html(html);
});

и так

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
  $.getJSON("test.json", function(json){
        data = json;

$(document).ready(function () {
    var html = '<table class="table table-striped">';
    html += '<tr>';
    var flag = 0;
    $.each(data[0], function(index, value){
        html += '<th>'+index+'</th>';
    });
    html += '</tr>';
     $.each(data, function(index, value){
         html += '<tr>';
        $.each(value, function(index2, value2){
            html += '<td>'+value2+'</td>';
        });
        html += '<tr>';
     });
     html += '</table>';
     $('body').html(html);
})});

Не выходит

Написано более трёх лет назад

Тестировщик Реальности @Aoom

septim504, вот так точно работает :)

<!DOCTYPE html>
<html>

<head>
    <title>
        Test
    </title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $.getJSON("test.json", function(json) {
            data = json;

            for (i in data) {
                var table_row = `<tr>` +
                    "<td id='user" + i + `' class="text-center">${data[i]["UserID"]}</td>` +
                    "<td id='user" + i + `_username'>${data[i]["UserName"]}</td>` +
                    "<td id='user" + i + `_password' class='text-center'>${data[i]["Password"]}</td>` +
                    "<td id='user" + i + `_country'>${data[i]["Country"]}</td>` +
                    "<td id='user" + i + `_email'>${data[i]["Email"]}</td>` +
                    "</tr>";
                $("#userTable").append(table_row);
            }
        });
    </script>
</head>

<body>
    <div class="Users">Users</div>
    <table id="userTable" class="table table-striped">
        <thead>
            <tr>
                <th class="col-xs-1 col-sm-1 col-lg-1 text-center">ID</th>
                <th class="col-xs-1 col-sm-1 col-lg-1">Username</th>
                <th class="col-xs-2 col-sm-2 col-lg-2 text-center">Password</th>
                <th>Country</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>

</html>

Написано более трёх лет назад

septim504 @septim504 Автор вопроса

Макс Шведов, спасибо за помощь, как я понял файлы должны находится на локальном сервере, чтоб все работало

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JSON

Простой
Замена строк в json?
- 1 подписчик
- вчера
- 58 просмотров
2

ответа
JSON

+2 ещё

Средний
При выгрузке json формата из After Effects не сохраняются цвета шейпов. Как исправить?
- 1 подписчик
- 30 апр.
- 17 просмотров
0

ответов
Парсинг

+1 ещё

Средний
Как правильно написать функцию IMPORTJSON для парсинга цен криптовалют в гугл таблицу?
- 1 подписчик
- 19 апр.
- 31 просмотр
0

ответов
PHP

+2 ещё

Простой
Как подружить html с json?
- 1 подписчик
- 14 апр.
- 186 просмотров
1

ответ
JSON

+3 ещё

Простой
Как правильно реализовать entity в clean architecture flutter?
- 1 подписчик
- 05 апр.
- 47 просмотров
1

ответ
JSON

+1 ещё

Средний
MODX, MIGX и Polylang кириллица?
- 1 подписчик
- 02 апр.
- 82 просмотра
1

ответ
JSON

+3 ещё

Средний
Как грамотно реализовать на PowerShell?
- 1 подписчик
- 20 мар.
- 225 просмотров
2

ответа
JSON

+1 ещё

Простой
Как преобразовать JSON в модель?
- 1 подписчик
- 19 мар.
- 115 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как исправить ошибку, c обновлением JSON запроса?
- 1 подписчик
- 17 мар.
- 116 просмотров
1

ответ
JavaScript

+3 ещё

Простой
Как сделать выбор случайной строки из JSON?
- 2 подписчика
- 04 мар.
- 170 просмотров
1

ответ
Показать ещё Загружается…

Ведущий системный аналитик

СберТех • Москва

от 270 000 ₽

Системный аналитик (Synapse)

СберТех • Москва

от 200 000 ₽

Системный аналитик (Банковский проект)

Bell Integrator • Ростов-на-Дону

от 240 000 до 320 000 ₽

Сделать автоматизацию действий на сайте

06 мая 2024, в 02:13

8000 руб./за проект

Разработать скрипт на терафлрме для деплоймеета

06 мая 2024, в 01:10

30000 руб./за проект

Правки в Laravel админку с тг ботами

05 мая 2024, в 23:43

8000 руб./за проект

Answer 1 · 2020-12-10 22:03:07

$.getJSON("test.json", function(json){
        data = json;
}

Как-то так должно работать :) Остальной скрипт нужно поместить внутри этой конструкции.

Как json переформатировать в вид таблицы html?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт