amp-list won't show data from firebase rest api while query parameters are added - rest

I am using amp-list with firebase REST api. The thing is when I use
"https://kitchentocustomer.firebaseio.com/restaurants/Yiecu6fL2Pas0XFhCsT06Q0dSOp1/menu.json"
I get the amp-list populated,but when I add query parameters
"https://kitchentocustomer.firebaseio.com/restaurants/Yiecu6fL2Pas0XFhCsT06Q0dSOp1/menu.json?orderBy=%22first_cat%22&equalTo=%22BREAKFAST%22&print=pretty"
I get empty amp-list.
Here is the code
<amp-list width="300"
height="250"
single-item
items="."
layout="responsive"
src="https://kitchentocustomer.firebaseio.com/restaurants/Yiecu6fL2Pas0XFhCsT06Q0dSOp1/menu.json?orderBy=%22first_cat%22&equalTo=%22BREAKFAST%22&print=pretty">
<template type="amp-mustache">
<div>
<dt class="col col-10 h3 mb1">{{title}}</dt>
<dd class="col col-2 m0 mb1 self-center right-align">₹{{price}}</dd>
</div>
</template>
</amp-list>

The amp-list response must be a JSON object containing an array property.
Your filtered query (second link) returns a JSON object which does not contain an array.
Your response for this should be something like below
[
{
"discounted": 157,
"first_cat": "BREAKFAST",
"id": "eEaVn8",
"onSale": false,
"price": 167,
"third_cat": "Egg",
"title": "Egg omlete"
},
{
"discounted": 210,
"first_cat": "BREAKFAST",
"id": "pia9nL",
"onSale": false,
"price": 228,
"third_cat": "Waffles",
"title": "Banana & Nutella waffles"
}
]

Related

Nested JSON Data in Ionic

thanks in advance, I am using Ionic 4 for a mobile app and on a page there is a need to list out the nested data but I don't seem to be able to get it right.
Following is the JSON Data
"campaign_performance": {
"id": 11783,
"name": "calvinseng.com",
"mobile": "false",
"date_from": "2018-01-01",
"date_to": "2018-01-02",
"keywords": [
{
"id": 235505,
"name": "hot stamping printing",
"positions": {
"2018-01-01": 1,
"2018-01-02": 1
}
},
{
"id": 235506,
"name": "creative agency singapore",
"positions": {
"2018-01-01": 59,
"2018-01-02": 57
}
}
]
}
and on the page, the html that I did was
<ion-list color="primary" *ngFor="let campaign of userService.campaign_performance">
{{ campaign.name }}
<ng-container *ngFor="let keyword of userService.campaign_performance.keywords">
{{ keyword.id }}
</ng-container>
</ion-list>
But the html returned nothing in the View.
Was hoping to achieve something similar as attached. Any idea?
This looks like its more likely to be:
<ion-list color="primary" *ngFor="let campaign of userService.campaign_performance">
{{ campaign.name }}
<ng-container *ngFor="let keyword of campaign.keywords">
{{ keyword.id }}
</ng-container>
</ion-list>
You are looping each campaign_performance and assigning it to campaign.
So if you want to do an inner loop then you start from that variable and loop its individual contents.

Getting Error While doing pagination in angular 4

