{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.
Related
I have set up json-server using a react app and I had a quick question about end points
this is some of my data:
{
"products": [
{
"name": "football",
"id": "SPO-001",
"category": "sport",
"price": "40",
"coupons": ["daw124qdw", "a1212cxn"]
},
{
"name": "cricket bat",
"id": "SPO-002",
"category": "sport",
"price": "80"
}
]
}
and it all works fine when i do something like this:
axios.get('http://localhost:3004/products').then(({ data }) => {
// do something with data
})
and I know I can do: http://localhost:3004/products/SPO-001 which returns me the id for that. but how can I just return the coupons entry for that specific id? is that a possible endpoint?
I tried axios.get('http://localhost:3004/products/SPO-001/coupons') but I just got an empty object. any ideas?
You have 2 options:
1st
axios.get('http://localhost:3004/products')
.then(res => this.setState({product: res.data.productID.coupon})) // not sure how you want to use your response, this is just an example
2nd create your endpoint for each product, something like http://localhost:3004/:productID/coupon and then "hit" that endpoint with your axios get request, e.g. axios.get('http://localhost:3004/23/coupon').then(res => res.data)
I would have to say the 2nd option would be more robust.
I am working in a Sencha touch app, and I am finding problems to filter correctly the next scenario:
I have this API:
In this area we have different templates number related with the Id, data is saved in a store call (for example: templates):
{
"id": "0100100001",
"templates": {
"id": "0000000187", ---> customerId
"name": "TEST01",
"validFrom": "\/Date(1360710000000)\/",
"validTo": "\/Date(253402300799000)\/"
},
{
"id": "0000000188",
"name": "S_TEST_01",
"validFrom": "\/Date(1360710000000)\/",
"validTo": "\/Date(253402300799000)\/"
}
}
In other Json/store called "Survey" we save the next data,
"id": "0000104747",
"templateId": "0000000955",
"templateName": "SURVEYAPP TEST1",
"customerId": "0100100001",
Question is: How can I evaluate if the customerId has a template created in the "Surveys" store?
Thank you in advance.
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
I'm trying to create a form with Angular JS that lets you edit a venue (address, city etc).
The backend runs Django and is available through a REST API (Django Rest Framework) which I'm talking to via Restangular services. This all works fine.
For most form elements, things are pretty standard. I have a venue object and just populate the items with, for example:
<input type="text" ng-model="venue.street">
However, every venue object has a category which, on the backend, is a foreign key to a category object, so in Django this would be:
category = models.ForeignKey(Category)
Now, when getting a venue through the REST API, the category is just referenced by the pk/id of the category object. So, for example, this would be:
{
"id": 14,
"name": "test place",
"slug": "test-place",
"country": "Ireland",
"city": "Dublin",
[...etc...]
"category": 1
},
And a separate REST endpoint, gets me the categories:
[
{
"id": 1,
"name": "Rock"
},
{
"id": 2,
"name": "Classic"
},
{
"id": 3,
"name": "Jazz"
}
]
My problem is that when editing the venue, I would like the drop down menu for categories to show categories by name but just feed the category ID to the backend, as well as pre-select the venue's current category when first shown.
I'm new to Angular but, as far as I can understand, Angular populates a select directive with references to the object itself, not something simple like an ID.
At the moment I have this:
<select ng-model="venue.category" ng-options="category.name for category in categories track by category.id"></select>
Obviously, this doesn't work as, even though venue.category is just a number, and category.id also, they are not the same object.
I'm probably missing an obvious solution here but would appreciate any pointers.
Thanks!
Track by is for when you want two different objects to be equal in regards to the select box. This isn't the case. You just want the model to be the id itself. Angular supports this like so.
http://jsfiddle.net/XLpFN/
Example:
<select ng-model="venue.category" ng-options="category.id as category.name for category in categories"></select>
$scope.categories = [
{"id": 1, "name": "Rock"},
{"id": 2, "name": "Classic"},
{"id": 3, "name": "Jazz"}
];
$scope.venue = {
"id": 14,
"name": "test place",
"slug": "test-place",
"country": "Ireland",
"city": "Dublin",
"category": 2
};
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.