В этой заметке описано, как при помощи JavaScript можно получить данные из файла json или html и вставить их в необходимый элемент html.
function urlToElem(url, elem) {
fetch(url)
.then(response => {
if (response.ok) return response.json()
else throw response
})
.then(data => {
elem.innerHTML = data.name
// в строке выше вместо name вставьте
// необходимый ключ из своего файла json
})
.catch(error => {
elem.innerHTML = 'Что-то пошло не так'
console.error(error)
})
}
urlToElem('https://sample.com/sample.json', document.getElementById('sample'))
В последней строке примера замените https://sample.com/sample.json на url необходимого вам файла json, а селектор document.getElementById('sample') на селектор элемента, в который вы хотите вставить данные из файла json.
Чтобы получить данные не из json-файла, а из html-файла необходимо немного изменить код следующим образом:
function urlToElem(url, elem) {
fetch(url)
.then(response => {
if (response.ok) return response.text()
else throw response
})
.then(html => {
elem.innerHTML = html
})
.catch(error => {
elem.innerHTML = 'Что-то пошло не так'
console.error(error)
})
}
urlToElem('https://sample.com/sample.html', document.getElementById('sample'))
В вышеприведенном примере файл sample.html НЕ должен содержать тэгов html, head, body, а только тот html-код, который необходимо вставить в элемент.