I am new to angular 4. I am working in pagination using angular 4.I ahve installed "npm install ngx-pagination --save". I followed the instruction which was in internet. But I am getting error like "The pipe 'paginate' could not be found ("
]game of games | paginate: { itemsPerPage: 2, currentPage: p }">
{{i}}
"): ng:///ActivityChartModule/ActivityComponent.html#235:32
'pagination-controls' is not a known element:". I tried More. Can any one help me to comeout from this problem. Below are my code,
app.module.ts
import {NgxPaginationModule} from 'ngx-pagination';
imports: [NgxPaginationModule]
in component.ts
p: number = 1;
games = [
{
"id": "1",
"name": "DOTA 2",
"genre": "Strategy"
},
{
"id": "2",
"name": "AOE 3",
"genre": "Strategy"
},
{
"id": "3",
"name": "GTA 5",
"genre": "RPG"
},
{
"id": "4",
"name": "Far Cry 3",
"genre": "Action"
},
{
"id": "5",
"name": "GTA San Andreas",
"genre": "RPG"
},
{
"id": "6",
"name": "Hitman",
"genre": "Action"
},
{
"id": "7",
"name": "NFS MW",
"genre": "Sport"
}, {
"id": "8",
"name": "Fifa 16",
"genre": "Sport"
}, {
"id": "9",
"name": "NFS Sen 2",
"genre": "Sport"
}, {
"id": "10",
"name": "Witcher Assasins on King",
"genre": "Adventure"
}
];
in component.html
<div class="container">
<div class="row">
<nav class="navbar">
<input class="form-control" type="text" name="search">
</nav>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Genre</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let game of games | paginate: { itemsPerPage: 2, currentPage: p }">
<td>{{i}}</td>
<td>{{game.name}}</td>
<td>{{game.genre}}</td>
</tr>
</tbody>
</table>
<div>
<pagination-controls (pageChange)="p($event)"></pagination-controls>
</div>
</div>
</div>
If you have already import NgxPaginationModule into app.module.ts, I think it is because you need to restart your project after npm install.
Try ctrl+c and ng serve to restart it again.
I resolved this problem, you need to include in your module.ts following code:
import {NgxPaginationModule} from 'ngx-pagination';
#NgModule({
imports: [ NgxPaginationModule ]
})
You should add CUSTOM_ELEMENTS_SCHEMA in angular-core
and
schemas: [ CUSTOM_ELEMENTS_SCHEMA ] ----add it in your #NgModule({})
refer this link: https://hassantariqblog.wordpress.com/2016/10/12/angular2-template-parse-errors-add-custom_elements_schema-to-the-ngmodule-schemas/
I copied your code and did not face the error you faced. However, the variable p used is actually an event and not a number[].
Replace the table and pagination-control element as per below in app.component.html:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Genre</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let game of games | paginate: { itemsPerPage: 2, currentPage: p }">
<td>{{game.id}}</td>
<td>{{game.name}}</td>
<td>{{game.genre}}</td>
</tr>
</tbody>
</table>
<div>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>
Also, declaring p within app.component.ts isn't required as its the paginationApi that gets used internally.
Side note: The error you are getting suggests that the ngx-pagination is not installed successfully. Please check if you have the ngx-pagination folder copied within your project's node_modules folder successfully.
Demo: https://angular-ijtgcv.stackblitz.io
Try changing the order of "import {NgxPaginationModule} from 'ngx-pagination';"
in app.module.ts
It works out for me
after importing NgxPaginationModule to app.module.ts and stop the local server 'npm update' worked for me !

Edit and save a document using Flask and Mongodb

#app.route('/edit_book/<id>', methods=['POST', 'GET'])
def edit_book_id(id):
books = connexion.db.books
item = books.find_one({'_id': ObjectId(id)})
if request.method == 'GET':
if session['username'] is not None:
return render_template('edit_book.html', username=session['username'], mybooks=item)
books.update_one({"id": id},
{
"$set": {"title": request.form.get('title'),
"author": request.form.get('author'),
"edition": request.form.get('edition'),
"price": request.form.get('price'),
"image": request.files.get('image'),
"date": datetime.datetime.utcnow()
}
})
return 'Updated, success'
The html file:
<form action="" method="POST" enctype=multipart/form-data>
<h2>Title</h2>
<input type="text" name="title" size="60" value="{{mybooks.title}}"><br>
<h2>Author</h2>
<input type="text" name="author" size="60" value="{{mybooks.author}}"><br>
<h2>Edition</h2>
<input type="text" name="edition" size="60" value="{{mybooks.edition}}"><br>
<h2>Price</h2>
<input type="text" name="price" size="60" value="{{mybooks.price}}"><br>
<h2>Upload </h2>
<input type="file" name="image"/><br>
<br>
<input type="submit" value="Submit">
</form>
I use a form to edit a document from the Mongodb database. I can edit the document with the GET method but the problem is with the POST method, I can't update the document. I'm new in Flask.
I think I can't get the fields back after editing.
books.update_one({"_id": ObjectId(id)},
{ "$set": {
"title": request.form.get('title'),
"author": request.form.get('author'),
"edition": request.form.get('edition'),
"price": request.form.get('price'),
"image": request.files.get('image'),
"date": datetime.datetime.utcnow()
}
})
Forgot ObjectId(id)

