How to dynamically add items and attributes to HTML with javascript or jQuery referencing items from a csv or json file

Question

I am trying to make the following bit of code easier to maintain. I am not a web developer so bear with me. I think the following approach is appropriate.

I would like to dynamically add content and attributes to an html file using either javascript or jQuery. The items could reside in a .csv or .json (or something else?) file.

Given content like this



    
        
            
                
            
            
                Title-1
                
                    This is a description for title-1 content.
                
                
                    
                
                
                    Last updated February 2, 2018
                
            
        
    

    
        
            
                
            
            
                Title-2
                
                    Here is a long description for title-2 content.
                
                
                    
                
                
                    Last updated February 14, 2018

I think we could abstract the details into something like this (.csv)

item-id,title,description,categories,address,image,image-alt,update
1,Title-1,This is a description for title-1 content.,cat-1,address-1.html,image-1.jpg,img-1-alt,2018-02-09
2,Title-2,Here is a long description for title-2 content.,"cat-2, cat-2",address-2.html,image-2.jpg,img-2-alt,2018-02-14

What's a nice approach of attack for using `javascript` or `jQuery` to add this content from the `.csv` or `.json` file?

A few concerns:

The headers of the .csv will not match verbatim (e.g.
aligns with the .csv header of description)
There could be embedded comma-separated items (e.g. item 2 has categories cat-2, cat-3 so it gets quotes " in the .csv -- maybe .json would better (?) or perhaps its a non-issue)
If possible can we reuse the date item for both data-date= and the final piece of text which converts the date into Last updated month-name-long, dd, yyyy instead of yyyy-mm-dd.

Some attributes are partial references (e.g. the src for an image is just the final part of the path; stated as image-1.jpg in the .csv not ./images/image-jpg).

To hopefully help make this feel less complicated, here's a picture with the highlighted elements that could be "referenced" from the .csv file.

To me this feels like:

Read in the .csv file.
For each item in the .csv file, append objects to $(".filtr-container") with the shell layout...

But I'm lost when it comes to the particulars or if that's an appropriate approach.

Randy Casburn · Accepted Answer

You seem to be searching for template parsing. You can find many libraries that will ease this burden. In its simplest form, template parses carry out the steps in the following code. If you don't need the flexibility, power, features, etc. from a template parser library or full framework, you should consider not including the thousands of lines of code if all you want to accomplish is what is shown below.

Since you mentioned both JSON and CSV I've included the code to parse both. I'll leave the AJAX and date formatting magic to you. I don't think I populate the ID either, but this shows that more data than template attributes will work fine.

let template = document.getElementById('card-template').innerHTML;
let container = document.querySelector('.filtr-container');

// Do some ajax magic to get csv file
let csv = `item-id,title,description,categories,address,image,image-alt,update
1,Title-1,This is a description for title-1 content.,cat-1,address-1.html,https://via.placeholder.com/75,img-1-alt,2018-02-09
2,Title-2,Here is a long description for title-2 content.,cat-2 cat-2,address-2.html,https://via.placeholder.com/75,img-2-alt,2018-02-14`;

let csvLines = csv.split("
");
let csvHeaders = csvLines.shift().split(',');
csvLines.forEach(line => {
  let parsed = template;
  let props = line.split(',');
  props.forEach((prop, idx) => {
    parsed = parsed.replace('{{' + csvHeaders[idx] + '}}', props[idx]);
  });
  container.innerHTML = container.innerHTML + parsed;
});

let json = `[{
  "item-id": "1",
  "title": "Title-1",
  "description": "This is a description for title-1 content.",
  "categories": "cat-1",
  "address": "address-1.html",
  "image": "https://via.placeholder.com/75",
  "image-alt": "img-1-alt",
  "update": "2018-02-09"
}, {
  "item-id": "2",
  "title": "Title-2",
  "description": "Here is a long description for title-2 content.",
  "categories": "cat-2 cat-2",
  "address": "address-2.html",
  "image": "https://via.placeholder.com/75",
  "image-alt": "img-2-alt",
  "update": "2018-02-14"
}]`;

let data = JSON.parse(json);
data.forEach(col => {
  let jParsed = template;
  for (prop in col) {
    jParsed = jParsed.replace('{{' + prop + '}}', col[prop]);
  }
  container.innerHTML = container.innerHTML + jParsed;
});

How to dynamically add items and attributes to HTML with javascript or jQuery referencing items from a csv or json file

Given content like this

I think we could abstract the details into something like this (.csv)

What's a nice approach of attack for using `javascript` or `jQuery` to add this content from the `.csv` or `.json` file?

Answers (2)

Related Questions