Please help me in iterating the following array of objects. I'm able see the array of objects in console,But I could not iterate it in jade
[{title: "Stamp. The Hobbit", description: "Stamp. <b>The Hobbit</b>. I know
it was on Friday …n the day when there was not a lot of creativity.",
originalLink: null, summary: null, date: "2017-09-25T06:42:50.000Z"}
{title: "Fall/winter Tolkien/LOTR events: your 'go-to' list",
description: "Audiences will thrill to the music from his legend…bbit</b>
with scores from his films: The ...", originalLink: null, summary:
null, date: "2017-09-25T05:26:15.000Z"},
{title: "Watch what happens when Darth Vader swaps galaxy far, far away ...
for Middle Earth", description: "The narrative of Middle Earth: Shadow of
War is ba…nts of <b>The Hobbit</b> and The Lord of ...", originalLink:
null, summary: null, date: "2017-09-25T03:56:15.000Z"}
{title: "The hobbit sword", description: "Posted by alex in kids / baby
stuff, toys in Munster, Cork. 24 September 2017...210966215.", originalLink:
null, summary: null, date: "2017-09-24T19:30:12.000Z"}
{title: "The hobbit as high fantasy essay", description: "Im science teacher
is stupid hes making me write a… like r u serious. Problems of urbanization
essay", originalLink: null, summary: null, date: "2017-09-24T19:26:02.000Z"}
{title: "Lego The Hobbit Bagend Bundle", description: "Lego <b>The
Hobbit</b> Bagend Bundle, Used Lego &a…, Dublin, Ireland for 130.00 euros on
Adverts.ie.", originalLink: null, summary: null, date: "2017-09-
24T10:42:38.000Z"}]
server code:
res.render('index', { aaa: JSON.stringify(result) });
jade :
extends layout
block content
script.
console.log("hi");
var bbb = !{aaa}
console.log(bbb)
each value in bbb
p= value.title
I think you just have to set value.title like this :
each value in bbb
p !{value.title}
Hope it helps.
Related
I'm building a site with a CMS (Netlify) for a local band, and they have future gig dates they will put on the site. So far the dates show up as very long non-formatted strings that include the time and time zone. I'm trying to figure out how to format the dates to be simpler (day, date, time for example).
I've tried plugins like nunjucks-date but I'm a little confused about how to use a plugin (and filters) in this case.
My repo: https://github.com/mollycarroll/serapis-eleventy-2
Example gig entry:
---
layout: gig
venue: Cedar Lake Cellars
date: 2022-05-28
time: 6pm
city: Wright City, MO
---
Gig template:
<h2>{{ venue }}</h2>
<h4>{{ city }} {{ date }} {{ time }}</h4>
config.yml for the CMS:
- name: 'gigs'
label: 'Shows'
folder: 'src/gigs'
create: true
slug: '{{month}}-{{day}}-{{venue}}'
fields:
- { label: 'Layout', name: 'layout', widget: 'hidden', default: '_includes/gig.njk' }
- { label: 'Date', name: 'date', widget: 'date', default: '' }
- { label: 'Time', name: 'time', widget: 'string', default: '' }
- { label: 'Venue', name: 'venue', widget: 'string', default: '' }
- { label: 'City', name: 'city', widget: 'string', default: '' }
Thanks for any help.
First, you should create a filter, let's say src/filters/date.js with the following content:
const { DateTime } = require("luxon");
// Add a friendly date filter to nunjucks.
// Defaults to format of LLLL d, y unless an
// alternate is passed as a parameter.
// {{ date | friendlyDate('OPTIONAL FORMAT STRING') }}
// List of supported tokens: https://moment.github.io/luxon/docs/manual/formatting.html#table-of-tokens
module.exports = (dateObj, format = 'LLLL d, y') => {
return DateTime.fromISO(dateObj, { zone: "Europe/Amsterdam", locale: "en" }).toFormat(format);
};
Make sure you check Luxon documentation for details. Then add the filter in .eleventy.js:
module.exports = function(eleventyConfig) {
...
eleventyConfig.addFilter("date", require("./src/filters/date.js"));
...
};
Now you can use it in Nunjacks with a default value {{ date }}, in this example 'LLLL d, y', or any value you need at a certain position on your website {{ date | date('dd. LLLL yyyy.') }}. This can be very useful if you need at some point just month and year or just day and month.
You can even create multiple language filters, like dateEn.js and dateDe.js, and format each to its own language if you have a multilingual site.
Hope this helps.
EDIT: In order for this filter to work the dateObj should be in ISO 8601 format.
I’m trying to get the generated code (express.js) from isa-group/oas-tools to check the input url, but I’m having no luck. (Or am I abusing the tool?!) It seems to ignore errors in the query parameters. For example, I don’t get an error sending this url:
http://localhost:8080/acQyreXchange/acQyr-sample/1.0.0/gamer/123?limit=-3&xyz=a
I would expect it to complain about ‘limit’ being out of range (-3 < 0), and ‘xyz’ being an unknown parameter. I get an error message about wrong data in the response (which I’m expecting), but nothing about the inputs. Here's the response:
[
• {
o message: "Wrong data in the response. ",
o error:
[
{
code: "INVALID_TYPE",
params:
[
"array",
"object"
],
message: "Expected type array but found type object",
path: "#/"
}
],
o content:
{
message: "This is the mockup controller for getGamer"
}
• }
]
The debug log shows:
2020-09-01T14:49:11.670Z info: Requested method-url pair: get - /acQyreXchange/acQyr-sample/1.0.0/gamer/123?limit=-3&xyz=a
2020-09-01T14:49:11.671Z debug: OASValidator -res.locals.requestedSpecPath: /gamer/{gamerId}
2020-09-01T14:49:11.673Z info: Valid parameter on request
2020-09-01T14:49:11.675Z debug: Processing at checkResponse:
...
The api doc shows:
'/gamer/{gamerId}':
get:
tags:
- admins
summary: 'given a gamerId, returns a gamer'
operationId: getGamer
description: Returns a gamer
parameters:
- in: path
name: gamerId
description: pass the gamerId for looking up the gamer
required: true
schema:
type: string
- in: query
name: skip
description: number of records to skip for pagination
schema:
type: integer
format: int32
minimum: 0
- in: query
name: limit
description: maximum number of records to return
schema:
type: integer
format: int32
minimum: 0
maximum: 50
responses:
'200':
description: search results matching criteria
content:
application/json:
schema:
type: array
items:
$ref: '#/components/schemas/Gamer'
'400':
description: bad input parameter
I’ve tried option:
strict: true (also tried false)
validator: true (also tried false)
customErrorHandling: true (also tried false)
The owner of the code said he's put this fix in asap.
So i have a json file with a json array
{
"LunchItems": [
{
"name":" The Strange Brew",
"price":"~6~",
"description":" A Classic Irish Style Beer Cheese Soup Garnished with Red Pepper and Toasted Baguette"
},
{
"name":" The Killer Tomato",
"price":"~6~",
"description":" A Roma Tomato and Roasted Red Pepper Bisque Garnished with Spiced Creme Fraiche"
},
{
"name":" House Salad",
"price":" ~7~",
"description":" Spring Mix, Carrot, Red Onion, Roma Tomato, Mushroom and Red Peppers"
},
{
"name":" Mediterranean Salad",
"price":"~8~",
"description":" Spring Mix, Red Onion, Kalamata Olives, Roma Tomato, Capers and Feta Cheese"
},
{
"name":" Side Salad & Cup Of Soup",
"price":"~6~",
"description":" "
},
{
"name":" The Ollie",
"price":"~8~",
"description":" A Quarter Pound Version of Our Signature Stout Burger Served on a Pretzel Roll with Spring Mix, Roma Tomato, Red Onion & Colby Jack Cheese - With Choice Of Side"
},
{
"name":" The Neuben",
"price":"~8~",
"description":" Grilled Corned Beef Topped with Sauerkraut, Grilled Onions, Swiss Cheese and Stout Mustard Served on a Toasted Pretzel Roll - With Your Choice Of One Side"
},
{
"name":" The Three Little Birds",
"price":"~8~",
"description":" House Made Chicken Salad Served On 3 Pretzel Rolls with Swiss Cheese and Roma Tomato - With Choice Of Side"
},
{
"name":" The Fresh Prince",
"price":" ~8~",
"description":" Chopped Filet, Onion, Red Pepper & Swiss Served On a Toasted Sausage Roll with Au Jus & Garlic Aioli - With Choice Of Side"
},
{
"name":" The Nine Iron",
"price":"~8~",
"description":" Corned Beef, Smoked Turkey, Benton's© Bacon, Swiss, Spring Mix, Red Onion, Tomato, & Garlic Aioli - With Choice Of Side"
},
{
"name":" The Fish 'n' Chips",
"price":"~8~",
"description":" Two Beer Battered Cod Filets Served with House Made Tartare Sauce and Malt Vinegar Aioli - With Choice Of Side"
},
{
"name":" The Big Cheese",
"price":"~6~",
"description":" A Classic Colby Jack & Sourdough Grilled Cheese Sandwich - With Choice Of Side"
},
{
"name":" The Chicken Gyro",
"price":"~9~",
"description":" Grilled chicken breast with spring mix, roma tomato, red onion and feta cheese wrapped in toasted pita bread and served with house made tzatziki sauce - with choice of one side."
},
{
"name":" Deluxe Quesadilla",
"price":"~8~",
"description":" Colby Jack, Roasted Corn, Red Peppers, Black Beans & Red Onion Served with House Salsa & Spiced Creme Fraiche"
},
{
"name":" Cheese Quesadilla",
"price":"~5~",
"description":" Cheese quesadilla served with house salsa & spiced creme fraiche"
}
]
}
I am using express to render pug files
const express = require('express');
const app = express();
const lunches = require('./public/json/lunch.json');
app.set('view engine', 'pug');
app.use(express.static(__dirname + '/public'));
const server = app.listen(7000, () => {
console.log(`Express running → PORT ${server.address().port}`);
});
app.get('/', (req, res) => {
res.render('index',{
lunches: lunches.LunchItems
});
});
doctype html
html
head
title #{title}
link(rel='stylesheet', href='/css/Index.css')
meta(name="viewport" content="width=device-width, initial-scale=1")
style.
body {
background-image: url("/images/wood.jpg");
background-size: auto;
}
body
div.menuContainer
each item in lunches
div.menuItem
#{item.name} <br/>
#{item.price} <br/>
#{item.description}
the output is:
< The Strange Brew>
<~6~>
< A Classic Irish Style Beer Cheese Soup Garnished with Red Pepper and Toasted Baguette>
< The Killer Tomato>
<~6~>
< A Roma Tomato and Roasted Red Pepper Bisque Garnished with Spiced Creme Fraiche>...
So why are the '<>' there and how do i get rid of them?
When you start a new line with #{variable}, Pug thinks you're wanting to use block-level tag interpolation:
Tag Interpolation
Pug:
- let myTag = 'h1';
#{myTag} Heading
HTML:
<h1>Heading</h1>
If you want to just render text on multiple new lines, you can use the piped (|) text syntax, the block text syntax (with a . after the tag), or inline tag interpolation for the line breaks:
Piped Text Example
div.menuItem
| #{item.name}
br
| #{item.price}
br
| #{item.description}
Block Text Example
div.menuItem. // note the trailing dot
#{item.name}<br/>
#{item.price}<br/>
#{item.description}
Inline Tag Interpolation Example
div.menuItem #{item.name} #[br] #{item.price} #[br] #{item.description}
These should all yield the same desired result.
Alternatively, a more semantic solution could be to use a description list (dl) element to mark up this information.
Alternative Example
article.menuItem
h1 #{item.name}
dl
dt Price
dd #{item.price}
dt Description
dd #{item.description}
Is there a way to add separators to a dropdown menu in activeadmin?
For example, if I wanted a separator between the first and second items, how can I do that?
menu.add label: 'Tasks', priority: 10 do |tasks|
tasks.add label: 'Add News Item',
url: proc { new_feed_path },
if: proc { authorized? :create, Feed },
priority: 14
tasks.add label: 'Add Calendar Event',
url: proc { new_event_path },
if: proc { authorized? :create, Event },
priority: 15
end
I checked the documentation but don't seem to see anything for that.
As of writing this comment, ActiveAdmin is at version 1.2.1 and based on its code, it isn't possible to add separators/dividers in a dropdown menu. :(
I just checked on the Github repo and they have no opened issue nor pull request matching the "separator" or "divider" keywords.
Maybe the first step would be to open an issue describing what and how to implement it.
Nothing is preventing us from adding a divider manually:
menu.add label: 'Tasks', priority: 10 do |tasks|
tasks.add label: 'Add News Item',
url: proc { new_feed_path },
if: proc { authorized? :create, Feed },
priority: 14
tasks.add label: "<hr>".html_safe,
url: "javascript:void(0)",
priority: 15
tasks.add label: 'Add Calendar Event',
url: proc { new_event_path },
if: proc { authorized? :create, Event },
priority: 16
end
a url attribute is required so using javascript:void(0) is an option here as # will not render the label. This question discusses javascript:void(0)
In the attached image, the grid does not show properly. The grid is inside a tabpanel. The layout of the tab is = 'fit'.
What setting error is causing the behavior?
EDIT:
Here is the class definition for the tabpanel: Our tab is the one called 'External ID'
/*
* File: SomeTabPanel.ui.js
* Date: Mon May 02 2011 18:08:34 GMT-0400 (Eastern Daylight Time)
*
* This file was generated by Ext Designer version xds-1.0.3.2.
* http://www.extjs.com/products/designer/
*
* This file will be auto-generated each and everytime you export.
*
* Do NOT hand edit this file.
*/
SomeTabPanelUi = Ext.extend(Ext.TabPanel, {
activeTab: 0,
forceLayout: true,
border: false,
enableTabScroll: true,
initComponent: function() {
this.items = [{
xtype: 'panel',
title: 'General',
layout: 'table',
tpl: '',
ref: 'GeneralTab',
layoutConfig: {
columns: 2
},
items: [{
xtype: 'form',
title: 'Corporate',
height: 500,
width: 500,
animCollapse: false,
items: [{
xtype: 'box',
ref: '../../coporateBox'
}]
}]
},{
xtype: 'panel',
title: 'External ID',
layout: 'fit',
ref: 'ExtIdTab',
id: ''
}];
SomeTabPanelUi.superclass.initComponent.call(this);
}
});
Looks like you need to set a height for the grid somehow. Either a manual height declaration, autoHeight: true, or inherited height from a parent container.
Does the parent tabPanel have a height declared/inherited?
Setting layout: 'fit' is a good start for the containing tab, but without some code or a test case, I can't be more helpful.
It should work as described, so you must have something wrong in your code. Post your layout code if you want more help.