I am using the following code to dynamically add items to a page. I have each component as an object then I call each individual one with a For-in loop. My question is, how can I convert my data to JSON, and then import it into my JS file to use?

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);  
};