Создание HTML-страницы с JS из JSON

Я ищу очень простой пример использования Javascript для анализа файла JSON и вывода html-файла или заполнения html-файла. Все примеры, которые я нашел до сих пор, имеют фрагменты кода, и у меня нет фона для заполнения пробелов между ними.

Спасибо за любые скрипки (что было бы потрясающе), ссылки и умные комментарии.

8
html javascript json parsing

5 ответов

вы можете использовать библиотеку микротемплирования, например ус, для разбора входящих объектов JSON в HTML-фрагменты с помощью {{ key }} синтаксис шаблона. Если ваш объект выглядит так:

var myObj = {
    name: 'Joe Smith',
    age: 25,
    features: {
        hairColor: 'red',
        eyeColor: 'blue'
    }
};

используя усы, вы можете легко отобразить его в HTML, используя {{#}} и {{ / }} для обхода вложенных объектов:

Mustache.render('Hello, my name is {{name}} and I am {{age}} years old. {{#features}} I have {{hairColor}} hair and {{eyeColor}} eyes.{{/features}}', myObj);

выходы:

Привет, меня зовут Джо Смит и мне 25 лет. У меня рыжие волосы и голубые глаза.

EDIT: более уместно приложение-динамическое создание панели управления с помощью шаблона с вложенными списками объектов. Вот мой шаблон и объект (HTML разбит на список и присоединен для ясности):

var panel = [
  '<div id="cpanel">',
    '{{#cpanel}}',
      '<div class="panel_section">',
        '<h1 class="cpanel">{{name}}</h1>',
        '<p>',
          '{{#content}}',
            '<button id="{{id}}">{{id}}</button>',
          '{{/content}}',
        '</p>',
      '</div>',
    '{{/cpanel}}',
  '</div>',
].join('\n');

var panelObj = {
  cpanel: [
  {
    name: 'playback',
    content: [
      {id: 'play'},
      {id: 'pause'},
      {id: 'stop'}
    ]
  }, {
    name: 'zoom',
    content: [
      {id: 'zoomIn'},
      {id: 'zoomOut'}
    ]
  }]
};

затем вы представляете с усами:

Mustache.render(panel, panelObj);

выходы:

<div id="cpanel">
  <div class="panel_section">
    <h1 class="cpanel">playback</h1>
    <p>
      <button id="play">play</button>
      <button id="pause">pause</button>
      <button id="stop">stop</button>
    </p>
  </div>
  <div class="panel_section">
    <h1 class="cpanel">zoom</h1>
    <p>
      <button id="zoomIn">zoomIn</button>
      <button id="zoomOut">zoomOut</button>
    </p>
  </div>
</div>
14

пример шаблона

Я бы предложил на шаблонных инструментов, например чисто...

целью такого инструмента является разделение логики и представления.

например, создание списка из данных JSON с помощью упомянутого инструмента будет выглядеть следующим образом:

файл данных JSON

{'who':'BeeBole!'}

HTML-код

<html>

<head>
  <title>PURE Unobtrusive Rendering Engine</title>

  <script src="../libs/jquery.js"></script>
  <script src="../libs/pure.js"></script>
</head>

<body>
  <!-- the HTML template -->
  Hello <a class="who" href="#"></a>

  <script>
    // the JSON data we want to render
    $.getJSON('yourJSONdataFile.json', function(data) {
        // run the rendering
        $('a').autoRender(data);
        // PURE tries to match class with the JSON property and replace the node value with the value of the JSON property
    });
  </script>
</body>
</html>

Это самый основной подход, подходящий, если у вас есть простые данные JSON (см. рабочий пример jsfiddle здесь).. Начать руководство проведет вас через другой пример, если базовый подход не подходит. Для более продвинутых функций посмотрите на документация.

варианты

не было никакой особой причины, по которой PURE был использован в приведенном выше примере. У вас есть много альтернатив там:

...или вы можете сделать это вручную, как пояснил здесь.

14

вы можете посмотреть на С помощью jQuery.dForm. Это помогает создавать HTML и формы динамически с помощью JSON.

3

поэтому я предполагаю, что вы имеете в виду, что ваш JSON содержит строку HTML внутри него.

допустим, ваш JSON:

{

"htmlString" : "<div> now thats smart! </div>"

}

вы можете отобразить это в своем HTML, написав свой HTML следующим образом:

    <html>
    <head>

    var myjson = {"htmlString" : "<div> now thats smart! </div>"}

    <script type="text/javascript">

    function loadHTML() {

    document.getElementByTagName("body").innerHTML(myjson["htmlString"]);

    }

    </script>
</head>
<body onload='loadHTML()'>
</body>
</html>

обратите внимание, что вы также можете использовать AJAX для извлечения JSON и его визуализации однако обратите внимание, что внедрение HTML внутри JSON при транспортировке с сервера считается уязвимостью безопасности. Вместо этого вы можете получить частичный HTML с сервера напрямую, используя AJAX, а затем замените части этого HTML (шаблона) динамическими значениями, используя javascrip и REST/SOA

надеюсь, что это помогает

2

EJS или встроенный Java-скрипт, который приятен и забавен. Вы можете использовать фреймворк переднего плана, такой как backbone или React facebook, который является более сложным. Есть несколько хороших видеоуроков по уроку узла codeschool для EJS. вот пример 

  var foo = {'city':'SF', 'party':'now'}

С EJS его так же просто, как:

   <div> <p> going to <%= foo.city %> to party <%= foo.party %> </p></div>

чтобы получить текст: "собираюсь в SF на вечеринку сейчас"

С помощью EJS или my fav PEJS вы можете сделать if, switch, for (), Date ()..... вы получите точку. посмотрите сюда Pejs читать EJS по. Много интересных вещей, которые вы можете сделать

0