Как в JavaScript получить данные из файла json или html

В этой заметке описано, как при помощи 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-код, который необходимо вставить в элемент.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *