Fetch JSON data that has multiple pages? - javascript

I'm making a fetch to the API to grab the total number of players, the returned data is below:
"data": [
{
"id": 558,
"first_name": "Dave",
"height_feet": null,
"height_inches": null,
"last_name": "Jamerson",
"position": "",
"team": {
"id": 11,
"abbreviation": "HOU",
"city": "Houston",
"conference": "West",
"division": "Southwest",
"full_name": "Houston Rockets",
"name": "Rockets"
},
"weight_pounds": null
},
{
"id": 559,
"first_name": "Scott",
"height_feet": null,
"height_inches": null,
"last_name": "Brooks",
"position": "",
"team": {
"id": 18,
"abbreviation": "MIN",
"city": "Minnesota",
"conference": "West",
"division": "Northwest",
"full_name": "Minnesota Timberwolves",
"name": "Timberwolves"
},
"weight_pounds": null
},
{
"id": 560,
"first_name": "Rolando",
"height_feet": null,
"height_inches": null,
"last_name": "Blackman",
"position": "",
"team": {
"id": 7,
"abbreviation": "DAL",
"city": "Dallas",
"conference": "West",
"division": "Southwest",
"full_name": "Dallas Mavericks",
"name": "Mavericks"
},
"weight_pounds": null
},
{
"id": 561,
"first_name": "Avery",
"height_feet": null,
"height_inches": null,
"last_name": "Johnson",
"position": "",
"team": {
"id": 8,
"abbreviation": "DEN",
"city": "Denver",
"conference": "West",
"division": "Northwest",
"full_name": "Denver Nuggets",
"name": "Nuggets"
},
"weight_pounds": null
},
{
"id": 562,
"first_name": "Rod",
"height_feet": null,
"height_inches": null,
"last_name": "Higgins",
"position": "",
"team": {
"id": 10,
"abbreviation": "GSW",
"city": "Golden State",
"conference": "West",
"division": "Pacific",
"full_name": "Golden State Warriors",
"name": "Warriors"
},
"weight_pounds": null
},
{
"id": 566,
"first_name": "Sam",
"height_feet": null,
"height_inches": null,
"last_name": "Vincent",
"position": "",
"team": {
"id": 22,
"abbreviation": "ORL",
"city": "Orlando",
"conference": "East",
"division": "Southeast",
"full_name": "Orlando Magic",
"name": "Magic"
},
"weight_pounds": null
},
{
"id": 567,
"first_name": "Isiah",
"height_feet": null,
"height_inches": null,
"last_name": "Thomas",
"position": "",
"team": {
"id": 9,
"abbreviation": "DET",
"city": "Detroit",
"conference": "East",
"division": "Central",
"full_name": "Detroit Pistons",
"name": "Pistons"
},
"weight_pounds": null
}
],
"meta": {
"total_pages": 39,
"current_page": 1,
"next_page": 2,
"per_page": 100,
"total_count": 3828
}
Problem is, the API only allows for a max of 100 results. As you can see in the "meta" object at the bottom, there is a total_count of 3828 and 39 pages, how would I access the other pages and get all 3828 results? currently I only get the first page with 100 results when I fetch.
const getPlayers = () => {
fetch(`https://www.balldontlie.io/api/v1/players?per_page=100`)
.then(res => res.json())
.then(data => dispatch(playerActions.getPlayers(data)));
}

Related

How to avoid overwriting of a JSON object in React?

