I am doing a college project. In category page there will be product categories coming from json-
[{
"code": "mc",
"name": "Mobile",
"desc": "We provide range of latest mobile phones with best price in the market",
"imageUrl": "images/mobile.jpg"
},
{
"code": "lc",
"name": "Laptops",
"desc": "Huge sale is going on Lenova,HP and Apple's laptop",
"imageUrl": "images/lappy.jpg"
},
{
"code": "ic",
"name": "ipads",
"desc": "ipad mini is available with the cheapest price.Go grab the offer",
"imageUrl": "images/ipad.jpg"
},
{
"code": "sc",
"name": "Storage Devices",
"desc": "All kind of storage devices are available here",
"imageUrl": "images/storage.jpg"
}
]
As the category list is dynamic for eg 4, trying to build up link to list page depends on the category based on code data in JSON. For example if click on mobile in category.html, result.html will be mobile list, if iPad then iPad list. Right now category page done and trying to pass and receive code in JSON to compare in condition to display concerned data like laptop or desktop.
Present js is:
var catApp = angular.module("catApp", ["ngStorage"]);
catApp.controller('CountryCtrl', function ($scope, $http, $localStorage){
$http.get('categories.json').success(function(data) {
$scope.categories = data;
});
$scope.save = function() {
window.location.replace('result.html');
$scope.type=categories;
if(type.code=='mc'){
localStorage.setItem('msg1', 'Mobiles');
}
$scope.data1 = localStorage.getItem('msg1');
});
to display it on result.html-
<body ng-app="catApp">
<div ng-controller="CountryCtrl">
{{data1}}
</div>
</body>
Please help me to display product name in result.html comparing the 'code' from the json.
In short want to display category name in result.html depends on which category user click where category also dynamic coming from json with a fag value code to make it work like-
freshtechsample.tk/pal/test.html
Only difference is in above html links are static, in required page links are dynamic.
Present output:http://freshtechsample.tk/pal/category.html
Related
I have created a ReactJS application which can display the data of a restaurant menu from an API and it is working properly.
I have added a function to filter the data with left menu according to the category (for example if I want to see only items with category Pizza items I will click on Pizza, if I want to view only items with category Juices then on Juices).
So what I have done for my left menu is that I have written down all the categories and made use of a function to filter the data which makes me change the left menu whenever the API categories change.
Now I want to get the categories list in the left menu from my API so that I don't need to change the left menu every time I change the API.
How can I make changes in my code based on the requirement I have so that I can achieve the functionality I want.
My API data is in this way:
[
{
"Name": "Chicken pizza",
"Category": "Pizza",
"Type": "non-veg",
"Price": 376,
"id": "1"
},
{
"Name": "Paneer Cheese Pizza",
"Category": "Pizza",
"Type": "veg",
"Price": 350,
"id": "2"
},{
"Name": "Orange Juice",
"Category": "Juices",
"Type": "veg",
"Price": 45,
"id": "3"
},
{
"Name": "Badam Fruit Mix",
"Category": "Juices",
"Type": "veg",
"Price": 50,
"id": "4"
},
{
"Name": "Vanilla Icecream",
"Category": "Ice Creams",
"Type": "veg",
"Price": 50,
"id": "5"
}
]
Now the functionality I added to filter data using the side menu is this:
const filterItem = (category) =>{
const updatedItems = mainArray.filter((curcategory)=>{
return curcategory.Category === category;
})
setData(updatedItems);
}
<ul>
<li onClick={()=>setData(mainArray)}>All</li>
<li onClick={()=>filterItem("Pizza")}>Pizza</li>
<li onClick={()=>filterItem("Bread")}>Bread</li>
<li onClick={()=>filterItem("Shakes")}>Shakes</li>
<li onClick={()=>filterItem("Ice-Cream")}>Ice Cream</li>
<li onClick={()=>filterItem("Cakes")}>Cakes</li>
<li onClick={()=>filterItem("Juices")}>Juices</li>
</ul>
From here what are the I have to make so that I can display the categories of the items from API without the need to write it down myself.
I have created an array in this way for the categories:
const allCategory = ["All", ...new Set(filteredData.map((curElem)=> curElem.Category ))];
console.log(allCategory);
Now what are things I have to implement to achieve the functionality so that I can display the categories of the API in the left menu in my application. Guide me with whatever the knowledge you have which can help me overcome this problem and find the solution I'm searching for.
I'll give my sandbox link of my application for clear understanding of my code.
https://codesandbox.io/s/qr-menu-smvr6h?file=/src/App.js
I want to change my left menu from hardcoding and get the categories list from API.
Hello there so today I have this confusion on how to dynamically render more select dropdown options.
The scene is during a form submittion user has to select a category and if he select a category having sub category I have to render the next select dropdown. The data I get from api looks like this.
{
"id": "f35dc7d2-755e-4531-981b-6862bbb97512",
"name": "Mobile & Accesories",
"image": null,
"categories": [
{
"id": "d038c127-d3f8-47f6-a47b-0f4b625e8caf",
"name": "Handsets",
"image": null,
"categories": [
{
"id": "ab46c001-7d8e-4784-99de-eb26f67dc4e2",
"name": "Smartphone",
"image": "",
"categories": []
}
]
}
]
}
So at last, if there are no inner categories the final one's id should be used to send to the api.
I know working with react hooks so it would be helpful if I can get some help or the logics to accomplish this task.
You can Create those Dynamic Dropdowns using Recursion for the Same Component.
Here is the Code Sandbox demo from the API Data you have given:
https://codesandbox.io/s/gifted-paper-4cu6l?file=/src/SimpleSelect.js
I am working on a large site and want to implement JSON-LD. The site has a large social media following and a lot of artist profiles and articles.
This is what I currently have, (the following code is from Google's guidelines)
Front page
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "Organization",
"name": "Organization name",
"url": "http://www.your-site.com",
"sameAs": [
"http://www.facebook.com/your-profile",
"http://instagram.com/yourProfile",
"http://www.linkedin.com/in/yourprofile",
"http://plus.google.com/your_profile"
]
}
</script>
Content pages
<script type='application/ld+json'>
{
"#context": "http://www.schema.org",
"#type": "WebSite",
"name": "About us",
"url": "http://www.your-site.com/about-us"
}
</script>
Profile pages of each artist:
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "NewsArticle",
"mainEntityOfPage": {
"#type": "WebPage",
"#id": "https://google.com/article"
},
"headline": "Article headline",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00",
"author": {
"#type": "Person",
"name": "John Doe"
},
"publisher": {
"#type": "Organization",
"name": "Google",
"logo": {
"#type": "ImageObject",
"url": "https://google.com/logo.jpg"
}
},
"description": "A most wonderful article"
}
</script>
Do I add one script tag per page or do I add all JSON-LD under one script tag? On the front page I have the "Organization" tag and show the social media links, do I add this on all pages?
You may have multiple script JSON-LD data blocks on a page, but using one script element makes it easier to connect the structured data entities: you can nest entities instead of having to reference their URIs.
What to connect? Your NewsArticle can
provide the WebPage¹ entity as value for the mainEntityOfPage property, and
provide the Organization entity as value for the publisher property.
This is only one possibility. Another one: You could provide the WebPage entity as top-level item and provide the NewsArticle entity as value for the mainEntity property.
If you have to duplicate data (for example, because the Organization is author and publisher, or because it’s the publisher of both, the WebPage and the NewsArticle), you can mix nesting and referencing. Give each entity an #id and wherever you provide this entity as value, also provide its #id.
¹ You are using WebSite, but you probably mean WebPage. Also note that the #context should be http://schema.org, not http://www.schema.org.
I want to loop through an array of objects in angular 4 , I use a .ts file to export array as a variable in posts.ts
export var posts = [
{
"name":"art",
"title":"Art",
"items":[
{
"id": "1",
"title":"Tooling Up",
"author":"Amber Bravo",
"date":"June 14 2015",
"primaryColor":"#5a7785",
"secondaryColor":"#455a64",
"image":"https://g-design.storage.googleapis.com/production/v5/assets/tooling-up-header-a13cfd9a.svg",
"desc":"How a new generation of prototyping tools at Google will help designers build better software.",
"content":"# content goes here"
},
{
"id": "2",
"title":"Expressing Brand in Material",
"author":"Viktor Persson & Rachel Been",
"date":"July 4 2015",
"primaryColor":"#202226",
"secondaryColor":"#333",
"image":"https://g-design.storage.googleapis.com/production/v5/assets/article_brand_2x1_202226-fc539618.svg",
"desc":"Material design offers a system for designing functional and elegant software. How does your brand fit into the framework? We’ve created a step-by-step guide to staying on-brand while going material.",
"content":"# content goes here"
},
{
"id": "3",
"title":"New Design Tools",
"author":"Amber Bravo",
"date":"July 29 2015",
"primaryColor":"#3e50b4",
"secondaryColor":"#303fc3",
"image":"https://g-design.storage.googleapis.com/production/v5/assets/150727_GD_Article_ToolingUpFurther_1x1Tile-01-86c8e03e.svg",
"desc":"See Also: (More) thoughts on design tools",
"content":"# content goes here"
}
]
},
{
"name":"film",
"title":"Film",
"items":[
{
"id": "1",
"title":"Design from iOS to Android (and Back Again)",
"author":"Roman Nurik & Viltor Persson",
"date":"Aug 20 2015",
"primaryColor":"#3e50b4",
"secondaryColor":"#303F9F",
"image":"https://g-design.storage.googleapis.com/production/v5/assets/renditions/Article_iOS_to_Android_Header_3e50b4-f064882f-1240.png",
"desc":"A practical guide to designing across platforms",
"content":"# content goes here"
},
{
"id": "2",
"title":"Demystifying Density",
"author":"Sebastien Gabriel",
"date":"July 10 2015",
"primaryColor":"#00ccb8",
"secondaryColor":"#00b7a5",
"image":"https://g-design.storage.googleapis.com/production/v5/assets/article_dpi_00ccb8-34fdd39e.svg",
"desc":"Sebastien Gabriel takes one for the team with his exhaustive guide to DPI & PPI",
"content":"# content goes here"
},
{
"id": "3",
"title":"Pixate and Form 1.3",
"author":"Google Design",
"date":"May 30 2015",
"primaryColor":"#eeeeee",
"secondaryColor":"#9e9e9e",
"image":"https://g-design.storage.googleapis.com/production/v5/assets/pixate-and-form-1-3-header-2061f19f.svg",
"desc":"Discover the latest features and start designing native prototypes on your device.",
"content":"# content goes here"
},
{
"id": "4",
"title":"Welcome to the New Google Design",
"author":"Google Design",
"date":"Sep 10 2015",
"primaryColor":"#3367d6",
"secondaryColor":"#2755CC",
"image":"https://g-design.storage.googleapis.com/production/v5/assets/Article_Welcome_Header_2880-ce3ec22d.svg",
"desc":"More design, all the time",
"content":" # content goes here"
}
]
},
{
"name":"photography",
"title":"Photography",
"items":[]
},
{
"name":"design",
"title":"Design",
"items":[]
},
{
"name":"topten",
"title":"Top Ten",
"items":[]
},
{
"name":"aday",
"title":"A Day in the Life",
"items":[]
}
]
then I import it in app.componenet.ts normally with :
import { posts } from './posts';
now what I don't know is how to loop through it or how to load json file then loop through it I mean how to loop in html to display data inside the app.componenet.html
You have to pass this array to view.
#Component(...)
class AppComponent {
posts = posts;
...
And then in view you have to use *ngFor directive.
<ng-container *ngFor="let post of posts">
{{ post.title }}
</ng-container>
I have this model and I want to update the team value when I gather the correct info on a form submit but I'm not sure how to the specific team. I know in backbone I can use the model to get teams but I'm not sure how to then go from teams into the correct team using the code attribute?
I've tried:
// My new team to replace team in code EFU"
var newTeam: {
"id": "POS-876",
"name: "Swansea City"
}
var teams = this.model.get('teams');
var selectedTeam = teams.get('EFU'); // I know this is wrong
selectedTeam.set('team', newTeam);
I'm not sure how I target the correct team then update the team details?
Model
{
"id": "4V6",
"name": "Premier League",
"teams": [{
"code": "EFU",
"team": {
"id": "POS-1",
"name": "Manchester United"
}
}, {
"code": "BMD",
"team": {
"id": "POS-223",
"name": "Chelsea"
}
}]
}
Your Model is a bit confusing. Why is it wrapped in array brackets? And why are you getting 'exchanges' instead of 'teams'? And should perhaps teams be a collection instead of a simple array?
But in any case, to find the specific team, you can use Underscore.
var selectedTeam = _.findWhere(teams, {code: 'EFU'});