Transforming JSON data into an HTML template

Question

Transforming JSON data into an HTML template

Incorporating Angular 6 in my project, I have come up with the following templates:

Header, Left panel, Body part, Footer
Header, Left panel, Body part, Right panel, Footer
Header, Body part, Footer

Considering the numerous templates, I am aiming to transition from hardcoding HTML parts to utilizing JSON for better organization.

The structure of the JSON file will be as follows:

{
   "horizontal": [
      {
         width: "20%",
         height: "100%"
      },
      {
         width: "80%",
         height: "100%",
         {
            "vertical": [
               {
                  width: "80%",
                  height: "60%"
               },
               {
                  width: "80%",
                  height: "40%"
               }
            ]
         }
      }
   ]
}

This JSON schema basically divides the page into a left panel (20% width) and main body section (80%), further dividing the body vertically into 60% top area and 40% bottom area.

Are there any methods available to convert this JSON structure into HTML?

html angular css

Answer 1

Answer №1

Although this inquiry may seem overly broad, as someone who specializes in back-end development, I have navigated through numerous concepts before reaching a solution. Therefore, I have chosen to share my insights through this response.

My aim here is to demonstrate how one can create something reusable and easy to maintain with minimal code using CSS instead of converting styles from JSON to HTML. By following a small style guide, you can efficiently manage multiple templates while optimizing performance.

Instead of transferring styles from JSON to HTML, leverage CSS for its intended purpose and optimize performance by managing various templates effectively. Here are some examples:

Sample 1 (with CSS notes)

html, body, .container {
  height: 100%;
  margin: 0;
}

.container, main {
  display: flex;           
  flex-direction: column;  
}

header, footer {           

}

.wrapper {                 
  flex: 1;                
  display: flex;
}
 
aside {                   
  flex-basis: 20%;         
}

main {                     
  flex: 1;        
}

section {                  
  flex-basis: 60%;      
}

section + section {       
  flex-basis: 40%;
}


/* for demo purpose */
header, footer, aside, section {
  border: 1px dotted gray;
}

<div class="container">
  <header>Header</header>
  <div class="wrapper">
    <aside>Aside</aside>
    <main>
      <section>Section</section>
      <section>Section</section>
    </main>
  </div>
  <footer>Footer</footer>
</div>

Sample 2

html, body, .container {
  height: 100%;
  margin: 0;
}

.container, main {
  display: flex;
  flex-direction: column;
}

header, footer {
}

.wrapper {                 
  flex: 1;
  display: flex;
}
 
aside {
  flex-basis: 20%;
}

main {
  flex: 1;
}

section {
  flex-basis: 60%;
}

section + section {
  flex-basis: 40%;
}


header, footer, aside, section {
  border: 1px dotted gray;
}

<div class="container">
  <header>Header</header>
  <div class="wrapper">
    <aside>Aside</aside>
    <main>
      <section>Section</section>
      <section>Section</section>
    </main>
    <aside>Aside</aside>
  </div>
  <footer>Footer</footer>
</div>

Sample 3

html, body, .container {
  height: 100%;
  margin: 0;
}

.container, main {
  display: flex;
  flex-direction: column;
}

header, footer {
}

.wrapper {                 
  flex: 1;
  display: flex;
}
 
aside {
  flex-basis: 20%;
}

main {
  flex: 1;
}

section {
  flex-basis: 60%;
}

section + section {
  flex-basis: 40%;
}


header, footer, aside, section {
  border: 1px dotted gray;
}

<div class="container">
  <header>Header</header>
  <main>
    <section>Section</section>
    <section>Section</section>
  </main>
  <footer>Footer</footer>
</div>

For a specific template, utilize different CSS approaches (only showcasing Samples 1 and 3 here, as Sample 2 mirrors the above design):

Sample 1

html, body, .container {
  height: 100%;
  margin: 0;
}

.container, main {
  display: flex;
  flex-direction: column;
}

header, footer {
}

.wrapper {                 
  flex: 1;
  display: flex;
}
 
aside {
  flex-basis: 20%;
}

main + aside {             
  display: none;
}

main {
  flex: 1;
}

section {
  flex-basis: 60%;
}

section + section {
  flex-basis: 40%;
}


/* for demo purpose */
header, footer, aside, section {
  border: 1px dotted gray;
}

<div class="container">
  <header>Header</header>
  <div class="wrapper">
    <aside>Aside</aside>
    <main>
      <section>Section</section>
      <section>Section</section>
    </main>
    <aside>Aside</aside>
  </div>
  <footer>Footer</footer>
</div>

Sample 3

html, body, .container {
  height: 100%;
  margin: 0;
}

.container, main {
  display: flex;
  flex-direction: column;
}

header, footer {
}

.wrapper {                 
  flex: 1;
  display: flex;
}
 
aside {
  display: none;
}

main {
  flex: 1;
}

section {
  flex-basis: 60%;
}

section + section {
  flex-basis: 40%;
}


header, footer, aside, section {
  border: 1px dotted gray;
}

<div class="container">
  <header>Header</header>
  <div class="wrapper">
    <aside>Aside</aside>
    <main>
      <section>Section</section>
      <section>Section</section>
    </main>
    <aside>Aside</aside>
  </div>
  <footer>Footer</footer>
</div>

Answer 2

Although this inquiry may seem overly broad, as someone who specializes in back-end development, I have navigated through numerous concepts before reaching a solution. Therefore, I have chosen to share my insights through this response.