Schema markup for logo

I have this markup for Dentist https://schema.org/Dentist
<div itemscope itemtype="http://schema.org/Dentist">
// address is ok
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">asdfd sf412</span>
<span itemprop="postalCode">12345</span>
<span itemprop="addressLocality">sadfsdf</span>
</span>
// this fails
<span itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
<meta itemprop="url" content="logo.gif'; ?>" />
</span>
</div>
When trying to test code for itemprop="logo" https://schema.org/logo
Google testing gives me error: "A value for the url field is required."
What am I missing?
I don't want logo to be visible on page, thats why I have put it as meta.
The error in Google’s SDTT is about the Dentist item, not about the ImageObject item. You can see this from the nesting level, the url row is on the same level as logo and address.
So adding a url property to the Dentist item would get rid of the error.
<div itemscope itemtype="http://schema.org/Dentist">
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">asdfd sf412</span>
<span itemprop="postalCode">12345</span>
<span itemprop="addressLocality">sadfsdf</span>
</span>
<span itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="logo.gif" />
</span>
<link itemprop="url" href="http://example.com/" />
</div>
I changed the meta to link, because HTML5 and Microdata require that you use link (instead of meta) if the value is a URI.
Just in case if you are looking for a JSON-LD format, look over the below code and give it a shot.
"publisher": {
"#type": "Organization",
"name": "Lokaci",
"url": "https://lokaci.com",
"logo": {
"#type": "ImageObject",
"url": "https://res.cloudinary.com/lokaci/image/upload/v1580448186/logo/lokaci_logo_black-corp-comp_nzkooj.png"
}
},
Here is the full code if you wanna have a look, the schema micro-data was about a news article.
------------------full JSON-LD format below ----------------
{
"#context": "https://schema.org",
"#type": "NewsArticle",
"url": "https://lokaci.com/news/Diwali-Countdown-Offer-A-Brothers-Gift",
"publisher": {
"#type": "Organization",
"name": "Lokaci",
"url": "https://lokaci.com",
"logo": {
"#type": "ImageObject",
"url": "https://res.cloudinary.com/lokaci/image/upload/v1580448186/logo/lokaci_logo_black-corp-comp_nzkooj.png"
}
},
"dateline": "Laxminagar Delhi, 26 October 2019",
"headline": "Diwali Countdown Offer: A Brother’s Gift",
"mainEntityOfPage": "https://lokaci.com/newsroom",
"author": {
"#type": "Organization",
"name": "Lokaci",
"logo": "https://res.cloudinary.com/lokaci/image/upload/v1580448186/logo/lokaci_logo_black-corp-comp_nzkooj.png"
},
"image": "https://res.cloudinary.com/lokaci/image/upload/v1575284148/Newsroom/A-One-Salon-Lokaci-wins-Oppo-phone_dfvzdl.jpg",
"datePublished": " 26 October 2019",
"dateModified": " 26 October 2019",
"wordCount": 165,
"keywords": "Lokaci, News"
}

Google Custom Search Engine Schema.org structured data and returned results through API