I'm comparing two JSON and returning mismatched values from the second JSON with a key and storing them in a new JSON object. I'm using a loop for comparing two JSON objects. If there is more than one difference, it is overwritten by the previous object stored. Can you please tell me how to resolve it?
var finalOutputJson;
let jsonOutput1 = {},
jsonOutput2 = {};
for (let i of jsonData1) {
var d = jsonData2.filter(
(data) => data.Unique == i.Unique
);
if (d != []) {
let keys = Object.keys(i);
for (let j of keys) {
if (j == "Title") {
if (i[j] != d[0]["Name"].Title) {
jsonOutput1 = { [j]: d[0]["Name"].Title };
console.log(jsonOutput1);
}
} else if (i[j] != d[0][j]) {
jsonOutput2 = { [j]: d[0][j] };
console.log(jsonOutput2);
}
[![jsonOutput1][1]][1]
inputJsonData1 :-
[
{
"Title": "Ankit Singh1",
"Aadhar_x0020_Nuber": 999941057058,
"Age": 54,
"Gender": "M",
"Phone": 2810806979,
"Father_x0020_Name": "Mr. Choudhury",
"Email": "sschoudhury#dummyemail.com",
"City": "New Delhi",
"State": "New delhi"
},
{
"Title": "Munendra",
"Aadhar_x0020_Nuber": 999971658847,
"Age": 44,
"Gender": "M",
"Phone": 2314475929,
"Father_x0020_Name": "Mr. Agarwal",
"Email": "kma#mailserver.com",
"City": "Udaipur",
"State": "Rajasthan"
},
{
"Title": "Mayank Sharma3",
"Aadhar_x0020_Nuber": 999933119405,
"Age": 79,
"Gender": "F",
"Phone": 2837032088,
"Father_x0020_Name": "Mr. Bedi",
"Email": "bedi2020#mailserver.com",
"City": "Bareilly",
"State": "Uttar Pradesh"
},
{
"Title": "Shikhar Saxena5",
"Aadhar_x0020_Nuber": 999955183433,
"Age": 37,
"Gender": "M",
"Phone": 2821096353,
"Father_x0020_Name": "Mr. Pandey",
"Email": "rpandey#mailserver.com",
"City": "Mumbai",
"State": "Maharastra"
},
{
"Title": "Namita Rastogi",
"Aadhar_x0020_Nuber": 999990501894,
"Age": 40,
"Gender": "F",
"Phone": 2821096350,
"Father_x0020_Name": "Mr. Kapoor",
"Email": "anisha#gmail.com",
"City": "Bangalore",
"State": "Karnataka"
}
]
inputJsonData2:-
[
{
"odata.type": "SP.Data.Aadhar_x005f_DataListItem",
"odata.id": "1a8bda26-b339-4e95-a42e-cf8b15aa571c",
"odata.etag": "\"3\"",
"odata.editLink": "Web/Lists(guid'f57b8a37-9a12-48fa-ae4a-f2c360611fd2')/Items(1)",
"Name#odata.navigationLinkUrl": "Web/Lists(guid'f57b8a37-9a12-48fa-ae4a-f2c360611fd2')/Items(1)/Name",
"Name": {
"odata.type": "SP.Data.UserInfoItem",
"odata.id": "e0fc5839-8528-460f-9a97-735b3e676870",
"Title": "Ankit Singh"
},
"FileSystemObjectType": 0,
"Id": 1,
"ServerRedirectedEmbedUri": null,
"ServerRedirectedEmbedUrl": "",
"ID": 1,
"ContentTypeId": "0x0100CAEC71E55732C14BA36095D2FA8E6CA80037B4C7B1E7CFFA4D83E55D30CD77AC99",
"Title": null,
"Modified": "2022-06-07T09:31:14Z",
"Created": "2022-06-02T08:15:05Z",
"AuthorId": 1282,
"EditorId": 1282,
"OData__UIVersionString": "3.0",
"Attachments": false,
"GUID": "c27f786a-8599-400c-b284-f7bec308a861",
"ComplianceAssetId": null,
"Aadhar_x0020_Nuber": 999941057058,
"NameId": 1282,
"NameStringId": "1282",
"Age": 54,
"Gender": "M",
"Phone": 2810806979,
"Father_x0020_Name": "Mr. Choudhury",
"Email": "sschoudhury#dummyemail.com",
"City": "New Delhi",
"State": "New delhi"
},
{
"odata.type": "SP.Data.Aadhar_x005f_DataListItem",
"odata.id": "bbb3d19c-5fae-463b-993a-08e3665f4997",
"odata.etag": "\"2\"",
"odata.editLink": "Web/Lists(guid'f57b8a37-9a12-48fa-ae4a-f2c360611fd2')/Items(2)",
"Name#odata.navigationLinkUrl": "Web/Lists(guid'f57b8a37-9a12-48fa-ae4a-f2c360611fd2')/Items(2)/Name",
"Name": {
"odata.type": "SP.Data.UserInfoItem",
"odata.id": "f9f74da9-4aba-4cdc-8e4f-2985883c4602",
"Title": "Munendra"
},
"FileSystemObjectType": 0,
"Id": 2,
"ServerRedirectedEmbedUri": null,
"ServerRedirectedEmbedUrl": "",
"ID": 2,
"ContentTypeId": "0x0100CAEC71E55732C14BA36095D2FA8E6CA80037B4C7B1E7CFFA4D83E55D30CD77AC99",
"Title": null,
"Modified": "2022-06-16T06:40:16Z",
"Created": "2022-06-02T08:17:48Z",
"AuthorId": 1282,
"EditorId": 1282,
"OData__UIVersionString": "2.0",
"Attachments": false,
"GUID": "afb84bd6-0253-4bf8-a515-824b13ae1a4e",
"ComplianceAssetId": null,
"Aadhar_x0020_Nuber": 999971658847,
"NameId": 107,
"NameStringId": "107",
"Age": 44,
"Gender": "F",
"Phone": 2314475929,
"Father_x0020_Name": "Mr. Agarwal",
"Email": "kma#mailserver.com",
"City": "Udaipur",
"State": "Rajasthan"
},
{
"odata.type": "SP.Data.Aadhar_x005f_DataListItem",
"odata.id": "49217d7e-200c-496b-b728-bd5307bbe1db",
"odata.etag": "\"1\"",
"odata.editLink": "Web/Lists(guid'f57b8a37-9a12-48fa-ae4a-f2c360611fd2')/Items(3)",
"Name#odata.navigationLinkUrl": "Web/Lists(guid'f57b8a37-9a12-48fa-ae4a-f2c360611fd2')/Items(3)/Name",
"Name": {
"odata.type": "SP.Data.UserInfoItem",
"odata.id": "df5b1286-0009-48ba-a7bc-7b269a9ebcf7",
"Title": "Mayank Sharma3"
},
"FileSystemObjectType": 0,
"Id": 3,
"ServerRedirectedEmbedUri": null,
"ServerRedirectedEmbedUrl": "",
"ID": 3,
"ContentTypeId": "0x0100CAEC71E55732C14BA36095D2FA8E6CA80037B4C7B1E7CFFA4D83E55D30CD77AC99",
"Title": null,
"Modified": "2022-06-02T08:18:58Z",
"Created": "2022-06-02T08:18:58Z",
"AuthorId": 1282,
"EditorId": 1282,
"OData__UIVersionString": "1.0",
"Attachments": false,
"GUID": "e5ac3af3-e024-4703-b946-96cdc2ff3b5e",
"ComplianceAssetId": null,
"Aadhar_x0020_Nuber": 999933119405,
"NameId": 705,
"NameStringId": "705",
"Age": 79,
"Gender": "M",
"Phone": 2837032088,
"Father_x0020_Name": "Mr. Bedi",
"Email": "bedi2020#mailserver.com",
"City": "Bareilly",
"State": "Uttar Pradesh"
},
{
"odata.type": "SP.Data.Aadhar_x005f_DataListItem",
"odata.id": "e1f7ffaa-1bc7-4afa-bccb-18965f13c750",
"odata.etag": "\"1\"",
"odata.editLink": "Web/Lists(guid'f57b8a37-9a12-48fa-ae4a-f2c360611fd2')/Items(4)",
"Name#odata.navigationLinkUrl": "Web/Lists(guid'f57b8a37-9a12-48fa-ae4a-f2c360611fd2')/Items(4)/Name",
"Name": {
"odata.type": "SP.Data.UserInfoItem",
"odata.id": "5f9e7c49-9bde-4b66-90c8-12e156db60ce",
"Title": "Shikhar Saxena"
},
"FileSystemObjectType": 0,
"Id": 4,
"ServerRedirectedEmbedUri": null,
"ServerRedirectedEmbedUrl": "",
"ID": 4,
"ContentTypeId": "0x0100CAEC71E55732C14BA36095D2FA8E6CA80037B4C7B1E7CFFA4D83E55D30CD77AC99",
"Title": null,
"Modified": "2022-06-02T08:20:16Z",
"Created": "2022-06-02T08:20:16Z",
"AuthorId": 1282,
"EditorId": 1282,
"OData__UIVersionString": "1.0",
"Attachments": false,
"GUID": "c3395b35-a981-4754-abb5-8b4b0fe65a51",
"ComplianceAssetId": null,
"Aadhar_x0020_Nuber": 999955183433,
"NameId": 846,
"NameStringId": "846",
"Age": 37,
"Gender": "M",
"Phone": 2821096353,
"Father_x0020_Name": "Mr. Pandey",
"Email": "rpandey#mailserver.com",
"City": "Mumbai",
"State": "Maharastra"
},
{
"odata.type": "SP.Data.Aadhar_x005f_DataListItem",
"odata.id": "29ba7f05-52e8-4ded-b3e5-22a9b3001d97",
"odata.etag": "\"2\"",
"odata.editLink": "Web/Lists(guid'f57b8a37-9a12-48fa-ae4a-f2c360611fd2')/Items(5)",
"Name#odata.navigationLinkUrl": "Web/Lists(guid'f57b8a37-9a12-48fa-ae4a-f2c360611fd2')/Items(5)/Name",
"Name": {
"odata.type": "SP.Data.UserInfoItem",
"odata.id": "cdce69d7-a601-4c9f-ad03-0a85eccb510b",
"Title": "Namita Rastogi"
},
"FileSystemObjectType": 0,
"Id": 5,
"ServerRedirectedEmbedUri": null,
"ServerRedirectedEmbedUrl": "",
"ID": 5,
"ContentTypeId": "0x0100CAEC71E55732C14BA36095D2FA8E6CA80037B4C7B1E7CFFA4D83E55D30CD77AC99",
"Title": null,
"Modified": "2022-06-09T07:25:17Z",
"Created": "2022-06-02T08:21:46Z",
"AuthorId": 1282,
"EditorId": 1282,
"OData__UIVersionString": "2.0",
"Attachments": false,
"GUID": "7a7d7906-442e-41eb-9f17-16f729fbb310",
"ComplianceAssetId": null,
"Aadhar_x0020_Nuber": 999990501894,
"NameId": 849,
"NameStringId": "849",
"Age": 40,
"Gender": "F",
"Phone": 2821096351,
"Father_x0020_Name": "Mr. Kapoor",
"Email": "anisha#gmail.com",
"City": "Bangalore",
"State": "Karnataka"
}
]
Expected Output:-
[
{
"Title": "Ankit Singh",
"Aadhar_x0020_Nuber": ,
"Age": ,
"Gender": "",
"Phone": ,
"Father_x0020_Name": "",
"Email": "",
"City": "",
"State": ""
},
{
"Title": "",
"Aadhar_x0020_Nuber": ,
"Age": ,
"Gender": "F",
"Phone": ,
"Father_x0020_Name": "",
"Email": "",
"City": "",
"State": ""
},
{
"Title": "",
"Aadhar_x0020_Nuber": ,
"Age": ,
"Gender": "M",
"Phone": ,
"Father_x0020_Name": "",
"Email": "",
"City": "",
"State": ""
},
{
"Title": "Shikhar Saxena",
"Aadhar_x0020_Nuber": ,
"Age": ,
"Gender": "",
"Phone": ,
"Father_x0020_Name": "",
"Email": "",
"City": "",
"State": ""
},
{
"Title": "",
"Aadhar_x0020_Nuber": ,
"Age": ,
"Gender": "",
"Phone": 2821096351,
"Father_x0020_Name": "",
"Email": "",
"City": "",
"State": ""
}
]

You are assigning a new value to the jsonOutput1 and jsonOutput2 everytime. You want to add to the existing object, in that case you need to change the lines:
jsonOutput1 = { [j]: d[0]["Name"].Title };
to
jsonOutput1[j] = d[0]["Name"].Title;
Similarly update the code for your jsonOutput2 line as well.
You can refer to this MDN JavaScript Guide Documentation and refer to the part where there demonstrate how to create additional properties in an existing object.
Hopefully, this will work.

compare objects of same array and group their some properties when specific property matched with other object

I have an array of object as following :
"orders": [
{
"orderID": 1,
"fullName": "xyz",
"email": "xyz#gmail.com",
"phone": "12345",
"flatNo": "A-5",
"complex": "tara tra",
"landmark": null,
"street": null,
"area": "",
"city": "",
"productID": 2,
"name": "curd",
"price": 52,
"image": "curd.png",
"quantity": 1
},
{
"orderID": 1,
"fullName": "xyz",
"email": "xyz#gmail.com",
"phone": "12345",
"flatNo": "A-5",
"complex": "tara tra",
"landmark": null,
"street": null,
"area": "",
"city": "",
"productID": 1,
"name": "lassi",
"price": 65,
"image": "images\\rtoRAOwj4-conn.PNG",
"quantity": 1
},
{
"orderID": 2,
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"productID": 1,
"name": "lassi",
"price": 65,
"image": "images\\rtoRAOwj4-conn.PNG",
"quantity": 3
}
]
Here if the orderID is same for the object I want to merge those object into a single object and create the product information into an array of an object within the main array
Here is the output which I am looking for
"orders": [
{
"orderID": 1,
"fullName": "xyz",
"email": "xyz#gmail.com",
"phone": "12345",
"flatNo": "A-5",
"complex": "tara tra",
"landmark": null,
"street": null,
"area": "",
"city": "",
"products": [
{
"productID": 2,
"name": "curd",
"price": 52,
"image": "curd.png",
"quantity": 1
},
{
"productID": 1,
"name": "lassi",
"price": 65,
"image": "images\\rtoRAOwj4-conn.PNG",
"quantity": 1
}
]
},
{
"orderID": 2,
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"productID": 1,
"name": "lassi",
"price": 65,
"image": "images\\rtoRAOwj4-conn.PNG",
"quantity": 3
}
]
basically I want to combine product information if the order ID is the same.

You'll have an easy time if you use my library for this.
const data = { orders: [ { "orderID": 1, "fullName": "xyz", "email": "xyz#gmail.com", "phone": "12345", "flatNo": "A-5", "complex": "tara tra", "landmark": null, "street": null, "area": "", "city": "", "productID": 2, "name": "curd", "price": 52, "image": "curd.png", "quantity": 1 }, { "orderID": 1, "fullName": "xyz", "email": "xyz#gmail.com", "phone": "12345", "flatNo": "A-5", "complex": "tara tra", "landmark": null, "street": null, "area": "", "city": "", "productID": 1, "name": "lassi", "price": 65, "image": "images\\rtoRAOwj4-conn.PNG", "quantity": 1 }, { "orderID": 2, "fullName": "velocity", "email": "velocity#gmail.com", "phone": "999999", "flatNo": "b-863", "complex": "tara tra", "landmark": "kaskd", "street": "asdasd", "area": "rob city", "city": "asda", "productID": 1, "name": "lassi", "price": 65, "image": "images\\rtoRAOwj4-conn.PNG", "quantity": 3 } ] }
const { pipe, assign, reduce, get, pick, omit } = rubico
const productKeys = ['productID', 'name', 'price', 'image', 'quantity']
const addOrderToMap = (m, order) => {
if (m.has(order.orderID)) {
m.get(order.orderID).products.push(pick(productKeys)(order))
} else {
m.set(order.orderID, {
...omit(productKeys)(order),
products: [pick(productKeys)(order)],
})
}
return m
}
const groupedByOrderID = assign({
orders: pipe([ // assign orders key
get('orders'), // data => orders
reduce(addOrderToMap, new Map()), // orders => Map { orderID -> orderWithProducts }
m => m.values(), // Map { orderID -> orderWithProducts } -> iterator { orderWithProducts }
Array.from, // iterator { orderWithProducts } -> [orderWithProducts]
]),
})(data)
console.log(groupedByOrderID)
<script src="https://unpkg.com/rubico/index.js"></script>
I've commented the code for you, here's the tour if you'd like to learn more.

Just in case if you want to do it through plain JavaScript you can make use of reduce:
var data=[ { "orderID": 1, "fullName": "xyz", "email": "xyz#gmail.com", "phone": "12345", "flatNo": "A-5", "complex": "tara tra", "landmark": null, "street": null, "area": "", "city": "", "productID": 2, "name": "curd", "price": 52, "image": "curd.png", "quantity": 1 }, { "orderID": 1, "fullName": "xyz", "email": "xyz#gmail.com", "phone": "12345", "flatNo": "A-5", "complex": "tara tra", "landmark": null, "street": null, "area": "", "city": "", "productID": 1, "name": "lassi", "price": 65, "image": "images\\rtoRAOwj4-conn.PNG", "quantity": 1 }, { "orderID": 2, "fullName": "velocity", "email": "velocity#gmail.com", "phone": "999999", "flatNo": "b-863", "complex": "tara tra", "landmark": "kaskd", "street": "asdasd", "area": "rob city", "city": "asda", "productID": 1, "name": "lassi", "price": 65, "image": "images\\rtoRAOwj4-conn.PNG", "quantity": 3 } ];
var result = Object.values(data.reduce((acc, {productID, name, price,image, quantity, ...rest})=>{
acc[rest.orderID] = acc[rest.orderID] || {...rest, products:[]};
acc[rest.orderID].products.push({productID, name, price,image, quantity});
return acc;
},{}));
console.log(result);

filter array of objects with dates

I am trying to fetch the data and store into 2 separate arrays from given below array of objects which meet following two conditions
From the current Array of objects, I want to only get the objects whose month is the current month.
another array for past 7 days
How can I do soo?
can I get any tip to work with dates as I am not soo good with it?
{
"status": "success",
"results": 10,
"orders": [
{
"orderID": 1,
"orderStatus": 1,
"purAmt": 1000,
"orderDate": "2020-06-14T03:23:20.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 1,
"name": "lassi",
"price": 62,
"image": "images\\rtoRAOwj4-conn.PNG",
"quantity": 5
},
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 9
}
]
},
{
"orderID": 2,
"orderStatus": 1,
"purAmt": 1000,
"orderDate": "2020-06-14T03:24:32.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 6,
"name": "chicken chilly",
"price": 65,
"image": "images\\PIwc5RQ7s-conn2.PNG",
"quantity": 1
},
{
"productID": 7,
"name": "buteer flyyy",
"price": 70,
"image": "images\\GvIgYj-lO-conn2.PNG",
"quantity": 2
}
]
},
{
"orderID": 4,
"orderStatus": 1,
"purAmt": 250,
"orderDate": "2020-06-15T09:04:45.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 1,
"name": "lassi",
"price": 62,
"image": "images\\rtoRAOwj4-conn.PNG",
"quantity": 1
},
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 1
}
]
},
{
"orderID": 5,
"orderStatus": 2,
"purAmt": 250,
"orderDate": "2020-05-15T10:33:59.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 1
}
]
},
{
"orderID": 6,
"orderStatus": 2,
"purAmt": 250,
"orderDate": "2020-06-15T10:41:53.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 1
}
]
},
{
"orderID": 7,
"orderStatus": 2,
"purAmt": 250,
"orderDate": "2020-06-15T10:44:58.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 1
}
]
},
{
"orderID": 8,
"orderStatus": 2,
"purAmt": 250,
"orderDate": "2020-06-15T11:00:57.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 1
}
]
},
{
"orderID": 9,
"orderStatus": 1,
"purAmt": 250,
"orderDate": "2020-06-15T11:01:50.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 1
}
]
}
]
}

