Mastering advanced String templating using loops and control statements in Javascript

Question

Mastering advanced String templating using loops and control statements in Javascript

During runtime, I receive an array similar to the example below:

var colors = ['red', 'green', 'blue'];

I then need to create a JSON String that looks like this:

{
    "color" : {
        "name" : "foo",
        "properties" : {
            ...
        }
    },
    "green" : {
        "name" : "foo",
        "properties" : {
            ...
        }
    },
    "blue" : {
        "name" : "foo",
        "properties" : {
            ...
        }
    }
}

Are there any String templating frameworks available that support loops and control statements for constructing a JSON String in the specified format?

javascript npm

Answer 1

Answer №1

Fit.UIs has a user-friendly templating engine:

You have the option to load HTML content either directly embedded or from an external HTML file. For example:

var t = new Fit.Template(true);

// Load embedded HTML
tpl.LoadHtml(`
    <h1>{[MyHeadline]}</h1><br>
    <p>{[Description]}</p>
    <ul>
        <!-- LIST MyItems -->
            <li>{[ItemTitle]}</li>
        <!-- /LIST MyItems -->
    </ul>
`);
// Load HTML from external HTML file
t.LoadUrl("view.html", function(sender)
{
    // Template is ready to be populated
    t.Content.MyHeadline = "Welcome";
    t.Content.Description = "This is a test..";

    for (var i = 1 ; i <= 5 ; i++)
    {
        var item = t.Content.MyItems.AddItem();
        item.ItemTitle = "Item " + i;
    }

    t.Update();
});

t.Render(document.body);

Of course, you will need to populate your JSON object manually, but this can be easily done on top of Fit.Template.

If you prefer using NPM packages with Typings support for intellisense, check out the package available here:

https://www.npmjs.com/package/fit-ui

Answer 2

Fit.UIs has a user-friendly templating engine:

You have the option to load HTML content either directly embedded or from an external HTML file. For example:

var t = new Fit.Template(true);

// Load embedded HTML
tpl.LoadHtml(`
    <h1>{[MyHeadline]}</h1><br>
    <p>{[Description]}</p>
    <ul>
        <!-- LIST MyItems -->
            <li>{[ItemTitle]}</li>
        <!-- /LIST MyItems -->
    </ul>
`);
// Load HTML from external HTML file
t.LoadUrl("view.html", function(sender)
{
    // Template is ready to be populated
    t.Content.MyHeadline = "Welcome";
    t.Content.Description = "This is a test..";

    for (var i = 1 ; i <= 5 ; i++)
    {
        var item = t.Content.MyItems.AddItem();
        item.ItemTitle = "Item " + i;
    }

    t.Update();
});

t.Render(document.body);

Of course, you will need to populate your JSON object manually, but this can be easily done on top of Fit.Template.

If you prefer using NPM packages with Typings support for intellisense, check out the package available here:

https://www.npmjs.com/package/fit-ui

Answer 3

Answer №2

If you're looking for a versatile solution, consider giving the Nunjucks package a try. It offers support for both JavaScript and npm libraries. Declare your template named 'colors.template' like this:

{
    {% for hue in colors %}
    "{{ hue }}"  : {
      hexCode : "#CCC"
     }
    {% else %}
    {% endfor %}
}

To parse the JSON template, use the following code snippet:

var nunjucks = require('nunjucks');
nunjucks.configure({ autoescape: true });
var result = nunjucks.render('colors.template', {colors : ['red', 'green', 'blue'] });

Answer 4

If you're looking for a versatile solution, consider giving the Nunjucks package a try. It offers support for both JavaScript and npm libraries. Declare your template named 'colors.template' like this:

{
    {% for hue in colors %}
    "{{ hue }}"  : {
      hexCode : "#CCC"
     }
    {% else %}
    {% endfor %}
}

To parse the JSON template, use the following code snippet:

var nunjucks = require('nunjucks');
nunjucks.configure({ autoescape: true });
var result = nunjucks.render('colors.template', {colors : ['red', 'green', 'blue'] });

Answer 5

Answer №3

Using vanilla JavaScript:

function convertArrayToJSON(array, json) {
  var strJson = JSON.stringify(json);
  var result = "{";
  for(var i = 0; i < array.length; i++) {
    var element = array[i];
    result += '"' +element +'" : ' +strJson +", ";
  }
  return JSON.parse(result.slice(0, -2) +"}");
}

var fruits = ["apple", "banana", "orange"]; // Fruits array
var details = { // Input JSON object
  "name" : "bar",
  "info" : {
    "size": "large"
  }
}

console.log(convertArrayToJSON(fruits, details)); // Resulting JSON object

http://jsfiddle.net/abcd1234/5/

Answer 6

Using vanilla JavaScript:

function convertArrayToJSON(array, json) {
  var strJson = JSON.stringify(json);
  var result = "{";
  for(var i = 0; i < array.length; i++) {
    var element = array[i];
    result += '"' +element +'" : ' +strJson +", ";
  }
  return JSON.parse(result.slice(0, -2) +"}");
}

var fruits = ["apple", "banana", "orange"]; // Fruits array
var details = { // Input JSON object
  "name" : "bar",
  "info" : {
    "size": "large"
  }
}

console.log(convertArrayToJSON(fruits, details)); // Resulting JSON object

http://jsfiddle.net/abcd1234/5/

Mastering advanced String templating using loops and control statements in Javascript

Answer №1

Answer №2

Answer №3

Similar questions

Oops! There was an error: Unable to find a solution for all the parameters needed by CountdownComponent: (?)

External CSS File causing improper sizing of canvas image

Manipulating a textarea in jQuery by inserting a string and selecting a specific portion of it

The destination path specified in npm copyfiles is not accurate

The button fails to log any text to the developer console

What is the best way to address background-image overflow on a webpage?

Efficiently managing routes by segmenting them into distinct files

What makes componentDidMount the ideal location to initiate AJAX requests?

Updating a database with a loop of React Material UI toggle switches

Ways to ensure that the form data stays consistent and visible to the user continuously

A Guide to Adding an NPM Package to a Lerna and Yarn Workspaces Repository

The JSON.stringify() function helps to convert data into a JSON-formatted string, avoiding any potential "c

Developing a React application is encountering issues with displaying messages that suggest difficulties in resolving the dependency tree and addressing conflicts within the upstream dependencies

Is it advisable to implement the modular pattern when creating a Node.js module?

Encountering TS2304 error messages such as "Cannot find name 'File'" or "Cannot find name 'ReadableStream'" while executing the "npm run tsc" command

Fetching Information From Database Using PHP

Is there a tool available that enables the utilization of local NPM dependencies within the PATH environment variable?

Choosing an element from an array in JavaScript that meets a certain criteria

error: unrecognized command (npm)

Uninstall all packages that are no longer listed in the package.json file using Npm