Как 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 . Как мне правильно прописать путь? Сколько не пытался ничего не получилось.

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

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

Подписаться 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 Автор вопроса

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

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

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

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

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

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

C#

+1 ещё

Средний
Как разобрать json на классы и переменные в c#?
- 2 подписчика
- 03 нояб.
- 255 просмотров
2

ответа
API

+2 ещё

Простой
Найти сервер или название сервера Discord по ID?
- 1 подписчик
- 25 окт.
- 118 просмотров
1

ответ
PHP

+4 ещё

Простой
Как с удаленного сервера отправить запрос на POS терминал?
- 1 подписчик
- 14 окт.
- 174 просмотра
3

ответа
JSON

Средний
Как прописать conf в telegraf для парсинга json данных?
- 1 подписчик
- 02 окт.
- 76 просмотров
1

ответ
JSON

+2 ещё

Сложный
Ansible grep json?
- 1 подписчик
- 25 сент.
- 129 просмотров
1

ответ
HTML

+1 ещё

Простой
Как правильно вставить HTML-код в JSON-файл?
- 1 подписчик
- 24 сент.
- 211 просмотров
2

ответа
Android

+3 ещё

Средний
Как работать с большими json файлами, которые получаются по запросу в Андроид приложении?
- 1 подписчик
- 23 сент.
- 150 просмотров
3

ответа
Python

+1 ещё

Простой
Не получается записать в файл?
- 1 подписчик
- 15 сент.
- 97 просмотров
1

ответ
Python

+1 ещё

Простой
Поиск данных в JSON?
- 1 подписчик
- 10 сент.
- 210 просмотров
3

ответа
Android

+2 ещё

Простой
Как спрасить api.open-meteo с помощбю Gson?
- 1 подписчик
- 22 авг.
- 97 просмотров
0

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

Инженер по ручному тестированию

Hello, Doc!

от 80 000 ₽

Java-разработчик

Гринатом

До 300 000 ₽

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

Selecty • Москва

До 350 000 ₽

Сделать запись в файл на ubuntu

27 дек. 2024, в 03:33

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

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

27 дек. 2024, в 02:41

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

Нарисовать арты

26 дек. 2024, в 23:03

500 руб./в час

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

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

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

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

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

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

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