The Date object here will help a lot. To get orders this month you could try something like:
orders.filter(order => {
const orderDate = new Date(order.orderDate);
const today = new Date();
const isThisYear = orderDate.getFullYear() === today.getFullYear()
const isThisMonth = orderDate.getMonth() === today.getMonth();
return isThisYear && isThisMonth;
})
And to get in the last 7 days you could try something like:
orders.filter(order => {
const orderDate = Date.parse(order.orderDate); // in milliseconds
const today = Date.now(); // in milliseconds
const millisecondsInAWeek = 604800000;
return orderDate > today - millisecondsInAWeek;
})

ngRepeat:dupes error, although there is no duplication

I have a HTML code like below which I use AngularJS framework within it:
<select name="choose-staff" ng-model="admin_times[0].user" ng-change="update(reserve.staff)" id="choose-staff">
<option ng-repeat="value in staff | unique:'employee.user.username'" value="{[{ value.employee.user.username }]}">{[{ value.employee.user.first_name }]} {[{ value.employee.user.last_name }]}</option>
</select>
And I get an error like this:
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: value in staff | unique:'employee.user.username', Duplicate key: string:ب, Duplicate value: ب
And if I use track by $index it destroys my desired structure and when I click one of options, the rest of them get vanished.
[
{
"employee": {
"user": {
"id": 3,
"first_name": "اشکان",
"last_name": "وکیلی",
"user_profile": null,
"username": "ashkan"
},
"business": {
"id": "caf241cd-adb4-44ee-8c40-0f6cdb3bc5ac",
"fa_name": "ساینا",
"en_name": "Saina",
"service": [],
"persian_address": "",
"location": "35.77885523664743,51.39051060551765",
"avatar": null,
"email": ""
},
"is_head": true
},
"service": {
"en_title": "Haircut",
"fa_title": "کوتاهی مو"
},
"allocated_time": 60,
"booked_no": "XG4OCX81"
},
{
"employee": {
"user": {
"id": 3,
"first_name": "اشکان",
"last_name": "وکیلی",
"user_profile": null,
"username": "ashkan"
},
"business": {
"id": "caf241cd-adb4-44ee-8c40-0f6cdb3bc5ac",
"fa_name": "ساینا",
"en_name": "Saina",
"service": [],
"persian_address": "",
"location": "35.77885523664743,51.39051060551765",
"avatar": null,
"email": ""
},
"is_head": true
},
"service": {
"en_title": "Color",
"fa_title": "رنگ مو"
},
"allocated_time": 25,
"booked_no": "1AY3F24G"
},
{
"employee": {
"user": {
"id": 2,
"first_name": "رضا",
"last_name": "ولیمرادی",
"user_profile": {
"id": "9d9be03a-f840-46ea-a21e-76cd5775a886",
"avatar": null,
"city": "",
"gender": "F",
"birthday": null,
"country": "IR",
"about": "",
"timestamp": "2015-11-06T14:56:10.312340Z",
"location": "36.03133177633187,51.328125"
},
"username": "reza"
},
"business": {
"id": "caf241cd-adb4-44ee-8c40-0f6cdb3bc5ac",
"fa_name": "ساینا",
"en_name": "Saina",
"service": [],
"persian_address": "",
"location": "35.77885523664743,51.39051060551765",
"avatar": null,
"email": ""
},
"is_head": false
},
"service": {
"en_title": "Yellow",
"fa_title": "زرد"
},
"allocated_time": 15,
"booked_no": "H989M93X"
},
{
"employee": {
"user": {
"id": 1,
"first_name": "علیرضا",
"last_name": "غفاری",
"user_profile": {
"id": "884b36e3-7bad-466f-afee-25801572b834",
"avatar": null,
"city": "",
"gender": "F",
"birthday": null,
"country": "IR",
"about": "",
"timestamp": "2015-11-06T14:56:39.522362Z",
"location": "32.24997445586331,53.26171875"
},
"username": "alireza"
},
"business": {
"id": "caf241cd-adb4-44ee-8c40-0f6cdb3bc5ac",
"fa_name": "ساینا",
"en_name": "Saina",
"service": [],
"persian_address": "",
"location": "35.77885523664743,51.39051060551765",
"avatar": null,
"email": ""
},
"is_head": true
},
"service": {
"en_title": "Color",
"fa_title": "رنگ مو"
},
"allocated_time": 20,
"booked_no": "O5KLFPZB"
}
]
I don't like the redundancy of employee.user.username

