I am new in kendo ui. I have a shopping cart system like this http://demos.kendoui.com/sushi/. I want to show multiple images in a single line by creating image array. the code of this demo site at this address. https://github.com/telerik/kendo-mobile-sushi.
If you have modified menu.js and the entries look like:
{
"id" : 1,
"name" : "Sashimi salad",
"price" : 12.00,
"image" : "sashimi-salad.jpg",
"category" : "Cold starters",
"description": "Organic greens topped with market fresh sashimi, wasabi soy vinaigrette.",
"featured" : true
},
{
"id" : 2,
"name" : "Chirashi sushi",
"price" : 21.00,
"image" : [ "chirashi-sushi.jpg", "chirashi-sushi.jpg", "chirashi-sushi.jpg"],
"category" : "Cold starters",
"description": "Sushi bar variety with sushi rice.",
"featured" : false
},
Where you have entries as Sashimi salad that only have one image defined as a string and entries as Chirashi sushi where have multiple images defined in an array.
Then you should modify your templates for checking if image is a string and if not then iterate on the array elements. Something like:
<script id="menuTemplate" type="text/x-kendo-template">
<a data-role="button"
data-click="addToCartFromList"
data-item-id="#:id#"
href="\\#">#:kendo.toString(price, "c")#</a>
<a class="details-link" data-role="listview-link" href="\#details?id=#:id#">
# if (typeof image === 'string') { #
<img src="content/images/75/#= image #"/>
# } else { #
# for (var i = 0; i < image.length; i ++) { #
<img src="content/images/75/#= image[i] #"/>
# } #
# } #
<h2>#:name#</h2>
<span class="added"#= cartDataSource.get(id) ? "" : 'style="display: none"' #>Item added to cart</span>
</a>
</script>
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.
Working with Squarespace. At the bottom of each blog post I'm trying to get the authors name, bio, avatar, and applicable social media links to show.
I've solved with the exception of the Twitter and Facebook links.
Anyone know the variable to include these?
Here's my working code:
{.section author}
<span class="author-name">
{.if author.avatarId}
<div class="bespoke-avatar">
<a href="{collection.fullUrl}?author={author.id}">
<img src="/global/{author.avatarId}?format=36w" />
</a>
</div>
{.end}
<div class="bespoke-info">
<em class="bespoke-author-name">{displayName}</em>
<em>{author.bio}</em>
</div>
</span>
{.end}
There is a json object that is storing the social links.
authenticatedAccount -> socialOptions
"socialOptions" : [ {
"type" : "facebook",
"username" : "http://facebook.com"
}, {
"type" : "twitter",
"username" : "http://twitter.com"
}, {
"type" : "google",
"username" : "https://plus.google.com/"
} ],
Go to your main site add ?format=json-pretty and look for the above object.
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 have a JSON object representing calendar dates. These are added through a CMS and I'd like to be able to filter them based on date. My schema set-up has made this more difficult than I thought. Is it possible to orderBy the day value in this JSON object or is there a filter workaround?
Here is my JSON object:
{
"_id" : ObjectId("53f252537d343a9ad862866c"),
"year" : {
"December" : [],
"November" : [],
"October" : [],
"September" : [],
"August" : [],
"July" : [
{
"day" : "21",
"title" : "Event Title",
"summary" : "Event Summary",
"description" : "oEvent Description",
"_id" : ObjectId("53f252537d343a9ad862866d")
}
],
"June" : [],
"May" : [],
"April" : [],
"March" : [],
"February" : [],
"January" : []
},
"__v" : 0
}
Here is my view which already uses a custom filter to filter by month. The orderBy is not functioning but I've left it in as a placeholder to show where I'd like to set the functionality.
<div class="calDynamic" data-ng-repeat="n in [] | range:100">
<div ng-repeat="cal in calendar[n].year | filterKey:month">
<div ng-if="cal != '' ">
<div class="calendar">
<div ng-repeat="item in cal | orderBy: 'key.day' ">
<a href="/events/{{item.day}}">
<article class="eventslist">
<div class="numberedDate">
<h3>{{item.day}}</h3>
</div>
<div class="calInfo">
<h5>{{item.title}}</h5>
<p>{{item.summary}} <a>more</a></p>
</div>
</article>
</div><!-- ng-repeat val,key -->
</div><!-- calendar -->
</div><!-- ng-if cal -->
</div><!-- ng-repeat cal -->
</div><!-- calDynamic -->
You should be able to define a custom sort function that sorts by any item in your object. The key bit is to convert the object to an array in the filter function.
Here's an example:
app.filter('orderByDayNumber', function() {
return function(items, field, reverse) {
var filtered = [];
angular.forEach(items, function(item) {
filtered.push(item);
});
filtered.sort(function (a, b) {
return (a[field] > b[field] ? 1 : -1);
});
if(reverse) filtered.reverse();
return filtered;
};
});
You would then call it like this:
<div ng-repeat="(key, val) in cal | orderByDayNumber: 'day' ">
Note, you shouldn't write val.day as that is assumed.
Look at this great blog post here for more info.
EDIT: In fact, it looks like your structure is actually already an array, so while this technique will still work, it may not be necessary - it might have just been the way you were adding the parameter to orderBy that was causing issues.
I have a total of (3) templates in my page and this overlay template is the third and final one. The first two are basically written the same as this template and they work fine. BUT For some reason, console.log(html) on this one returns nothing :
<!-- JSON -->
{ "art" : [{
"title" : "2 Intro-B",
"img_small" : "2 Intro-C",
"description" : "8x10 archival print on Epson Fine Art Velvet Paper.",
"price" : "20"}, { "title" : "6 Bison-B",
"img_small" : "6 Bison-C",
"description" : "8x10 archival print on Epson Fine Art Velvet Paper.",
"price" : "20"}, { "title" : "7 Cars-B",
"img_small" : "7 Cars-C",
"description" : "8x10 archival print on Epson Fine Art Velvet Paper.",
"price" : "20"}]}
<!-- HTML -->
<div id="overlay"></div>
----------------------------------------------
<!-- SCRIPT -->
<script id="overlayTmpl" type="text/template">
{{#overlayTemplate}}
<div id="lightbox">
<div id="closeButton">X</div>
<img src="/images/{{title}}.jpg"/>
</div>
{{/overlayTemplate}}
</script>
<script type="text/javascript">
$(function(){
$.getJSON('/scripts/art.json', function(data) {
var overlaytmpl = $('#overlayTmpl').html();
var html = Mustache.to_html(overlaytmpl, data);
console.log(html);
$('#overlay').html(html);
});
});
</script>
** On the first two templates, the console.log(html) returns the html output just fine. I don't know why this one is hung up on something. JSON file has been validated...
Please help me from going insane. There must be a hex on this block of code. Anyone have a magic wand?
This may help you - Change your template like this:
<script id="overlayTmpl" type="text/template">
{{#art}}
<div id="lightbox">
<div id="closeButton">X</div>
<img src="/images/{{title}}.jpg"/>
</div>
{{/art}}
</script>