Estoy usando el siguiente código para agregar dinámicamente elementos a una página. Tengo cada componente como un objeto y luego llamo a cada uno de ellos con un bucle For-in. Mi pregunta es, ¿cómo puedo convertir mis datos a JSON y luego importarlos a mi archivo JS para usarlos?
const pageObjects = { objectComponent1 : { provideTitle: "Title", provideId: "title", provideDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Id aliquet risus feugiat in. Eget velit aliquet sagittis id consectetur purus. Non consectetur a erat nam at lectus urna duis. Convallis aenean et tortor at risus viverra adipiscing at. ", provideHtml: `<p class="test">This is a pragraph element.</p>`, }, objectComponent2: { provideTitle: "Title", provideId: "title", provideDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Id aliquet risus feugiat in. Eget velit aliquet sagittis id consectetur purus. Non consectetur a erat nam at lectus urna duis. Convallis aenean et tortor at risus viverra adipiscing at.", provideHtml: `<p class="test">This is a pragraph element.</p>`, }, }; const docsContent = document.querySelector(".docs-content"); for (const singleObject in pageObjects) { // add title let objectTitle = document.createElement("h2"); objectTitle.setAttribute("id", pageObjects[singleObject].provideId); objectTitle.innerHTML = pageObjects[singleObject].provideTitle; docsContent.append(objectTitle); // add description let objectDesc = document.createElement("p"); objectDesc.innerHTML = pageObjects[singleObject].provideDesc; docsContent.append(objectDesc); // add example let objectExample = document.createElement("div"); objectExample.classList.add("docs-example"); objectExample.innerHTML = pageObjects[singleObject].provideHtml; docsContent.append(objectExample); // add provide code let objectCode = document.createElement("div"); objectCode.classList.add("docs-code"); docsContent.append(objectCode); let pre = document.createElement("pre"); objectCode.append(pre); let code = document.createElement("code"); code.innerHTML = pageObjects[singleObject].provideHtml; pre.append(code); };