Question 219885 in Html Question posted in
Some basic documentation can be found here.

Generate html from a json file with a premade structure in github pages

i have following template for each entry on my website

        <div class="image-container">
            <img src="images/placeholder.png" alt="Image N">
        </div>
        <div class="entry-content">
            <div class="entry-title">EntryName</div>
            <div class="entry-rating">Rating: X</div>
            <div class="entry-comment">Comment: Lorem ipsum</div>
        </div>
    </div>

and i want it to automatically fill each image/title/rating/comment from a JSON file.
I would use angular and its for loop to do it but i had problems setting it up on github pages (aswell as nested python scripts).

is there a way to make it work with JS? The entries would be up to 200 entries long

Tags:

2

Answers


  1. 0

    There are probably some complicated ways to do this, and possibly some libraries you would use, but just a simple string template with some tokens to replace works pretty well for something like this.

    See the example below.

    const template = `<div class="image-container">
        <img src="{{imgPath}}" alt="{{imgAlt}}">
    </div>
    <div class="entry-content">
        <div class="entry-title">{{entryTitle}}</div>
        <div class="entry-rating">Rating: {{entryRating}}</div>
        <div class="entry-comment">Comment: {{entryComment}}</div>
    </div>
</div>`;

const data = [
  {
    imgPath:'https://picsum.photos/id/24/200/200',
    imgAlt:'a picture of a book',
    entryTitle:'BOOK',
    entryRating:'4',
    entryComment:'Nice'
  },
  {
    imgPath:'https://picsum.photos/id/23/200/200',
    imgAlt:'an image of forks',
    entryTitle:'FORKS',
    entryRating:'3',
    entryComment:'Food!'
  },
  {
    imgPath:'https://picsum.photos/id/2/200/200',
    imgAlt:'a laptop at a coffee shop',
    entryTitle:'LAPTOP',
    entryRating:'5',
    entryComment:'I like coffee'
  },
];


let htmlString = '';
data.forEach(d => {
  let tmplCopy = template;
  Object.keys(d).forEach(k => {
    const pattern = new RegExp('{{' + k + '}}', 'g');
    tmplCopy = tmplCopy.replace(pattern, d[k]);
  });
  
  htmlString += tmplCopy;
});

document.getElementById('output-container').innerHTML = htmlString;
    <div id="output-container"></div>
    Login or Signup to reply.
  2. 0

    On github pages I think that you will have to use pure css.
    It would look like this :

    let page = document.querySelector("#page");

let entries = [
    { title: "Title1", rating: "Rating1", comment: "comment1" },
    { title: "Title2", rating: "Rating2", comment: "comment2" },
    // ...
];
//You will have to get the entries array from your json file using JSON.parse()

entries.forEach((entry) => {
    page.innerHTML += `<div class="entry-content">
            <div class="entry-title">${entry.title}</div>
            <div class="entry-rating">Rating: ${entry.rating}</div>
            <div class="entry-comment">Comment: ${entry.comment}</div>
        </div>`;
});
    <div id="page"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search