What is the best way to save JSON data within HTML elements?

Question

What is the best way to save JSON data within HTML elements?

I want to enhance my FAQ by making it easily editable. Currently, the content can only be edited in the HTML file. I am looking to load all the information from a JSON file so that any changes or additions to questions and answers can be made directly in the JSON file. While I attempted to create a CRUD functionality for this purpose, it proved to be quite challenging for me. If anyone knows how to implement a CRUD system and is willing to explain it or provide a tutorial (where data is still loaded into HTML elements), I would greatly appreciate it.

On another note, I am trying to embed JSON objects in HTML elements. The <H2> tag will hold the category, while the question goes inside the <a></a> tags and the answer within <p></p> tags. Can someone guide me on the JavaScript code required for this task? My goal is to check the category and automatically populate all questions related to that category from the JSON file in their respective places. Despite multiple attempts and research efforts, I have been unable to find a solution. Thank you in advance for your help.

JSON:

{
  "question": [
    {
      "id": 1,
      "question": "Quest",
      "answer": "Ans",
      "category": "Cat"
    },
    {
      "id": 2,
      "question": "Quest2",
      "answer": "Ans2",
      "category": "Cat2"
    },
    {
      "id": 3,
      "question": "Quest2",
      "answer": "Ans2",
      "category": "Cat2"
    },
    {
      "id": 4,
      "question": "Quest2",
      "answer": "Ans2",
      "category": "Cat2"
    }
  ]
}

HTML:

<ul id="algemeen" class="cd-faq-group">
    <li class="cd-faq-title"><h2>General</h2></li>
    <li>
    <a class="cd-faq-trigger" href="#0">Question</a>
    <div class="cd-faq-content">
    <p>Answer</p>
    </div> 
    </li>

javascript json

Answer 1

Answer №1

It is recommended to avoid embedding JSON data directly into HTML elements. Instead, utilize AJAX to fetch the data, parse it, and dynamically generate the HTML structure using template literals.

function getJSON(callback) {
  const json = '{"question":[{"id":1,"question":"Quest","answer":"Ans","category":"Cat"},{"id":2,"question":"Quest2","answer":"Ans2","category":"Cat"},{"id":3,"question":"Quest3","answer":"Ans3","category":"Dog"},{"id":4,"question":"Quest24","answer":"Ans4","category":"Wolf"}]}';
  callback(json);
}

function sortByCategory(data) {
  return data.reduce((obj, c) => {
    const { category, ...rest } = c;
    obj[category] = obj[category] || [];
    obj[category].push(rest);
    return obj;
  }, {});
}

// Generates HTML for each question/answer pair
function buildQuestionHTML(arr) {
  
  // Iterate over the array of category objects
  return arr.map(el => {

    // Create HTML for the question/answer pair
    return `
      <li class="block">
        <a class="cd-faq-trigger" href="${el.id}">${el.question}</a>
        <div class="cd-faq-content">
          <p>${el.answer}</p>
        </div> 
      </li>
    `

  }).join('');
}

// Generates HTML for all categorised data
function buildPageHTML(data) {
 
  // Iterate over the categorised data
  return Object.keys(data).reduce((acc, c) => {
    
    // Get HTML for the question/answer pairs
    const questionHTML = buildQuestionHTML(data[c]);
    
    // Construct HTML for the category and
    // add the category name, and question/answer HTML
    const html = `
      <li class="cd-faq-title">
        <h2>${c}</h2>
      </li>
      ${questionHTML}
    `;
    acc.push(html);
    return acc;

  }, []).join('');
}

function displayQuestions() {
 
  // Fetch the data
  // Typically a server call would retrieve JSON data
  getJSON(function (json) {

    // Parse the retrieved data
    const questions = JSON.parse(json).question;
    
    // Sort data by category
    const categoryData = sortByCategory(questions);

    // Locate the element where compiled data should be inserted
    const root = document.getElementById('algemeen');

    // Build the HTML content
    const html = buildPageHTML(categoryData);

    // Append HTML to the root element
    root.insertAdjacentHTML('beforeend', html);
  });
}

// invoke displayQuestions function
displayQuestions();

