Creating an extensive amount of HTML content through the use of JSON

Question

Creating an extensive amount of HTML content through the use of JSON

When I request data from my API, it returns JSON objects which then populate numerous divs with content. However, I find myself continuously using concatenation to insert object properties. Is there a more efficient method for achieving this?

$.each(JSON, function(key, value) { 
  var content = display_mention(value);
  $("#mentions_container").append(content);
    });

    function display_mention(mention) {
       //this str will be much more complex and use lots of concatenation
   var str = "<div data-id='" + mention.id +"'>'" + mention.texto + "'</div></br>";
   return str;
    }

javascript templates

Answer 1

Answer №1

Why keep struggling when there is a more efficient approach known as client-side templating.

Explore mustache.js at https://github.com/janl/mustache.js or try out handlebars.js here: http://handlebarsjs.com/

Answer 2

Why keep struggling when there is a more efficient approach known as client-side templating.

Explore mustache.js at https://github.com/janl/mustache.js or try out handlebars.js here: http://handlebarsjs.com/

Answer 3

Answer №2

I find using this method for templating quite efficient:

String.prototype.template = function(obj) {
    return this.replace(/{([^{}]*)}/g,
        function(match, key) {
            var result = obj[key];
            if (!obj[key]) return "";
            return typeof result === 'string' || typeof result === 'number' ? result : match;
        }
    );
};

var info = {
  title: 'JavaScript Handbook',
  type: 'Ebook',
  category: 'programming',
  published_on: '10.15.2021'
}

var output = '<tr><td>{title}</td><td>{type}</td><td><a href="{category}">{category}</a></td><td>{published_on}</td></tr>'.template(info);

This method is straightforward and helps maintain code cleanliness.

For more robust solutions, I recommend exploring options like jQuery templates (especially if you are already using jQuery), or browsing through alternatives listed here:

Answer 4

I find using this method for templating quite efficient:

String.prototype.template = function(obj) {
    return this.replace(/{([^{}]*)}/g,
        function(match, key) {
            var result = obj[key];
            if (!obj[key]) return "";
            return typeof result === 'string' || typeof result === 'number' ? result : match;
        }
    );
};

var info = {
  title: 'JavaScript Handbook',
  type: 'Ebook',
  category: 'programming',
  published_on: '10.15.2021'
}

var output = '<tr><td>{title}</td><td>{type}</td><td><a href="{category}">{category}</a></td><td>{published_on}</td></tr>'.template(info);

This method is straightforward and helps maintain code cleanliness.

For more robust solutions, I recommend exploring options like jQuery templates (especially if you are already using jQuery), or browsing through alternatives listed here:

Answer 5

Answer №3

If you don't require a larger engine, you have the option to create a straightforward template function.

function generateTemplate(str, data) {
    return str.replace(/\{([a-z]+)\}/g, function(match, key) {
        return data[key];
    });
}

To use it, simply pass an object as the context:

generateTemplate("<div class='{className}'> {content}</div><br/>", sampleData);

Answer 6

If you don't require a larger engine, you have the option to create a straightforward template function.

function generateTemplate(str, data) {
    return str.replace(/\{([a-z]+)\}/g, function(match, key) {
        return data[key];
    });
}

To use it, simply pass an object as the context:

generateTemplate("<div class='{className}'> {content}</div><br/>", sampleData);

Creating an extensive amount of HTML content through the use of JSON

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to determine if the clipboard is accessible in Firefox?

When checking for errors with console.log(errors) in Ajax, it may return undefined due to server-side

Unable to adjust metadata titles while utilizing the 'use client' function in Next.js

Bootstrap: when divs cover the jumbotron

Tips for moving text within a Canvas using a button to trigger the function that displays the text in a Javascript environment

Is there a way to halt the polling process for the specific API handling the background task?

Click the link to capture the ID and store it in a variable

The issue with Node.js arises when attempting to access data within a nested fs.readFile call

Is it possible to retrieve text from various iframes using the rangy library?

What steps can be taken to integrate JavaScript into an ASP.NET control?

Select a date from the JQuery calendar, verify it against the database, and display any events scheduled for that date

Eliminate the prior click action from the document object model

What causes Gun.js to generate duplicate messages within a ReactJs environment?

Why is the "module" field used in the package.json file?

Sending data from a dynamically created PHP table to a modal

Is it possible to download multiple files using a single ajax call upon success of a click function?

Trouble arising from PHP's encoded array

Tips for invoking a particular function when a row in a Kendo grid is clicked

Utilize puppeteer by passing a function inside page.waitForFunction() for efficient automation processes

JavaScript does not support the enumeration of programs