How do I dynamically route JSON in React?
Say the JSON is the code below:
[{ "id": 1,
"fullName": "Jenny Chan",
"address": "3 waterfoot road",
"phoneNumber": "333-962-7516",
"email": "jenny.chan#email.com"
},
{
"id": 2,
"fullName": "Jessica warren",
"address": "4 tall town",
"phoneNumber": "011-211-7516",
"email": "jessica.warren#email.com"
},
{
"id": 3,
"fullName": "Tony Frank",
"address": "11 lesly road",
"phoneNumber": "788-962-7516",
"email": "tony.frank#email.com"
},]
And in my table I have the three emails.
jenny.chan#email.com
jessica.warren#email.com
tony.frank#email.com
When I click on these emails I would like for them to dynamically route to each page.
How do I do this and then pass through the emails as destructured props so I can access the email information please???
Thanks
Related
Heys guys have some JSON data and API trying to figure out what the API would be to filter its category, currently only have 'food and items'. here the data.
{
"id": 1587428052314,
"_id": "5e9e5599a3f3e540e9c6553c",
"Title": "Home Cleaning Sanitiser Box",
"Description": "This box has everything you need - right now!"
"Phone": "021881821921",
"Category": "food"
}
Here is api: localhost:4000/api/user-listing/
Could I filter it somehow within my .then of promise chain?
Axios.get("localhost:4000/api/user-listing")
.then((res) => {
// in here ?? this.setState({ listings: res.data });
});
Cheers
There are multiple ways to do this as you expected. If you expect that one endpoint should exist to retrieve all the data with "Category": "food" there is nothing you can do about it with frontend tools (actually there are a couple of ways but they ain't come from backend anymore).
Problem illustration
So we suppose when we call localhost:4000/api/user-listing/ we will receive an array of objects which includes multiple objects with "Category": "food", then we suppose we have retrieved the following data from the above endpoint.
[{
"id": 1,
"_id": "5e9e5599a3f3e540e9c6553c-1",
"Title": "coke",
"Description": "This box has everything you need - right now!",
"Phone": "021881821921",
"Category": "drink"
},
{
"id": 2,
"_id": "5e9e5599a3f3e540e9c6553c-2",
"Title": "salmon",
"Description": "This box has everything you need - right now!",
"Phone": "021881821921",
"Category": "food"
},
{
"id": 3,
"_id": "5e9e5599a3f3e540e9c6553c-3",
"Title": "soda",
"Description": "This box has everything you need - right now!",
"Phone": "021881821921",
"Category": "drink"
},
{
"id": 4,
"_id": "5e9e5599a3f3e540e9c6553c-4",
"Title": "rice",
"Description": "This box has everything you need - right now!",
"Phone": "021881821921",
"Category": "food"
}
]
NOTE: I just made this example array of data for more illustration. You should replace it with your res.data in your code.
Filtering data
To get all the data with "Category": "food" we can simply do the following:
const arrayOfData = [{
"id": 1,
"_id": "5e9e5599a3f3e540e9c6553c-1",
"Title": "coke",
"Description": "This box has everything you need - right now!",
"Phone": "021881821921",
"Category": "drink"
},
{
"id": 2,
"_id": "5e9e5599a3f3e540e9c6553c-2",
"Title": "salmon",
"Description": "This box has everything you need - right now!",
"Phone": "021881821921",
"Category": "food"
},
{
"id": 3,
"_id": "5e9e5599a3f3e540e9c6553c-3",
"Title": "soda",
"Description": "This box has everything you need - right now!",
"Phone": "021881821921",
"Category": "drink"
},
{
"id": 4,
"_id": "5e9e5599a3f3e540e9c6553c-4",
"Title": "rice",
"Description": "This box has everything you need - right now!",
"Phone": "021881821921",
"Category": "food"
}
]
const newArray = arrayOfData.filter(data => data.Category === "food")
console.log(newArray)
UPDATE
So as you update the question if you want to deal with your data in .then it will be something like this:
Axios.get("localhost:4000/api/user-listing")
.then((res) => {
this.setState({
listing: res.data.filter(data => data.Category === "food")
})
});
js Developers
I am trying to create Rest api in node.js . I want to get data from two table in mysql database. First table is USERS which contain {id, name, email} and Second table is USERINFO which contain {id, mobile , address, user_id} here user_id is work as foreign key that is associate with USERS table. In USERINFO table more than one information.
First table Look like this
Second Table look like this
I got this type of output
[
{
"id": 1,
"name": "abc",
"email": "abc#xxx.com",
"mobile": "11111",
"address": "qqq",
"user_id": 1
},
{
"id": 2,
"name": "XYZ",
"email": "xyz#xxx.com",
"mobile": "22222",
"address": "wwwww",
"user_id": 2
},
{
"id": 3,
"name": "abc",
"email": "abc#xxx.com",
"mobile": "3333333",
"address": "ssssss",
"user_id": 1
},
{
"id": 4,
"name": "XYZ",
"email": "xyz#xxx.com",
"mobile": "444444",
"address": "nnnnn",
"user_id": 2
}]
But i want this type output
[
{
"id": 1,
"name": "abc",
"email": "abc#xxx.com",
"info": [
{
"mobile": "11111",
"address": "qqq",
},
{
"mobile": "3333333",
"address": "ssssss",
}
],
"user_id": 1
},
{
"id": 2,
"name": "XYZ",
"email": "xyz#xxx.com",
"info": [
{
"mobile": "22222",
"address": "wwwww",
},
{
"mobile": "444444",
"address": "nnnnn",
}
],
"user_id": 2
}]
Thanks in Advance
I wish to count members that has status='active' the JSON stream. This will equal the sum of our members.
I'm able to select all members by #/name, but I'm not able to filter on only those who are active.
According to Klipfolios documentation, it should be possible to count single elements:
[
{
"_id": "58aabc92e846502357fc0f69",
"email": "mail#me.com",
"name": "John Doe",
"office": "1122",
"phone": "555-555",
"status": "active",
},
{
"_id": "58aabc92e846502357fc0f69",
"email": "mail#me.com",
"name": "John Doe",
"office": "1122",
"phone": "555-555",
"status": "active",
},
{
"_id": "58aabc92e846502357fc0f69",
"email": "mail#me.com",
"name": "John Doe",
"office": "1122",
"phone": "555-555",
},
{
"_id": "58aabc92e846502357fc0f69",
"email": "mail#me.com",
"name": "John Doe",
"office": "1122",
"phone": "555-555",
}
]
COUNT(#/name;) counts all occurrences of name in the JSON stream.
How do I only count active members? Eg. where status = 'active'
How about this?
COUNT(#/name[status='active'];)
I'm making an API call and the response I'm getting is a rather large JSON string. I'd like to minimise API calls to a) avoid hitting the rate limit and b) speed things up.
Here's an example of my JSON data:
{
"firstName": "John",
"lastName": "Smith",
"isAlive": true,
"age": 25,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": "10021-3100"
},
"phoneNumbers": [
{
"type": "home",
"number": "212 555-1234"
},
{
"type": "office",
"number": "646 555-4567"
}
],
"children": [],
"spouse": null
}
My question:
What are my options with reference to persistent storage?
Please note: the API I'm using is in beta; so I'd like to avoid using MySQL for now because the JSON representation could change, resulting in my tables needing an overhaul.
I am using Firebase in order to do a Facebook auth, I would like to know how to display and access to the profile picture from the returned json which looks like this
{
"uid": "facebook:1419891304993631",
"provider": "facebook",
"facebook": {
"id": "1419891304993631",
"accessToken": "CAAJdUVn89vwBAKYZASyfcpTEeSNZApxJEy7xDoCe8M02xZBCJeW6bneWbPJiXYXo0Oe3BVt4hL4xmVkQG5DnQPUs4AeXf67vx2p5kXPvk0vgsB7EPWUhDQzDZAXa1JLdCZBaVhNDtv39dqyH24qwqVzTxKqH8DRPeSPqga5DjZBsAaqmhcaMyPNXZB26NPZA8RZCS8J0zZAmyO67Lq7W5y3der",
"displayName": "Aaron Hillel Swartz",
"email": "retana.marcelo#gmail.com",
"cachedUserProfile": {
"id": "1419891304993631",
"name": "Aaron Hillel Swartz",
"last_name": "Swartz",
"first_name": "Aaron",
"middle_name": "Hillel",
"gender": "male",
"link": "https://www.facebook.com/app_scoped_user_id/1419891304993631/",
"email": "retana.marcelo#gmail.com",
"picture": {
"data": {
"is_silhouette": false,
"url": "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xfp1/v/t1.0-1/s100x100/111…77b0ef39e0&oe=55A9B547&__gda__=1436644689_2ba73b2df6e584b46e5a2f8000d571d8"
}
},
"age_range": {
"min": 21
},
"locale": "es_LA",
"timezone": -6
}
},
"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2IjowLCJkIjp7InVpZCI6ImZhY2Vib29rOjE0MTk4OTEzMDQ5OTM2MzEiLCJwcm92aWRlciI6ImZhY2Vib29rIn0sImlhdCI6MTQyOTA4NTA4OH0.ec-5bS1-sTSUfeBwDZRwncZxuABrHwnlIQY5eLYxQBQ",
"auth": {
"uid": "facebook:1419891304993631",
"provider": "facebook"
},
"expires": 1429171488
}
example, with this
<div ng-bind="user.uid"></div>
I can display de user uid which is facebook:1419891304993631 in this case, so, with angular, how can I access to the profile picture property ?
Is there a way to use like a kind of ng-src for this?