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/
Related
I have a json object called blogData with json data. Inside the json obj the tags key may have multiple tag values. I would like to display the tags values separately in span tag while iterating using map function.
Now multiple tags are displaying in a single span tag ( please see below) How can I fix this ?
const blogData = [
{
"id" : 1,
"title":"Cypress tests",
"images":"/images/image1.jpg",
"description": "Add the E2E cypress UI tests",
"tags": "cypress"
},
{
"id" : 2,
"title":"Jmeter tests",
"images":"/images/image2.jpg",
"description": "Performance test using Jmeter tool",
"tags": ["jmeter", "performance"]
},
{
"id" : 3,
"title":"Basic Unix commands",
"images":"/images/image3.jpg",
"description": "Learn basic unix commands in git bash",
"tags": "unix"
},
{
"id" : 4,
"title":"Postman",
"images":"/images/image4.jpg",
"description": "Api testing using postman",
"tags": ["postman", "api"]
},
]
Home.js
const [searchResults, setSearchResults] = useState([]);
<div className="container">
{
searchResults.map(({ id, title, images, description, tags }) => (
<div key={id} className="column-center">
{/* <img className="blogImage" key={images} src={images} alt="image"></img> */}
<div className="blogtitle">
<span key={title}>{title}</span>
</div>
<section>
<p className="blogdescription" key={description}>{description}</p>
</section>
<section className="col1">
<span key={tags}>{tags}</span>
</section>
<section className="col2">
<a>Read more {'>'}{'>'}</a>
</section>
</div>
))
}
</div>
I think this what you are after.
Sandbox
<section className="col1">
{Array.isArray(tags) ? (
tags.map((tag) => (
<span style={{ marginRight: "10px" }}>{tag}</span>
))
) : (
<span>{tags}</span>
)}
</section>
You could make this code much simpler be having the tags field always be an array even if there is a single element.
Angular2 Unable to print JSON Nested array
help me with nested array problem. Unable to print User_name, User_id and User IRN..
My Component.ts
this.apiService.getIM().subscribe((getIM) => {
this.iOverview = getIM['message'];
console.log(this.iOverview); //This print the whole array.
});
HTML Code
<tr *ngFor="let iUsers of iOverview?.response?.i_details?.user_details | slice:0:10;">
<td>
<div>
<a href="javascript:void(0)"
class="text-default font-weight-semibold letter-icon-title">{{ iUsers.user_name }}</a>
</div>
</div>
</td>
</tr>
My Json Output
{
"message": {
"response": {
"res_type": "IM Users", //able to print this value
"acc_id": "1234567890",
"i_details": [
{
"user_details": [
[
{
"user_name": "admins", //not able to print this value.
"user_id": "MyGroups1",
"user_arn": "user:763526717345"
}
]
]
}
]
}
}
}
Have you noticed that the properties you are trying to access are nested in another array? "user_details": [[...]]. Try accessing it like this:
*ngFor="let iUsers of iOverview?.response?.i_details?.user_details[0]
Hope it helps!
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 have list of schools each with a code for a school level instead of ES, MS, HM.
[
{
"nameOfInstitution": "Summer Elementary",
"schoolLevel": "01304"
},
{
"nameOfInstitution": "Grady Middle",
"schoolLevel": "02400"
}
]
I am planning to use another JSON to get the description of those codes from:
{
"schoolLevel": [
{"01302": "All levels"},
{"01304": "Elementary"},
{"02400": "Middle"},
{"02402": "High school"}
]
}
What is the proper way to display this in Angular in a view where it would look like?
<div class="item item-text-wrap">
<p ng-repeat="school in schools">{{school.nameOfInstitution}} - {{school.schoolLevel}}</p>
</div>
Should it 1). iterate through the main JSON and insert the description after "schoolLevel" or 2). should I use a look-up method to find out the description each time I display a school?
I would think the first option is the better choice, but can anyone share some snippets of code on how to best achieve that?
Thank you!
You can create a filter for lookup:-
DATA:-
$scope.schools=[
{
"nameOfInstitution": "Summer Elementary",
"schoolLevel": "01304"
},
{
"nameOfInstitution": "Grady Middle",
"schoolLevel": "02400"
}
];
$scope.schoollevel={
"schoolLevel": [
{"01302": "All levels"},
{"01304": "Elementary"},
{"02400": "Middle"},
{"02402": "High school"}
]
}
Filter:-
app.filter('level',function(){
return function(item,filter){
//console.log(item.schoolLevel);
var levelVal;
item.schoolLevel.forEach(function(level){
if(typeof level[filter]!='undefined'){
console.log(level[filter]);
levelVal=level[filter];
}
}
);
return levelVal;
}
});
HTML:-
<p ng-repeat="school in schools">{{school.nameOfInstitution}} -
{{schoollevel|level:school.schoolLevel }}</p>
Plunker
Below code should work
Markup
<div class="item item-text-wrap">
<p ng-repeat="school in schools">{{school.nameOfInstitution}} -
{{level.schoolLevel | filter: school.schoolLevel : true }}</p>
</div>
Code
$scope.level = {
"schoolLevel": [
{"01302": "All levels"},
{"01304": "Elementary"},
{"02400": "Middle"},
{"02402": "High school"}
]
}
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>