Here is my markup with rich snippets
<div vocab="http://schema.org" typeof="GovernmentOrganization">
<p>
<span property="logo"><img src="http://www.place.com/image.png" class="logo"/></span>
<span class="h2" property="name">Department Of Stuff And Things</span><br />
<span class="h4" property="department">State Agency</span><br />
http://www.place.com
</p>
<strong>Locations:</strong><br /><br />
<div property="location" typeof="GovernmentOffice">
<p property="location" typeof="PostalAddress">
Main Office<br />
<span property="streetAddress">555 Something Street Apt 2</span><br />
<span property="addressLocality">Jacksonville</span>
<span property="addressRegion">FL</span>
<span property="postalCode">11111</span><br />
<span property="addressCountry">US</span>
</p>
</div>
<strong>Services:</strong><br /><br />
<div property="hasOfferCatalog" typeof="OfferCatalog">
<div property="itemListElement" typeof="GovernmentService">
<p>
<strong><span property="name">Service 1</span></strong><br />
<span property="category">Web Based</span><br />
<span property="description">Get Some stuff and things</span><br />
https://www.place.com/Service1<br />
</p>
</div>
<div property="itemListElement" typeof="GovernmentService">
<p>
<strong><span property="name">Apply For Benefits</span></strong><br />
<span property="category">Phone Based</span><br />
<span property="description">This service helps you apply for the benefits you deserve</span><br />
https://www.place.com/Service1<br />
</p>
</div>
</div>
The structured data testing tool seems to organize and validate everything appropriately, Including my small collection of services (OfferCatalog). When doing a request to the Custom Search API and tacking on the :more:pagemap:GovernmentOrganization things seem to be OK and I get results I expect. But the JSON object for pagemap only includes the first level of my organization:
"pagemap": {
"GovernmentOrganization": [
{
"name": "Department Of Stuff And Things",
"department": "State Agency",
"url": "http://www.place.com"
},
Any ideas on why my related objects (GovernmentOffice / locations / OfferCatalog / GovernmentServices) are not being including? Is there a better way to organize and structure this for Google?
Consider this approach. Include the following JSON-LD script in the document. It can go anywhere but consider placing it before the RDFa DIV:
<script type="application/ld+json" id="">
{
"#context":
{
"#vocab": "http://schema.org/",
"#base": "http://www.place.com/"
},
"#graph": [
{
"#id": "_:ub220bL18C41",
"#type": "PostalAddress",
"addressCountry": "US",
"addressLocality": "Jacksonville",
"addressRegion": "FL",
"postalCode": "11111",
"streetAddress": "555 Something Street Apt 2"
},
{
"#id": "_:ub220bL4C1",
"#type": "GovernmentOrganization",
"department": "State Agency",
"hasOfferCatalog": {
"#id": "_:ub220bL6C40"
},
"location": {
"#id": "_:ub220bL17C33"
},
"logo": "",
"name": "Department Of Stuff And Things",
"url": "http://www.place.com"
},
{
"#id": "_:ub220bL17C33",
"#type": "GovernmentOffice",
"location": {
"#id": "_:ub220bL18C41"
}
},
{
"#id": "_:ub220bL6C40",
"#type": "OfferCatalog",
"itemListElement": [
{
"#id": "_:ub220bL12C17"
},
{
"#id": "_:ub220bL7C48"
}
]
},
{
"#id": "_:ub220bL12C17",
"#type": "GovernmentService",
"category": "Web Based",
"description": "Get Some stuff and things",
"name": "Service 1",
"url": "https://www.place.com/Service1"
},
{
"#id": "_:ub220bL7C48",
"#type": "GovernmentService",
"category": "Phone Based",
"description": "This service helps you apply for the benefits you deserve",
"name": "Apply For Benefits",
"url": "https://www.place.com/Service2"
}
]
}
</script>
You'll want to change #base to your site and decide how to organize your directory structure to manage your identifiers. Then change each blank node to the appropriate identifier. Then minimize the JSON-LD.
The JSON-LD is semantically identical to the RDFa. As such, you will be able to analyze the Google pagemap and decide which strategy works better for you. I don't expect Google to penalize the page if the JSON-LD is semantically identical to the HTML/RDFa markup.
As per the Google:
I believe you are seeing only one value of a attribute in JSON API.
I would like to update you that as per the design in JSON API we show only one attribute value, while in XML we show all values.
We already have a feature request #16696973 to display all the attribute values in JSON API. Currently I don't have an ETA when it will be implemented.
As a workaround you have to use XML API.