I really need help with a pretty simple and trivial problem, but here it goes. I am using marko on the server side in NodeJS and am rendering my views via:
ctx.render({
});
with koa-router and koa. I need help in the html dept on how to go about for or while looping over all these to display via:
<ul>
<li>
</li>
</ul>
I have tried and tried and tried, but am too frustrated to move on, please someone save me as it feels like a Monday brain fart on a Thursday -_-
"invoices": [
{
"id": 1,
"customer_id": 1,
"line_items_total": 187,
"additional_fees": 10,
"tax_rate": 0.07,
"sub_total": 210.79
},
{
"id": 2,
"customer_id": 4,
"line_items_total": 100,
"additional_fees": 0,
"tax_rate": 0.07,
"sub_total": 107
},
{
"id": 3,
"customer_id": 2,
"line_items_total": 48.4,
"additional_fees": 0,
"tax_rate": 0.07,
"sub_total": 51.79
},
{
"id": 4,
"customer_id": 9,
"line_items_total": 286,
"additional_fees": 35,
"tax_rate": 0.07,
"sub_total": 343.47
}
]
The full project file is at: GitHub
This is under:
/routes/invoices/invoices.js
and the query can be found in:
/db/queries
which refers to:
queries.objects.getAllObjects()
in:
/routes/invoices/invoices.js
You are correct that you can loop over arrays using the following syntax:
<ul>
<li for(invoice in data.invoices)>${invoice}</li>
</ul>
Marko also allows you to loop over the properties of an object if you need to do that as well:
<ul>
<li for(invoice in data.invoices)>
<ul>
<li for(key,value in invoice)>
<strong>${key}</strong>: ${value}
</li>
</ul>
</li>
</ul>
For reference: https://markojs.com/docs/core-tags/#codeltforgtcode
L-O-L got it, for anyone referencing this in the future, a nice simple:
invoices.marko
file to get a basic understanding. Of course I could:
${invoice.id}
${invoice.customer_id}
${invoice.line_items_total}
${etc}
to list out each individual attribute/property/value of the desired .key
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Invoices</title>
</head>
<body>
<ul>
<li for(invoice in data.invoices)>${invoice}</li>
</ul>
</body>
Related
Not able to get parent object's param value
{{#each myObject.details}}
<span class="marginL15 pull-left hidden-xs">
<a href="
/rates
/{{../port_data.name}}
/{{../port_data.name}}
/{{name}}
/{{port_code}}
">
{{name}}
</a>
</span>
{{/each}}
My object is of format
{
"meta_title": "fw",
"port_data": {
"display_name": "Rajkot (INRAJ), Rajkot, India",
"name": "Rajkot",
"port_code": "INRAJ"
},
"details": [
{
"_id": {
"$oid": "58f04ef3c0a35f10b7cc08fa"
},
"display_name": "Sokhna(Al Sokhna) (EGSOK), Suez, Egypt",
"name": "Sokhna(Al Sokhna)",
"port_code": "EGSOK"
},
{
"_id": {
"$oid": "58ff42cfc0a35f493be68031"
},
"display_name": "Rouyn Noranda Airport - CAYUY (YUY), Canada, usa",
"name": "Rouyn Noranda Airport - CAYUY",
"port_code": "YUY"
},
{
"_id": {
"$oid": "58f1c6e9c0a35f2d16dd4f44"
},
"display_name": "Sharjah (AESHJ), Sharjah, United Arab Emirates",
"name": "Sharjah",
"port_code": "AESHJ"
}
]
}
Also tried {{#root.port_data.name}} but to no use.
When passing myObject.details to the {{#each}} helper, you pass only the referenced array stored in the details field of myObject variable - there is no way to look up to something stored in ../, as there's nothing there.
What you could do:
{{#myObject}}
{{#each details}}
<span class="marginL15 pull-left hidden-xs">
<a href="/rates
/{{../port_data.name}}
/{{name}}
/{{port_code}}
">
{{name}}
</a>
</span>
{{/each}}
{{/myObject}}
It gives you an access to the whole myObject variable one scope above the {{#each}} loop.
I'm testing this markup https://developers.google.com/gmail/markup/reference/invoice on https://script.google.com/, so I discard all the SPF problems.
This is the JS:
function testSchemas() {
var htmlBody = HtmlService.createHtmlOutputFromFile('mail_template').getContent();
MailApp.sendEmail({
to: Session.getActiveUser().getEmail(),
subject: 'Test Email markup - ' + new Date(),
htmlBody: htmlBody,
});
}
And this is the HTML
<html>
<head>
<script type='application/ld+json'>
{
"#context": "http://schema.org",
"#type": "Invoice",
"accountId": "123-456-789",
"minimumPaymentDue": {
"#type": "PriceSpecification",
"price": "$70.00"
},
"paymentDue": "2015-11-22T08:00:00+00:00",
"paymentStatus": "PaymentAutomaticallyApplied",
"provider": {
"#type": "Organization",
"name": "Mountain View Utilities"
},
"totalPaymentDue": {
"#type": "PriceSpecification",
"price": "$70.00"
}
}
</script>
</head>
<body>
<p>
This a test for a Go-To action in Gmail.
</p>
</body>
</html>
As you may see, the code should be fine. Ok, I execute the code and I receive this (please, add "h" at beggining, stackoverflow dont let me add more than 2 links):
https://i.stack.imgur.com/bg8S2.png
https://i.stack.imgur.com/ituM0.png
What I'm doing wrong? one-click actions on http://gmail-actions.appspot.com/ works fine, but I can't get working invoices.
I am getting error "resource view/View1.view.xml could not be loaded from resources/view/View1.view.xml" when I try to load a view from folder "view".
Folder structure in WebIDE is as in below picture.
index.html
<!DOCTYPE HTML>
<html>
<head>
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal" >
</script>
<script>
sap.ui.localResources("webapp");
var app = new sap.m.App("idApp");
var view1 = sap.ui.view({id:"idView1",
viewName:"view.View1",type:sap.ui.core.mvc.ViewType.XML});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content" ></div>
</body>
</html>
View1.xml
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Text id="idbtn" text="Text from" />
</mvc:View>
View1.controller
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("View1");
});
neo-app.json
{
"routes": [
{
"path": "/webapp/resources",
"target": {
"type": "service",
"name": "sapui5",
"entryPath": "/resources"
},
"description": "SAPUI5 Resources"
}
]
}
error in browser
I tried several ways and could not find a way to point to View1.xml
Thanks in Advance,
Srini.
Please use data-sap-ui-resourceroots'{"webapp": "./" }' inside the script tag and the view name should be webapp.view.View1 in index.html.
sap.ui.localResources("webapp"); registers the webapp folder for the webapp namespace. You can see that in the console too.
So it should be viewName: "webapp.view.View1".
Please also note that your controller is then known as webapp.controller.View1:
return Controller.extend("webapp.controller.View1", {
...
forEach is not a function when I am iterating json file in ejs using nodejs giving some error while iterating.. below is three section what i have done in .ejs file, json and nodeJS
Here is my JSON Data
<pre>
{
"MenuName": "Main Menu Here",
"widget": {
"window": {
"data": "Click Here",
"title": "Sample Konfabulator Widget",
"name": "main_window",
"width": 500,
"height": 500
},
"window": {
"data": "Click Here",
"src": "Images/Sun.png",
"name": "sun1",
"hOffset": 250,
"vOffset": 250,
"alignment": "center"
},
"window": {
"data": "Click Here",
"size": 36,
"style": "bold",
"name": "text1",
"hOffset": 250,
"vOffset": 100,
"alignment": "center",
"onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
}
}
}
</pre>
This is my ejs
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1> My Name Is <%= title %></h1>
<h1> My Name Is <%= printIt.MenuName %></h1>
<ul>
<% printIt.widget.forEach(function(item){%>
<li><%= item.window.data%></li>
<% }); %>
</ul>
</body>
</html>
</pre>
in NodeJS
<pre>
app.locals.printIt = require("./sample.json");
</pre>
I can able to print
My Name Is <%= title %> and My Name Is <%= printIt.MenuName %>
What i missed here..?
First of all, your JSON data will keep only single record of widget window and which is last one. Because window key will overwrite previous hold value.
Update your script with this one
<ul>
<% for(var item in printIt.widget){%>
<li><%= printIt.widget[item].data%></li>
<% } %>
</ul>
Hope this will help to solve your query !!
I'm building a little Spotify app that displays tweets from the current Artist playing. I'm using Bocoup's jQuery Twitter plugin to grab and display the tweets: http://code.bocoup.com/jquery-twitter-plugin/
MANIFEST.JSON
{
"BundleType": "Application",
"AppIcon": {
"18x18": "tutorial.png"
},
"AppName": {
"en": "News"
},
"SupportedLanguages": [
"en"
],
"RequiredPermissions": [
"http://twitter.com"
"http://*.twitter.com"
"http://*.twimg.com"
],
"VendorIdentifier": "com.News",
"RequiredInterface": "1",
"BundleVersion": "0.2",
"BundleIdentifier": "News",
"AppName": "News",
"AppDescription": "Twitter updates from the Artist playing."
}
From the Index file:
<script type="text/javascript">
$(document).ready(function() {
$('#tweets').twitter({from: 'mediatemple', replies: false})
launch();
});
</script>
</head>
<body>
<div id="info">
</div>
<div id="news">
</div>
<div id="tweets">
</div>
</body>
Nothing displays in Spotify when I open my app, but if I open the index.html file in a browser, the tweets appear. What am I missing?
The RequiredPermissions JSON needs commas.
try:
"RequiredPermissions": [
"http://twitter.com",
"http://*.twitter.com",
"http://*.twimg.com"
],
Things fail silently if there is a problem in the manifest. Always use a JSON linter (http://jsonlint.com/) to verify at least the format is proper JSON.
UPDATE: After any changes to manifest.json you must restart Spotify.