edo4611

Держи
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;

Вместо 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);