Как “научить” HTML брать контент из JSON файла?

316

10 декабря 2016, 10:29

Мне нужно чтобы HTML сайта использовал mustache или handlebars чтобы заполнить себя контентом из JSON файла.

Я создал простой HTML template и наполнил его контентом из внешнего JS файла. http://codepen.io/MaxVelichkin/pen/qNgxpB (образец ниже не работает, т.к к нему не подключена библиотека handlebars)

var quoteInfo = document.getElementById("quote-template").innerHTML; 
var template = Handlebars.compile(quoteInfo); 
var quoteData = template ({ 
    name: "Someome", 
    quotes: [ 
    {quote: "Some quote-1"}, 
    {quote: "Some quote-2"}, 
    {quote: "Some quote-3"}, 
    {quote: "Some quote-4"} 
    ], 
}) 
 
document.getElementById('quoteData').innerHTML += quoteData;

<div id="quoteData"></div> 
 
<script id="quote-template" type="text/x-handlebars-template"> 
 
<h3>Favorite {{name}} Quotes </h3> 
<ol> 
{{#each quotes}} 
<li>{{quote}} 
{{/each}} 
</ol> 
</script>

Теперь мне нужно чтобы контент лежал изначально в JSON файле.
Правильно ли я понимаю дальнейшую логику (ниже), и как решить эти две проблемы, решающие главную - научить html брать контент из JSON файла?

Нужно чтобы JSON передал контент в HTML, но этот контент должен быть преобразован в Javascript. Для этого в JSON файле я прописываю тот же код что и в .Javascript файле в моем примере по ссылке выше, но перед последней строчкой (которая помещает контент в HTML через innerHTML) пишу: var contentJS = JSON.parse(quoteData); и в последней строчке заменяю последнее qoteData на contentJS.
Подключаю JSON к HTMLПока не нашел понятный мне способ как это сделать. Насколько я понимаю, именно это делает предложенный мне Fetch API код:

fetch('/api/jsondata') .then(res => res.json()) .then(data => el.innerHTML(Handlebars.compile(data))) .catch(err => throw err)

Пока не онимаю как его использовать, насколько я понимаю Fetch чем-то похож на XMLHttpRequest (XHR) (что для меня - совсем новая тема)...

Answer 1

Простой сервер на node, который встроит JSON в страницу

const http = require('http'); 
const server = http.createServer().listen(8080); 
 
server.on('request', (req, res) => { 
  res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' }); 
  //Твой JSON 
  const data = { 
    name: "Someome", 
    quotes: [ 
      {quote: "Some quote-1"}, 
      {quote: "Some quote-2"}, 
      {quote: "Some quote-3"}, 
      {quote: "Some quote-4"} 
    ], 
  }; 
  const jsonString = JSON.stringify(data); 
  res.end(` 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
</head> 
<body> 
  <script> 
    var quoteData =  ${jsonString} 
  </script> 
</body> 
</html> 
    `) 
});

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Вставка видео на сайт с “custom button”

164

HTML

IE11 input type=“file” accept=“” всегда добавляются HTML и Images

В IE11, какой бы тип файла не был выбран в accept, всегда добавляются две дополнительные категории: "Html" и "Images"Например, если требуется кастомный...

157

HTML