Как вывести данные из json на страницу?

Question

[edo4611]

Есть html страница с тегами h1, h2 и p. И есть файл main.json типа:

{
	"title": "sun",
	"subtitle": "earth",
	"r": "mars"
}

Как сделать так, чтобы при загрузке дом дерева (событие DOMContentLoaded) данные из json оказались на местах тегов h1, h2 и p соответственно?

Comments

[Илья]

main.json открывается с локального пк?

Answer 1

[Big_Trouble]

Вместо main json создаете файл main.js и экспортируете по умолчанию (default) объект с полями title, subtitle.

// main.js

export default {
    title: "sun",
    subtitle: "earth",
    r: "mars"
}

<h1></h1>
<h2></h2>
<p></p>

//index.js
import data from './main.js';

// Пишем функцию, чтобы не менять каждый элемент вручную
const changeHtmlText = (querySelector, data) => {
    const $element = document.querySelector(querySelector);
    
    $element.textContent = data
}
changeHtmlText("h1", data.title);
changeHtmlText("h2", data.subtitle);
changeHtmlText("p", data.r);

Answer 2

[DedIsDead]

Держи
jsons\indexes.json:

{
    "title": "sun",
    "subtitle": "earth",
    "r": "mars"
}

<h1 id="title"></h1>
<h2 id="subtitle"></h2
<p id="r"></p>

scripts\script.js:

let data = loadJSON('jsons\indexes.json');
document.getElementById('title').innerHTML = data.title;
document.getElementById('subtitle').innerHTML = data.subtitle;
document.getElementById('r').innerHTML = data.r;