I'm having trouble trying to loop through my JSON data with an a assemble site setup in the following structure:
-src
--content
---index.hbs
--data
---steps-data.json
--partial
---steps.hbs
The index.hbs in the content calls the partial passing through the object like so:
{{> steps steps-data}}
My steps-data.json file looks like so:
{
"steps":[{
"index": 1,
"title": "Find a product",
"description": "Go to a product page and click on the +PriceTrack short cut to add to your list."
},{
"index": 2,
"title": "Track its price",
"description": "Go to a product page and click on the +PriceTrack short cut to add to your list."
},{
"index": 3,
"title": "Purchase",
"description": "Go to a product page and click on the +PriceTrack short cut to add to your list."
}]
}
In my steps.hbs i've tried looping through the JSON data but its not.
<div class="g-col g-span4">
{{#each steps-data.steps}}
<div class="working-step">
<span class="number"></span><h3>{{title}}</h3>
</div>
<p>{{description}}</p>
{{/each}}
</div>
The problem I have is that its not looping through and not sure what I'm doing wrong.
Since you passed steps-data into the partial as it's context, you can access steps directly or with this.steps:
<div class="g-col g-span4">
{{#each this.steps}}
<div class="working-step">
<span class="number"></span><h3>{{title}}</h3>
</div>
<p>{{description}}</p>
{{/each}}
</div>
Related
I get a result in the JSON Format like these sample from a webservice.
How can i iterate over this items to prensent the objects
HTML Code - not working
<div *ngFor="let item of List">
{{item.Code}}
</div>
JSON Sample
"List": {
"0": {
"Code": "A"
},
"1": {
"Code": "B"
},
"2": {
"Code": "C",
}
}
unfortunally the webservice does not provide this as an Array [] of objects
I want to see the list of all items für the Key "Code"
You can use KeyValuePipe like here.
So the your code would be something like this:
<div *ngFor="let item of List | keyvalue">
{{item.value.Code}}
</div>
As it was not working with
<div *ngFor="let item of List | keyvalue">
{{item.value.Code}}
</div>
Typescript was throwing an error because {{item.value.Code}} was not known.
I did some additional research and found the following solution
<div *ngFor='let key of objectKeys(List)'>
{{List[key].Code}}
</div>
in the typescript class corresponding to the html file you have to add
objectKeys = Object.keys;
I need to get nested products from JSON to my html in <div ng-repeat="order in orders"></div> I tried many versions of getting products values(name, description etc.) but none of them works. How to do this ?
JSON:
[
{
"id":3,
"date":"00:00:00",
"user":{
"id":1,
},
"orderState":{
"id":1,
},
"products":[
{
"id":1,
"name":"Bosch POF 1200",
"description":"1200W",
"enabled":true,
"price":459,
},
{
"id":9,
"name":"Graphite 58G782",
"description":"a",
"enabled":true,
"price":429,
}
]
}
]
Controller
OrdersService.retrieveAllByCurrentUser().then(function(response) {
$scope.orders = response.data;
console.log(response.data);
}, function(error) {
registerError(error, 'retrieving all orders');
});
The ng-repeat directive creates a new scope, which means that you should be able to loop through the products within it like this:
<div ng-repeat="order in orders">
<div ng-repeat="product in order.products"> e.g. {{product.name}} </div>
</div>
I would also advise to write a directive for dealing with that kind of stuff, because your code can get unreadable really fast. Don't take my word for it though as I am no Angular expert.
Create a nested ng-repeat like this to access the products information:
<div ng-repeat="order in orders">
<div ng-repeat="product in order.products">
<h1 ng-bind="product.name"></h1>
<p ng-bind="product.description"></p>
</div>
</div>
For each order it will go into order.products and loop out the information as product, then you can access the information in product via dot notation, like product.name for example.
You can do nested ng-repeat in html
<div ng-repeat="order in orders">
<div ng-repeat "product in order.products">
<span>{product.name}}</span>
<span>{{product.description}}</span>
</div>
</div>
I am creating a set of divs from a JSON object using ng-repeat that construct "note" cards. The number of cards is determined by the number of JSON objects in the array. "Type" designates the header of the card, and "Content" designates the body. However, the contents of "Content" is not consistent. In some examples, the content is merely a sentence or paragraph. In others, the content is an array. When the content is a sentence, the formatting is handled fine. When the content is an array, I end up with the actual array in text format [{"year":"2009", "operation":"caesarean"},{"year":"2010", "operation":"torn meniscus"}] as the body of the card. Any ideas of how to implement this without scripting each card individually?
HTML
<section name="patientinfo">
<div align="center" ng-controller="HistoryCtrl">
<div class="grid-container" ng-repeat="record in historyItems">
<div class="row" row>
<div class="col-2" ng-repeat="history in record.History">
<div class="note" draggable="true">
<div class="row" id="rowhead3">
<div class="col-6" >
<span class="note-header">{{history.type}}</span>
</div>
</div>
<div class="row">
<div class="col-6" style="overflow: auto; height:250px;">
<div>
<span class="note-content">
{{history.content}}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
JSON Example (the actual JSON is huge). There are many other entries besides "history". Also, these notes are not from a real person, so don't worry.
"History": [
{
"type": "medical",
"content": [
{
"condition": "IBS"
},
{
"condition": "Torn Meniscus Right Knee"
},
{
"condition": "Seasonal Allergies"
}
]
},
{
"type": "SOCIAL HISTORY",
"content": "Lives with husband and 3 children. No history of violence, domestic violence, or rape. Feels safe at home and in relationship. ETOH on weekends (socially 4 drinks in one weekend occasionally) and occasionally smokes cigarettes and marijuana. Admits to very rare marijuana on special occasions."
}]
Example of what I'm ending up with:
http://i.stack.imgur.com/MtuBN.png
You should transform or augment the data into a new format where you have the following structure for each note:
{
type: "string",
contentType: "(text|list)",
content: "string" // OR array of strings
}
To do this, you will need to have custom logic to transform each object in the array to a single string.
Then just use an ng-switch on the contentType attribute to decide which markup to use (e.g. a <ul> if contentType is list).
I have this Backbone App where I display my data/json with HandlebarsJS.
Now my API returns nested JSON data:
{
"Live": [
{
"artist_name": "some artist",
"video_title": " some video title",
"video_thumbnail": "some thumbnail"
}
],
"Others" : [
{
"artist_name": "some artist",
"video_title": " some video title",
"video_thumbnail": "some thumbnail"
}
]
}
I tried to do
{{#each Live}}
<div>
<img src="{{video_thumbnail}}">
<h2>{{video_title}}</h2>
<h2>{{artist_name}}</h2>
</div>
{{/each}}
But that did not work...
Anyone who know what to do? thanks in advance...
Handlebar templates can be used in two ways.
1. We can save the file with (.hbs)
2. Second way is we need the handlebar template in script tag. Provided same in [jsfiddle][1] , I have provided link, you can check the below link
[1]: https://jsfiddle.net/trilokvallamkonda/cLgzf21y/13/
I have json data having anchor tag .
task.json
{
"data": [{
"id": 1,
"title": "Launch an EC2 Instance",
"desc": "Needed an <a href='#'>EC2</a> instance to deploy the ccr code",
"status": "done",
"percentage_finished": 100
}]
}
I am using angularjs to render this data to my html page . But anchor tag is not working.
It prints as it is as Text.
<div class="task-pn panel panel-primary">
<div class="panel-heading"><b>Description : Task-{{task_detail.id}}</b></div>
<div class="panel-body">
<div onclick="this.contentEditable='true';">{{task_detail.desc}}</div>
</div>
</div>
Output img.
I need a simple link to EC2 word .How to deal with this isuue?
You need something like this:
In your controller:
scope.trustedHtml = sce.trustAsHtml(json.desc);
And to use it in your partial:
<p class="org-desc" ng-bind-html="trustedHtml"> </p>
user2720708 :Thanks for sharing your ideas.
eRIZ gave this link .There I used the idea of Luke Madera.
Current working html page .
<div class="task-pn panel panel-primary">
<div class="panel-heading"><b>Description : Task-{{task_detail.id}}</b></div>
<div class="panel-body">
<div contentEditable" ng-bind-html="task_detail.desc"></div>
</div>
</div>
and Then I follow only two steps :
1.include the angular-sanitize.min.js resource, i.e.:
2.In a js file (controller or usually app.js), include ngSanitize, i.e.:
angular.module('myApp', ['myApp.filters', 'myApp.services',
'myApp.directives', 'ngSanitize']) ---------from answer given by Luke Madera
Its working now ...:)