I am using Express JS and Hogan JS template engine. I know hogan is logic less template but I need to execute a for loop in view code to generate table fields.
I have done lots of googling but I did not found any solution. I know how to do if-else in Hogan JS.
I read all the documentation in Hogan JS and Mustache JS websites.
I am getting values in the json format.
[
{
"email": "abc#example.com",
"name": "abc",
"date": "05/01/2015"
},
{
"email": "xyz#example.com",
"name": "xyz",
"date": "05/01/2015"
}
]
this is sample json, there may be any amount of data. To show this data in table in view I need to iterate a loop.
So I need a code for for-loop.
You can certainly do that.
Assign the data into a nested JSON object and them compile template for parent key.
var data = {"list" : [
{
"email": "abc#example.com",
"name": "abc",
"date": "05/01/2015"
},
{
"email": "xyz#example.com",
"name": "xyz",
"date": "05/01/2015"
}
]};
var template = Hogan.compile("{{#list}} Your name is {{name}} and email is {{email}} <br/>{{/list}}");
var output = template.render(data);
Here is the working example
Related
I don't have any backend logic and database. For data I just use a json file of humans.
Here it is:
[
{
"id": 0,
"name": "Andrew"
},
{
"id": 1,
"name": "Daniel"
},
{
"id": 2,
"name": "John"
},
{
"id": 3,
"name": "Frank"
}
]
Can I somehow stream this JSON file in React (i.e. on client side) to, for example, retrieve only the first two notes and return the array? I tried FS module but it only works for SSR. Or there's no way I can runtime stream it getting desired data? I just don't wanna return the whole array since I'm trying to imitate a backend database
Basically, I have a really large JSON file I need to parse, and while searching, I came across this answer.
The only problem is I don't know how to format my JSON array into a single object per line. Is there a straightforward Javascript/Ubuntu way to do this? (I've used jq in the past and it's pretty good for minifying json files, for example)
My JSON file looks something like this
[
{
"country":"monrovia",
"street" :"grove street",
"where" : "home"
},
{
"country": "uk",
"street": "diagon alley",
"where": "mystery"
},
{
...
}
]
But I need it to look like this
[{"country":"monrovia", "street": "grove street", "where": "home" },
{"country": "uk", "street": "diagon alley", "where": "mystery happens"},
{...}]
What you can do is parse the json array by using the JSON.stringify Method like so
// This can be the array of json
var obj = {
"name": "John Doe",
"age": 29,
"location": "Denver Colorado",
};
// stringify the json
var result = JSON.stringify(obj);
// see the output
console.log(result);
jq to the rescue once again! Here is what I needed.
And it's apparently referred to as JSONL.
An even better option is 'new-line delimited JSON' (ndjson). The Javascript implementation of the same (with streams!) is here
{Module_JSON} allow you to parse json files in Business Catalyst, however, there is NO documentation, or functionality to utilize the data using liquid. I tried talking to support, but they said that my questions were out of the support boundaries.
Here is what I would like to do: I would like to call specific items within an array via Json.
{
"description": "List of a collection of Doughnuts",
"doughnuts": [
{
"id": "5001",
"type": "Plain",
"price": 0
},
{
"id": "5002",
"type": "Glazed",
"price": 1
},
{
"id": "5005",
"type": "Sugar",
"price": 1
},
{
"id": "5007",
"type": "Powdered Sugar",
"price": 1.25
},
{
"id": "5006",
"type": "Chocolate with Sprinkles",
"price": 1.5
},
{
"id": "5003",
"type": "Chocolate",
"price": 2
},
{
"id": "5004",
"type": "Maple Syrup",
"price": 2.25
}
]
}
To parse the JSON you have to do this:
{module_json,json="/mrbean.json" template="/module_json/template.tpl"}
Let's say I would like to parse the plain donut, I would try and put the parameter right in the callback function like this:
{module_json,json="/mrbean.json" type="plain" template="/module_json/template.tpl"}
Nothing happens. Does anyone know how I can do this? Otherwise, I don't see why the Module_Json tag should be used. Should I just use Ajax instead?
There is a rather clear example here http://docs.businesscatalyst.com/Developers/liquid/render-your-own-JSON-files-using-module_json
If you need any help please post here.
Please include some more explanation in your question.
Do you have a template created?
Please post your template so I can check your syntax.
If your data rendered with json looks like this {
"description":"List of a collection of Products",
"products":[
{
"id":"SLI123",
"type":"Toy",
"price":20
},
{
"id":"SLI124",
"type":"Shirt",
"price":40
},
then you liquid rendering can be something like this
<div>{{this.description}}</div>
<ul> {%; for products in this.products %}
<li id={{product.id}} type={{product.type}}>
{%; if product.price == 20 %}
Price: Only ${{product.price}}!!!
{%; else %}
Price: ${{product.price}}
{%; endif %}
</li>
{%; endfor %}
</ul>
The tag makes no assumptions about how the json is structured. This allows it to load any valid json, but puts the onus on the caller to handle the data within.
In this case, you could use the collection parameter to assign it to a variable, like so:
{module_json,json="/mrbean.json" collection="food"}
{{ food.doughnuts[0].type }} <!-- Plain -->
(The same data is available within the named file, when using the template parameter.)
Otherwise, I don't see why the Module_Json tag should be used. Should I just use Ajax instead?
If it better suits your application to have the user make another round-trip after page load to see the data, then use ajax / fetch.
If the app should load with the data as quickly as possible, then module_json can insert the data into the first response.
I want to convert the data from an Excel file to a JSON file. However, I'm not sure about the design of my JSON code (i.e. is it organized in a proper way in order to process it easily?)
I will use this JSON file with D3.js.
This a small part of my Excel file:
I'd like to convert this data into a JSON file in order to use it with D3.js. This is what I have so far:
So my question is: is this a good design (way) for organizing the data in order to use it with D3.js?
This is a sample output:
Thanks in advance!
This is a somewhat subjective question, but from my experience, there is a better way:
Since you're working in d3, you're probably doing something like this:
d3.selectAll('div')
.data(entities)
.enter()
.append('div')
...
So you want entities to be an array. The question is what are your entities? Is there a view where entities are all the countries in the world? Is there a view where entities are all the countries plus all the regions plus the whole world? Or, are all the views going to be simply all the countries in a selected region, not including the region itself?
The unless the JSON structure you're proposing matches the combinations of entities that you plan to display, your code will have to do a bunch of concat'ing and/or filtering of arrays in order to get a single entities array that you can bind to. Maybe that's ok, but it will create some unnecessary amount of coupling between your code and the structure of the data.
From my experience, it turns out that the most flexible way (and also probably the simplest in terms of coding) is to keep the hierarchy flat, like it is in the excel file. So, instead of encoding regions into the hierarchy, just have them in a single, flat array like so:
{
"immigration": [
{
"name": "All Countries"
"values: [
{ "Year": ..., "value": ... },
{ "Year": ..., "value": ... },
...
]
},
{
"name": "Africa"
"values: [
{ "Year": ..., "value": ... },
{ "Year": ..., "value": ... },
...
]
},
{
"name": "Eastern Africa"
"continent": "Africa"
"values": [
{ "Year": ..., "value": ... },
{ "Year": ..., "value": ... },
...
]
},
{
"name": "Burundi"
"continent": "Africa"
"region": "East Africa"
"values": [
{ "Year": ..., "value": ... },
{ "Year": ..., "value": ... },
...
]
},
{
"name": "Djibouti"
"continent": "Africa"
"region": "East Africa"
"values": [
{ "Year": ..., "value": ... },
{ "Year": ..., "value": ... },
...
]
},
...
]
}
Note that even though the array is flat, there is still a hierarchy here -- the region and sub-region properties.
You'll have to do a bit of filtering to extract just the countries/regions you want to show. But that's simpler than traversing the hierarchy you're proposing:
var africanEntities = data.immigration.filter(function(country) {
return country.continent == "Africa";
}); // Includes the region "East Africa"
var justCountries = data.immigration.filter(function(country) {
return country.continent != null && country.region != null;
});
Also, d3 has the awesome d3.nest(), which lets you turn this flat data into hierarchical one with little effort:
var countriesByContinent = d3.nest()
.key(function(d) { return d.continent; })
.map(data.immigration);
var africanEntities = countriesByContinent['Africa'];
Hope that helps....
We have a UI where user makes selection & click on process button. On click on button, system calls a method written in JavaScript and it returns a object which looks like this.
{
"users": [{
"id": 1,
"name": "Ed",
"orders": [{
"id": 10,
"total": 10.76,
"status": "invoiced"
},{
"id": 11,
"total": 13.45,
"status": "shipped"
}]
}]
}
What I want:
I want to pass this JavaScript object to a method which should generate a text producing output like this:
{
"users": [{
"id": 1,
"name": "Ed",
"orders": [{
"id": 10,
"total": 10.76,
"status": "invoiced"
},{
"id": 11,
"total": 13.45,
"status": "shipped"
}]
}]
}
I should be able to pass a real JavaScript object to this method and by going over the object it should produce a text showcasing the structure of this object.
In .net world we can do this by using reflection and then return the string. We also have option of serializing the object into XML or JSON or any other format.
Is it possible with JavaScript.
Why I want to do this.
I have written 50 test cases which expects this object as input. I can take output of the method and pass it to any testcase.
Thank you
You should add your stringified object to some <pre> and <code> tags to get the best output.
<div><pre><code class="text"></code></pre></div>
And then use the JSON.stringify spaces parameter:
$('.text').html(JSON.stringify(obj, null, 2));
You can also use tabs if you want.
$('.text').html(JSON.stringify(obj, null, '\t'));
Fiddle
Use JSON.stringify() method. It does exactly what you need.