JSON в HTML с URL - PullRequest
Новая
       12

JSON в HTML с URL

0 голосов
/ 02 ноября 2018

В настоящее время я пытаюсь изучить API RESTful и внедрить их в сценарий использования, и одна из вещей, которые я пытаюсь сделать, - это загрузить URL-адрес с полезной нагрузкой json с одного сервера на отдельный веб-сервер, чтобы отобразить на столе таблицу. данные. Я не слишком знаком с этим, поэтому я пытаюсь найти лучший способ сделать это.

Я использую этот API для публикации на странице domain.com/todos

https://github.com/corylanou/tns-restful-json-api

А потом я пытаюсь использовать это, чтобы распечатать его на стол https://github.com/sam-suresh/JSON-URL-to-HTML-Table

но не похоже, что это работает. Я помещаю все это в один индексный файл, и он показывает, что он ударил мой API на консоли, но я не показываю никаких выводов в таблице. 

<html>
<table id="personDataTable">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>due</th>
    </tr>

</table>

<style>
table {
  border: 2px solid #666;
    width: 100%;
}
th {
  background: #f8f8f8;
  font-weight: bold;
    padding: 2px;
}
</style>
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>
$.ajax({
    url: 'http://my-website-domain.com/todos',
    type: "get",
    dataType: "json",

    success: function(data) {
        drawTable(data);
    }
});

function drawTable(data) {
    for (var i = 0; i < data.length; i++) {
        drawRow(data[i]);
    }
}

function drawRow(rowData) {
    var row = $("<tr />")
    $("#personDataTable").append(row);
        row.append($("<td>" + rowData.id + "</td>"));
        row.append($("<td>" + rowData.name + "</td>"));
        row.append($("<td>" + rowData.due + "</td>"));
    }

</script>
</html>

И это то, что он показывает на странице / todos 

[{"id":1,"name":"Write presentation","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":2,"name":"Host meetup","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":3,"name":"New Todo","completed":false,"due":"0001-01-01T00:00:00Z"}

Ответы [ 5 ]

0 голосов
/ 02 ноября 2018

Чтобы составить таблицу данных JSON, вы можете использовать jQuery DataTables.

Вот пример кода: 

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": 'http://www.json-generator.com/api/json/get/cjnIrxkIUi?indent=2'
    } );
} );
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">


<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
0 голосов
/ 02 ноября 2018

Я думаю, что вы проверяете, API получает данные json, я копирую ваш код и хэш-код данных json и вижу, как он работает. 

//$.ajax({
//    url: 'http://my-website-domain.com/todos',
//    type: "get",
//    dataType: "json",
//
//    success: function(data) {
//        drawTable(data);
//    }
//});
var data = [{"id":1,"name":"Write presentation","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":2,"name":"Host meetup","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":3,"name":"New Todo","completed":false,"due":"0001-01-01T00:00:00Z"}];

 drawTable(data);

function drawTable(data) {
    for (var i = 0; i < data.length; i++) {
        drawRow(data[i]);
    }
}

function drawRow(rowData) {
    var row = $("<tr />")
    $("#personDataTable").append(row);
        row.append($("<td>" + rowData.id + "</td>"));
        row.append($("<td>" + rowData.name + "</td>"));
        row.append($("<td>" + rowData.due + "</td>"));
    }
<html>
<table id="personDataTable">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>due</th>
    </tr>

</table>

<style>
table {
  border: 2px solid #666;
    width: 100%;
}
th {
  background: #f8f8f8;
  font-weight: bold;
    padding: 2px;
}
</style>
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</html>
0 голосов
/ 02 ноября 2018

Проблема в том, что JSON, возвращаемый страницей / задачами, не является допустимым массивом JSON. Отсутствует 

]

в конце.

Так было бы: 

[{"id":1,"name":"Write presentation","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":2,"name":"Host meetup","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":3,"name":"New Todo","completed":false,"due":"0001-01-01T00:00:00Z"}]

Вот страница для проверки данных JSON: Json Parser Online

0 голосов
/ 02 ноября 2018

Спасибо всем за помощь. Проблема заключалась в том, что политика CORS не была включена, поэтому запрос блокировался. Исправление состояло в том, чтобы просто включить CORS, что было сделано в handlers.go для этого конкретного API, добавив 

w.Header().Set("Access-Control-Allow-Origin", "*")
0 голосов
/ 02 ноября 2018

Функция успеха не передает необработанные данные. Передан объект с множеством различных свойств. Данные это только один из них. Попробуйте это: 

$.ajax({
    url: 'http://my-website-domain.com/todos',
    type: "get",
    dataType: "json",

    success: function(results) {
        drawTable(results.data);
    }
});

Также возможно, что я помню это неправильно. Я бы добавил debugger в вашу функцию успеха и посмотрел, что на самом деле проходит, а затем пошел бы оттуда.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...