I'm experimenting with React and want to display a list of Fontawesome icons.
I have a JSON file that has the data set about as such:
{
"icons": [
{
"name": "Glass",
"id": "glass",
"unicode": "f000",
"created": 1,
"filter": [
"martini",
"drink",
"bar",
"alcohol",
"liquor"
],
"categories": [
"Web Application Icons"
]
},
etc
I can iterate through this and return and print each point of data, but can't figure out how to display the actual icons.
I have tried using unicode as such:
return(
<div>
<ul>
<li>
<span>{data.name}</span>
<i className="fa">{data.unicode}</i>
</li>
</ul>
</div>
)
But it just prints the unicode value.
Would anyone know if it's possible to render the icon this way?
Convert the number to a string first, by calling String.fromCharCode.
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.
I'm new to React and for the life of me cannot figure this out.
I have a JSON file (Fontawesome icons):
{
"icons": [
{
"name": "Glass",
"id": "glass",
"unicode": "f000",
"created": 1,
"filter": [
"martini",
"drink",
"bar",
"alcohol",
"liquor"
],
"categories": [
"Web Application Icons"
]
},
{
"name": "Music",
"id": "music",
"unicode": "f001",
"created": 1,
"filter": [
"note",
"sound"
],
"categories": [
"Web Application Icons"
]
},
// etc
To start with I just want to return the name of each icon.
I've been trying to follow various tutorials and have:
import React, { PureComponent } from "react";
import iconList from './services/iconList';
export default class App extends PureComponent {
render() {
const items = iconList.map(data=>{
return(
<div>
<ul>
<li>
<span>{data.name}</span>
</li>
</ul>
</div>
)
})
return items;
}
}
But I get the error: .map is not a function.
I'm not sure what I can do differently. Each tutorial I see seems to use the map function. Is there a better/different way?
Try using
const items = iconList.icons.map(data=>{
Your data is an object with an icons property in it. You can also destructure your iconList when you import:
import {icons as iconList } from './services/iconList';
I have some paths in a react file that look like this:
import azureIcon from './azure.png';
import dropboxIcon from './dropbox.png';
I also have a separate JSON file that looks like this:
{
"posts": [
{
"id": 1,
"name": "azure",
"description": "blah blah",
"icon": "azureIcon"
},
{
"id": 2,
"name": "dropbox",
"description": "blah blah",
"icon": "dropboxIcon"
}
]
}
Is it possible to have it identify the variable like this? Or will it not work because currently the value of "icon" is set to a string value? What would be a good way to approach this?
Thank you!
It is impossible to do this directly, but you could do something like
const icons = { azureIcon, dropboxIcon };
const MyComponent = () => {
return (
<div>
{posts.map(post => (
/*or w/e the correct way to normally render it is*/
<img src={icons[post.icon]} />
)}
</div>
)
}
I would suggest to place images in public accessible folder. Here is example from create-react-app docs section in case you use it.
So to simplify your code you can use such approach:
Place icons in public accessible folder (let`s say we have icons folder inside)
Update your config
const posts = [
{
"id": 1,
"name": "azure",
"description": "blah blah",
"icon": "azure.png"
},
{
"id": 2,
"name": "dropbox",
"description": "blah blah",
"icon": "dropbox.png"
}
]
Show icons in such manner
const Component = (posts) => (
<React.Fragment>
{posts.map(post => <img
key={post.id}
src={process.env.PUBLIC_URL + `/icons/${post.icon}`}
/>}
</React.Fragment>
)
If I have to use icons as images I would choose the way #Kison suggests.But it is nice if you could font awesome, here it is showed how to install/import font awesome https://fontawesome.com/start and you can search icon here https://fontawesome.com/icons?d=gallery and all you have to do is paste the website says html code it is like following:
<i class="fab fa-accusoft"></i> this will render azure icon and
<i class="fab fa-dropbox"></i> this will render dropbox icon.
Here these are two icons' links:
(azure icon) https://fontawesome.com/icons/accusoft?style=brands
(dropbox icon) https://fontawesome.com/icons/dropbox?style=brands
I have multiple level json that need to show using ng-repeat but i am getting issues
JSON
$scope.product = {
"product": [
{
"name": "0001",
"tagline": "Scrub peached 60% cot 40% poly\r\ns/s v neck scrub uniform w/ 1 chest pkt"
}
],
"sizes": [
"XXL",
"XXXL",
"XS",
"XL",
"S",
"M",
"L"
],
"colors": [
{
"name": "WHITE",
"image": "/kalypso/commonsController.do?param=imageLoader&imageName=1239378389537_white1.JPG"
}
],
"images": [
{
"big": "/kalypso/commonsController.do?param=imageLoader&imageName=2010_08/1281620375516_UT01.jpg",
"small": [
"/kalypso/commonsController.do?param=imageLoader&imageName=2009_07/D0001-b.jpg"
],
"thumb": "/kalypso/commonsController.do?param=imageLoader&imageName=2010_08/1281620375516_UT01.jpg"
}
]
}
AngularJS
$scope.productsImages = $scope.product.images[0].thumb;
$scope.productsImgSmall = $scope.product.images[0].small;
$scope.productsImgBig = $scope.product.images[0].big;
$scope.productsColors = $scope.product.colors[0].cname;
$scope.productsColorsImages = $scope.product.colors[0].image;
$scope.productsSizes = $scope.product.sizes;
$scope.productsName = $scope.product.product[0].name;
$scope.productsTag = $scope.product.product[0].tagline;
$scope.productsPrice = $scope.product.product[0].price;
$scope.productsId = $scope.product.product[0].prdId;
console.log($scope.productsColors);
It is repeating the color name each word and if array length is zero I am getting duplicate error messages. Please help on this.
Error: [ngRepeat:dupes] http://errors.angularjs.org/1.3.0/ngRepeat/dupes?p0=color%20in%20productsColors&p1=string%3AT&p2=%22T%22
i would look into track by $index if you do not have a unique id on your json object
item in items track by $id(item)
or
item in items track by $index
if you want angular to deal with it
instead of array [i] value use like this
$scope.productsImages = $scope.product.images;
HTML
<ul>
<li ng-repeat="prd in productsImages">
{{prd.thumb}}
</li>
</ul>
use repeat function for all key
another Example
$scope.data.colors = $scope.product.colors
<ul>
<li ng-repeat="color in product.colors">
{{color.name}}
{{color.image}}
</li>
</ul>
Here is my code to select the country based on ng-options and get tabs based on ng-repeat:
<select ng-model="country" ng-options= "countryName.country for countryName in countryNames" ng-change="getCountry()">
</select>
<ul id="configPhoneTab" class="nav nav-tabs equipmentTab agenttabs">
<li class="active" ng-repeat= "configTab in config" val="configTab[0]">
{{configTab.tabs}}
</li>
</ul>
My tabs in the json file is
[
{
"country": "India",
"tabs": [
{
"title": "India Number",
"type": [
"VOICE",
"FAX",
"VN"
],
"carrier": "L3",
},
{
"title": "Toll Free",
"type": [
"TF"
],
"carrier": "L3",
}
]
},
{
"country": "Aus",
"tabs": [
{
"title": "Aus Number",
"type": [
"VOICE",
"FAX",
"VN"
],
"carrier": "L3",
},
{
"title": "Toll Free",
"type": [
"TF"
],
"carrier": "L3",
}
]
}
How can I retrieve the tabs title from json based on country selection?
You could use a third-party library like [underscorejs] (website address) and retrieve the desired data using some of it's functions for example _.where(...) if '_.fined(...)'
the pivot which your search will be based on would be the $scope.country which in bound to your <select> tag (<select ng-model="country" ng-options= ...)
sorry I cannot provide any working demos right away as I'm answering from a mobile device.
Hope it helped.