ul {
  list-style-type: none;
}

.cd-faq-title {
  text-transform: uppercase;
}

.block {
  background-color: #efefef;
  padding: 0.3em;
}

<ul id="algemeen" class="cd-faq-group">
</ul>

Answer 2

It is recommended to avoid embedding JSON data directly into HTML elements. Instead, utilize AJAX to fetch the data, parse it, and dynamically generate the HTML structure using template literals.

function getJSON(callback) {
  const json = '{"question":[{"id":1,"question":"Quest","answer":"Ans","category":"Cat"},{"id":2,"question":"Quest2","answer":"Ans2","category":"Cat"},{"id":3,"question":"Quest3","answer":"Ans3","category":"Dog"},{"id":4,"question":"Quest24","answer":"Ans4","category":"Wolf"}]}';
  callback(json);
}

function sortByCategory(data) {
  return data.reduce((obj, c) => {
    const { category, ...rest } = c;
    obj[category] = obj[category] || [];
    obj[category].push(rest);
    return obj;
  }, {});
}

// Generates HTML for each question/answer pair
function buildQuestionHTML(arr) {
  
  // Iterate over the array of category objects
  return arr.map(el => {

    // Create HTML for the question/answer pair
    return `
      <li class="block">
        <a class="cd-faq-trigger" href="${el.id}">${el.question}</a>
        <div class="cd-faq-content">
          <p>${el.answer}</p>
        </div> 
      </li>
    `

  }).join('');
}

// Generates HTML for all categorised data
function buildPageHTML(data) {
 
  // Iterate over the categorised data
  return Object.keys(data).reduce((acc, c) => {
    
    // Get HTML for the question/answer pairs
    const questionHTML = buildQuestionHTML(data[c]);
    
    // Construct HTML for the category and
    // add the category name, and question/answer HTML
    const html = `
      <li class="cd-faq-title">
        <h2>${c}</h2>
      </li>
      ${questionHTML}
    `;
    acc.push(html);
    return acc;

  }, []).join('');
}

function displayQuestions() {
 
  // Fetch the data
  // Typically a server call would retrieve JSON data
  getJSON(function (json) {

    // Parse the retrieved data
    const questions = JSON.parse(json).question;
    
    // Sort data by category
    const categoryData = sortByCategory(questions);

    // Locate the element where compiled data should be inserted
    const root = document.getElementById('algemeen');

    // Build the HTML content
    const html = buildPageHTML(categoryData);

    // Append HTML to the root element
    root.insertAdjacentHTML('beforeend', html);
  });
}

// invoke displayQuestions function
displayQuestions();

ul {
  list-style-type: none;
}

.cd-faq-title {
  text-transform: uppercase;
}

.block {
  background-color: #efefef;
  padding: 0.3em;
}

<ul id="algemeen" class="cd-faq-group">
</ul>

What is the best way to save JSON data within HTML elements?

Answer №1

Similar questions

Absence of property persists despite the use of null coalescing and optional chaining

How to retrieve the value of an input field in Angular 2/Typescript without using ngModel

The view has no access to $scope but the controller does

Is it possible to utilize Ajax submit requests within a (function($){...}(jQuery)); block?

Looking for assistance in using JavaScript to determine the percentage of a DIV's width in pixels

Methods for delivering static resources on multiple routes in Express JS

How to Convert Python Lists into JavaScript?

What are some ways to restrict dynamic form submissions?

bing translator API: the variable text is translated with no content

Restore radio input functionality with a transparent method

Generating an order prior to payment being made by the customer

Notify the user with a message that our support is limited to Chrome, Firefox, and Edge browsers when utilizing Angular

Determining light sources for unique shapes using Three.js

What is the correct way to define a function parameter when using AngularJS Emit?

Retrieve the JSON data from an AJAX request

What is the best way to extract information from a Django database and save it in a JSON file on my personal computer

Node is currently posing a challenge for the installation of packages

Dynamic x-axis movement with interactive Google Line Chart functionality

Create object keys without relying on any ORM or database management systems like mongoose or mongodb

HTML code is not displayed within the ng-template