My aim here is to demonstrate how one can create something reusable and easy to maintain with minimal code using CSS instead of converting styles from JSON to HTML. By following a small style guide, you can efficiently manage multiple templates while optimizing performance.

Instead of transferring styles from JSON to HTML, leverage CSS for its intended purpose and optimize performance by managing various templates effectively. Here are some examples:

Sample 1 (with CSS notes)

html, body, .container {
  height: 100%;
  margin: 0;
}

.container, main {
  display: flex;           
  flex-direction: column;  
}

header, footer {           

}

.wrapper {                 
  flex: 1;                
  display: flex;
}
 
aside {                   
  flex-basis: 20%;         
}

main {                     
  flex: 1;        
}

section {                  
  flex-basis: 60%;      
}

section + section {       
  flex-basis: 40%;
}


/* for demo purpose */
header, footer, aside, section {
  border: 1px dotted gray;
}

<div class="container">
  <header>Header</header>
  <div class="wrapper">
    <aside>Aside</aside>
    <main>
      <section>Section</section>
      <section>Section</section>
    </main>
  </div>
  <footer>Footer</footer>
</div>

Sample 2

html, body, .container {
  height: 100%;
  margin: 0;
}

.container, main {
  display: flex;
  flex-direction: column;
}

header, footer {
}

.wrapper {                 
  flex: 1;
  display: flex;
}
 
aside {
  flex-basis: 20%;
}

main {
  flex: 1;
}

section {
  flex-basis: 60%;
}

section + section {
  flex-basis: 40%;
}


header, footer, aside, section {
  border: 1px dotted gray;
}

<div class="container">
  <header>Header</header>
  <div class="wrapper">
    <aside>Aside</aside>
    <main>
      <section>Section</section>
      <section>Section</section>
    </main>
    <aside>Aside</aside>
  </div>
  <footer>Footer</footer>
</div>

Sample 3

html, body, .container {
  height: 100%;
  margin: 0;
}

.container, main {
  display: flex;
  flex-direction: column;
}

header, footer {
}

.wrapper {                 
  flex: 1;
  display: flex;
}
 
aside {
  flex-basis: 20%;
}

main {
  flex: 1;
}

section {
  flex-basis: 60%;
}

section + section {
  flex-basis: 40%;
}


header, footer, aside, section {
  border: 1px dotted gray;
}

<div class="container">
  <header>Header</header>
  <main>
    <section>Section</section>
    <section>Section</section>
  </main>
  <footer>Footer</footer>
</div>

For a specific template, utilize different CSS approaches (only showcasing Samples 1 and 3 here, as Sample 2 mirrors the above design):

Sample 1

html, body, .container {
  height: 100%;
  margin: 0;
}

.container, main {
  display: flex;
  flex-direction: column;
}

header, footer {
}

.wrapper {                 
  flex: 1;
  display: flex;
}
 
aside {
  flex-basis: 20%;
}

main + aside {             
  display: none;
}

main {
  flex: 1;
}

section {
  flex-basis: 60%;
}

section + section {
  flex-basis: 40%;
}


/* for demo purpose */
header, footer, aside, section {
  border: 1px dotted gray;
}

<div class="container">
  <header>Header</header>
  <div class="wrapper">
    <aside>Aside</aside>
    <main>
      <section>Section</section>
      <section>Section</section>
    </main>
    <aside>Aside</aside>
  </div>
  <footer>Footer</footer>
</div>

Sample 3

html, body, .container {
  height: 100%;
  margin: 0;
}

.container, main {
  display: flex;
  flex-direction: column;
}

header, footer {
}

.wrapper {                 
  flex: 1;
  display: flex;
}
 
aside {
  display: none;
}

main {
  flex: 1;
}

section {
  flex-basis: 60%;
}

section + section {
  flex-basis: 40%;
}


header, footer, aside, section {
  border: 1px dotted gray;
}

<div class="container">
  <header>Header</header>
  <div class="wrapper">
    <aside>Aside</aside>
    <main>
      <section>Section</section>
      <section>Section</section>
    </main>
    <aside>Aside</aside>
  </div>
  <footer>Footer</footer>
</div>

Transforming JSON data into an HTML template

Answer №1

Similar questions

Elements that allow for asynchronous data submission without requiring a traditional submit button

allowing absolutely positioned region to expand

Ways to animate elements while scrolling in React.js?

Trigger the callback function once the datatables DOM element has finished loading entirely

How to style a CSS list and center-align it

Expectation in Observable: Unable to provide data retrieval

As soon as I inserted the image, the text vanished into thin air

Build a home page in HTML with full width design

Setting predefined data in an HTML field from XML within the Odoo platform

"Utilizing Flask to efficiently manage a multitude of buttons and seamlessly update a

The 'Bfrip' button is missing from the DOM

Retrieving CSS file using admin-ajax.php in WordPress

Developing a timetable feature using PHP

Creating a visually appealing webpage by utilizing Bootstrap and HTML for the layout

Issue: StaticInjectorError(DynamicTestModule)[CityService -> Http]: Http provider not found

Welcome to Ng-Zorro, your destination for all things innovative and cutting

Position the div at the bottom of the page

BeautifulSoup - Struggling to retrieve tbody element

Is the detection change triggered when default TS/JS Data types methods are called within an HTML template?

Which characters are permissible for the id attribute to prevent the jQuery selector from throwing an exception?