Looks to me like the unique value in each object is the booked_no.
In which case you should use track by value.booked_no

Loop through json data in Handlebars

On the handlebars website I can see how to loop through an array but I'm trying to look through an array object and having no luck.
Here's my data, which I am getting back using jquery and a jsonp command.
[
{
"id": 95,
"user_id": 6,
"status": 1,
"name": "Lost & Co",
"country": {
"code": "GB",
"name": "United Kingdom"
},
"city": "London",
"venue": "Lost & Co",
"fsqid": "512fb191e4b0f660fda426eb",
"address": "160 Putney High Street",
"postcode": null,
"lat": "51.461322924772",
"lng": "-0.21689196269354",
"phone": "+442087802235",
"description": null,
"date": "2014-05-10",
"time": "",
"image": null,
"image_thumb": null,
"website": "",
"twitter": null,
"tickets": "",
"fb_event": null,
"created_at": "2014-04-24 12:20:09",
"updated_at": "2014-04-24 12:20:09"
},
{
"id": 96,
"user_id": 6,
"status": 1,
"name": "Lost & Co",
"country": {
"code": "GB",
"name": "United Kingdom"
},
"city": "London",
"venue": "Lost & Co",
"fsqid": "512fb191e4b0f660fda426eb",
"address": "160 Putney High Street",
"postcode": null,
"lat": "51.461322924772",
"lng": "-0.21689196269354",
"phone": "+442087802235",
"description": null,
"date": "2014-05-24",
"time": "",
"image": null,
"image_thumb": null,
"website": "",
"twitter": null,
"tickets": "",
"fb_event": null,
"created_at": "2014-04-24 12:20:57",
"updated_at": "2014-04-24 12:20:57"
},
{
"id": 94,
"user_id": 6,
"status": 1,
"name": "Lost Society",
"country": {
"code": "GB",
"name": "United Kingdom"
},
"city": "London",
"venue": "Lost Society",
"fsqid": "4bbcf543593fef3b35de0256",
"address": "697 Wandsworth Rd",
"postcode": "SW8 3JF",
"lat": "51.467991033249",
"lng": "-0.14425992965698",
"phone": "+442076526526",
"description": null,
"date": "2014-05-31",
"time": "",
"image": null,
"image_thumb": null,
"website": "http://www.lostsociety.co.uk/index2.html",
"twitter": "lostsocietybar",
"tickets": "",
"fb_event": null,
"created_at": "2014-04-24 12:18:53",
"updated_at": "2014-04-24 12:18:53"
},
{
"id": 97,
"user_id": 6,
"status": 1,
"name": "Campus North",
"country": {
"code": "GB",
"name": "United Kingdom"
},
"city": "Newcastle",
"venue": "Campus North",
"fsqid": "533b05b0498ea89103652747",
"address": "5 Carliol Square",
"postcode": null,
"lat": "54.973037719727",
"lng": "-1.6087431907654",
"phone": null,
"description": null,
"date": "2014-06-12",
"time": "",
"image": null,
"image_thumb": null,
"website": "",
"twitter": null,
"tickets": "",
"fb_event": null,
"created_at": "2014-04-24 17:56:26",
"updated_at": "2014-04-24 17:55:55"
},
{
"id": 91,
"user_id": 6,
"status": 1,
"name": "Glastonbury",
"country": {
"code": "GB",
"name": "United Kingdom"
},
"city": "Pilton",
"venue": "Glastonbury",
"fsqid": null,
"address": null,
"postcode": null,
"lat": null,
"lng": null,
"phone": null,
"description": null,
"date": "2014-06-28",
"time": "",
"image": null,
"image_thumb": null,
"website": "http://www.glastonburyfestivals.co.uk/",
"twitter": null,
"tickets": "",
"fb_event": null,
"created_at": "2014-04-22 12:08:32",
"updated_at": "2014-04-22 13:06:51"
},
{
"id": 92,
"user_id": 6,
"status": 1,
"name": "Glastonbury",
"country": {
"code": "GB",
"name": "United Kingdom"
},
"city": "Pilton",
"venue": "Glastonbury",
"fsqid": null,
"address": null,
"postcode": null,
"lat": null,
"lng": null,
"phone": null,
"description": null,
"date": "2014-06-29",
"time": "",
"image": null,
"image_thumb": null,
"website": "http://www.glastonburyfestivals.co.uk/",
"twitter": null,
"tickets": "",
"fb_event": null,
"created_at": "2014-04-22 12:08:46",
"updated_at": "2014-04-22 13:07:27"
},
{
"id": 80,
"user_id": 6,
"status": 1,
"name": "TBA",
"country": {
"code": "ES",
"name": "Spain"
},
"city": "Ibiza",
"venue": "TBA",
"fsqid": "51fab9b1498e0ced82ae61d0",
"address": "Mediterranean Sea",
"postcode": null,
"lat": "38.970107",
"lng": "1.305714",
"phone": null,
"description": null,
"date": "2014-09-12",
"time": "",
"image": null,
"image_thumb": null,
"website": "",
"twitter": null,
"tickets": "",
"fb_event": null,
"created_at": "2014-02-27 00:41:49",
"updated_at": "2014-02-27 00:41:49"
}
]
I was trying this but it's not working. Have I missed something obvious?
<ul>
{{#each}}
<li>
<h3>{{ venue }}</h3>
</li>
{{/each}}
</ul>

You need to provide a context to that #each:
{{#each .}}
<li>
<h3>{{ venue }}</h3>
</li>
{{/each}}
All you're missing is that you need to let handlebars know that it's the root object as such that you want to iterate over.

Categories

Resources