Как вставить локальный файл JSON в HTML - PullRequest
Новая
       2

Как вставить локальный файл JSON в HTML

0 голосов
/ 05 ноября 2019

Здравствуйте, в приведенном ниже коде я хочу загрузить локальный файл JSON вместо данных вручную, я хотел, чтобы мой код считывал все данные из файла и отображал их в таблице HTML. Мой JSON-файл находится в src / main / resources / json / movies.json. В коде вместо записи массива JSON, как показано как var movies = [{}] ... Я хотел вставить локальный файл JSON. 

<!DOCTYPE html>
<html>
<head>
    <title>Convert JSON Data to HTML Table</title>
    <style>
        th, td, p, input {
            font:14px Verdana;
        }
        table, th, td 
        {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
        th {
            font-weight:bold;
        }
    </style>
</head>
<body>
    <input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
    <p id="showData"></p>
</body>

<script>
    function CreateTableFromJSON() {
        var movies = [
            {   "title":"The Shawshank Redemption", 
                "imdb-id":"tt0111161", 
                "rank":"1", 
                "rating":"9.216891492644972", 
                "rating-count":"2025250"
                }
        ]

        // EXTRACT VALUE FOR HTML HEADER. 
        // ('Book ID', 'Book Name', 'Category' and 'Price')
        var col = [];
        for (var i = 0; i < movies.length; i++) {
            for (var key in movies[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");

        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

        var tr = table.insertRow(-1);                   // TABLE ROW.

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        // ADD JSON DATA TO THE TABLE AS ROWS.
        for (var i = 0; i < movies.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = movies[i][col[j]];
            }
        }

        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    }
</script>
</html>

Ответы [ 2 ]

0 голосов
/ 06 ноября 2019

Предполагая, что src/main/resources/json/movies.json является документом на стороне сервера, вам может помочь следующий пример: 

var testData = [{
  "title": "The Shawshank Redemption",
  "imdb-id": "tt0111161",
  "rank": "1",
  "rating": "9.216891492644972",
  "rating-count": "2025250"
}];

$(function() {
  function createTableFromJSON(jData) {
    // Find Column Headers
    var col = [];
    $.each(jData[0], function(key, val) {
      col.push(key);
    });

    // Create Table via jQuery Object
    var table = $("<table>", {
      class: "data-table"
    });

    // Append Header Row
    table.append($("<tr>", {
      class: "data-table-header-row"
    }));

    // Populate Header Cells
    $.each(col, function(k, h) {
      var th = $("<th>").html(h).appendTo($("tr:eq(0)", table));
    });

    // Append new Rows and Populate Cells
    $.each(jData, function(i, r) {
      var tr = $("<tr>", {
        class: "data-table-row"
      }).appendTo(table);
      $.each(r, function(j, c) {
        $("<td>").html(c).appendTo(tr);
      });
    });

    // Return Table jQuery Object
    return table;
  }

  // Bind Click Callback to Button
  $("#create-table").click(function() {
    /*
    $.getJSON('./src/main/resources/json/movies.json', function(response){
      $("#showData").html(createTableFromJSON(response));
    });
    */
    $("#showData").html(createTableFromJSON(testData));
  });
});
th,
td,
p,
input {
  font: 14px Verdana;
}

table,
th,
td {
  border: solid 1px #DDD;
  border-collapse: collapse;
  padding: 2px 3px;
  text-align: center;
}

th {
  font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="create-table" type="button" value="Create Table From JSON" />
<p id="showData"></p>

Я использовал testData для тестирования. В комментариях вы увидите: 

$.getJSON('./src/main/resources/json/movies.json', function(response){
  $("#showData").html(createTableFromJSON(response));
});

Это ПОЛУЧИТ данные JSON и прочитает JSON в ответ переменной. Вы можете передать это непосредственно в вашу функцию и передать его в документ через .html().

0 голосов
/ 06 ноября 2019

Проверьте сообщение , оно содержит важную информацию для достижения того, что вы хотите. На высоком уровне современные браузеры не позволяют вам получать доступ к локальным файлам без вмешательства пользователя, поэтому вы не можете включить файл json в теги html. Да, вы можете включать файлы javascript, но не файлы с расширением json. Теперь перейдем к первоначальному запросу. Существуют различные способы, которыми вы можете настроить файл json на сервере, а затем вы можете получить файл JSON с помощью вызова GET ajax. Как вы можете разместить файл во многих местах в Интернете -

  1. http://myjson.com
  2. https://jsonbin.io/
  3. страниц github
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...