Develop Reference

Fetch JSON data that has multiple pages?

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)));
}

How to make advanced filter with jQuery

The Question;
I want to filter by properties.
I have json data coming from the api and I want to filter that data.(If there is a way to do with laravel I would like to try that too)
Json Data;
[
{
"id": 1,
"title": "Deneme Batarya",
"description": "<p>Deneme Batarya</p>",
"slug": "deneme-batarya",
"brand_id": 4,
"deleted_at": null,
"created_at": "2021-02-22 19:43:02",
"updated_at": "2021-02-22 19:43:02",
"categories": [
{
"id": 3,
"parent_id": null,
"title": "Giyilebilir Teknoloji",
"description": null,
"slug": "giyilebilir-teknoloji",
"media": "public/media/slider/ms-10.jpg",
"level": 0,
"deleted_at": null,
"created_at": null,
"updated_at": null,
"pivot": {
"product_id": 1,
"category_id": 3
}
},
{
"id": 26,
"parent_id": 3,
"title": "Akıllı Bileklik",
"description": null,
"slug": "akilli-bileklik",
"media": "public/media/slider/ms-10.jpg",
"level": 2,
"deleted_at": null,
"created_at": null,
"updated_at": null,
"pivot": {
"product_id": 1,
"category_id": 26
}
}
],
"images": [
{
"id": 3,
"product_id": 1,
"product_detail_id": 1,
"sku": "model-45b",
"image": "public/media/product/1-model-45b864.png",
"level": 1,
"deleted_at": null,
"created_at": "2021-02-24 19:49:16",
"updated_at": "2021-02-24 19:49:16"
},
{
"id": 4,
"product_id": 1,
"product_detail_id": null,
"sku": null,
"image": "public/media/product/1--501.jpeg",
"level": 1,
"deleted_at": null,
"created_at": "2021-02-24 19:53:27",
"updated_at": "2021-02-24 19:53:27"
}
],
"details": [
{
"id": 1,
"product_id": 1,
"qty": 5,
"status": "Available",
"price": "56.00",
"discount": 5,
"sku": "model-45b",
"start": "2021-02-22 00:00:00",
"end": "2021-02-23 00:00:00",
"deleted_at": null,
"created_at": "2021-02-22 19:43:27",
"updated_at": "2021-02-22 19:43:27"
},
{
"id": 2,
"product_id": 1,
"qty": 6,
"status": "Available",
"price": "90.00",
"discount": 4,
"sku": "model-45a",
"start": "2021-02-25 00:00:00",
"end": "2021-02-26 00:00:00",
"deleted_at": null,
"created_at": "2021-02-24 19:26:48",
"updated_at": "2021-02-24 19:26:48"
}
],
"properties": [
{
"id": 1,
"product_id": 1,
"product_detail_id": 1,
"property_id": 7,
"parent_id": 1,
"created_at": "2021-02-22 19:43:27",
"updated_at": "2021-02-22 19:43:27",
"property": {
"id": 7,
"parent_id": 1,
"title": "Green",
"slug": "green",
"value": "#008000",
"created_at": null,
"updated_at": null
},
"parent": {
"id": 1,
"parent_id": null,
"title": "Color",
"slug": "color",
"value": null,
"created_at": null,
"updated_at": null
}
},
{
"id": 2,
"product_id": 1,
"product_detail_id": 1,
"property_id": 20,
"parent_id": 3,
"created_at": "2021-02-22 19:43:27",
"updated_at": "2021-02-22 19:43:27",
"property": {
"id": 20,
"parent_id": 3,
"title": "1 TB",
"slug": "1-tb",
"value": "1 TB",
"created_at": null,
"updated_at": null
},
"parent": {
"id": 3,
"parent_id": null,
"title": "Store Capacity",
"slug": "store-capacity",
"value": null,
"created_at": null,
"updated_at": null
}
},
{
"id": 3,
"product_id": 1,
"product_detail_id": 2,
"property_id": 7,
"parent_id": 1,
"created_at": "2021-02-24 19:26:48",
"updated_at": "2021-02-24 19:26:48",
"property": {
"id": 7,
"parent_id": 1,
"title": "Green",
"slug": "green",
"value": "#008000",
"created_at": null,
"updated_at": null
},
"parent": {
"id": 1,
"parent_id": null,
"title": "Color",
"slug": "color",
"value": null,
"created_at": null,
"updated_at": null
}
},
{
"id": 4,
"product_id": 1,
"product_detail_id": 2,
"property_id": 12,
"parent_id": 2,
"created_at": "2021-02-24 19:26:48",
"updated_at": "2021-02-24 19:26:48",
"property": {
"id": 12,
"parent_id": 2,
"title": "L",
"slug": "l",
"value": "Large",
"created_at": null,
"updated_at": null
},
"parent": {
"id": 2,
"parent_id": null,
"title": "Size",
"slug": "size",
"value": null,
"created_at": null,
"updated_at": null
}
},
{
"id": 5,
"product_id": 1,
"product_detail_id": 2,
"property_id": 17,
"parent_id": 3,
"created_at": "2021-02-24 19:26:48",
"updated_at": "2021-02-24 19:26:48",
"property": {
"id": 17,
"parent_id": 3,
"title": "64 GB",
"slug": "64-gb",
"value": "64 GB",
"created_at": null,
"updated_at": null
},
"parent": {
"id": 3,
"parent_id": null,
"title": "Store Capacity",
"slug": "store-capacity",
"value": null,
"created_at": null,
"updated_at": null
}
}
]
}
]
I don't know the properties that user added because it is dynamic. So I'm reaching the properties like this.
function makeQueryString() {
function keyValues(idPref) {
var key = idPref,
values = $('#' + idPref + ' input[id^="' + idPref + '"]').map(function() {
if (this.value !== this.defaultValue || this.checked !== this.defaultChecked) {
return this.value;
}
}).get().join(',');
return key && values.length ? key + '=' + values : '';
}
return $('form#property-filter span[id]').map(function(){
let keyValue = keyValues(this.id);
if (keyValue != ''){
return keyValue;
}
}).get().join('&');
}
Properties Result;
id of properties with name
color=6,7&store-capacity=15,16,17&ram=21,22,23
EDIT
The main problem is make a filter using property result.
For example when user select Red And Blue color and click filter button it will return color=6,7 and I should filter my json data with this and bring only if include color 6 or 7. At the same time if user select red, 64GB, 128GB then it should return only if red color with 64 or 128.
I tried so far;
function filterProducts(prop) {
// prop = color=6,7&store-capacity=15,16,17&ram=21,22
prop = prop.split('&');
let x = [];
for (i=0; i<prop.length; i++){
x.push(prop[i].split('='));
}
let newProductsArr = [];
for (p=0; p<products.length; p++) {
for (k=0; k< products[p].properties.length; k++){
for (i=0; i<x.length; i++){
if(x[i][0] === products[p].properties[k].parent.slug){
let ids = x[i][1].split(',');
for (g=0; g<ids.length; i++){
if (products[p].properties[k].property_id === ids[g]){
newProductsArr.push(products[p])
}
}
}
}
}
}
}

How to export nested json array to pdf using PDFMAKE Angular

I have used Angular as programming language for my project and i am a beginner. But i am stuck at the point where i have to generate PDF of my JSON response.
Looked at the documentation of PDFMAKE to achieve the same, but couldnot figure out how to implement it and come out with the output as shown in following image.
Output Structure Image
The JSON response is as follows:
{
"statusCode": true,
"data": [
{
"partyId": 1,
"partyIdDisp": "1/PA/2077",
"createdDate": "2077/05/03",
"partyName": "Roshan Basnet",
"contactNumber": 9841040791,
"companyName": "Butwal Poultry",
"panNumber": 321654,
"address": "Butwal, Nepal",
"saleDetails": [
{
"_id": "5f5b234cbac67e377c2a700f",
"saleId": 1,
"saleIdDisp": "1/S/2077",
"createdDate": "2077/05/26",
"saleType": "Credit",
"customerId": 1,
"customerName": "Roshan Basnet",
"contactNumber": 9841040791,
"billingName": "Butwal Poultry",
"billingAddress": "Butwal, Nepal",
"billDate": "2077/05/26",
"itemDetails": [
{
"_id": "5f5b234cbac67e377c2a7010",
"itemId": 1,
"itemName": "Chicken",
"quantity": 10,
"unit": "KG",
"piece": 5,
"receiptNo": null,
"billNo": 366,
"unitPrice": 310,
"itemAmount": 3100
}
],
"totalQuantity": 10,
"paymentMethod": "Cash",
"subTotal": 3100,
"amountInWords": "three thousand one hundred only",
"outstandingBalance": 0,
"receivedAmount": 3000,
"balanceAmount": 100,
"__v": 0
},
{
"_id": "5f5b2375bac67e377c2a7012",
"saleId": 2,
"saleIdDisp": "2/S/2077",
"createdDate": "2077/05/26",
"saleType": "Credit",
"customerId": 1,
"customerName": "Roshan Basnet",
"contactNumber": 9841040791,
"billingName": "Butwal Poultry",
"billingAddress": "Butwal, Nepal",
"billDate": "2077/05/26",
"itemDetails": [
{
"_id": "5f5b2375bac67e377c2a7013",
"itemId": 2,
"itemName": "Mutton",
"quantity": 5,
"unit": "KG",
"piece": 0,
"receiptNo": null,
"billNo": 266,
"unitPrice": 1200,
"itemAmount": 6000
},
{
"_id": "5f5b2375bac67e377c2a7014",
"itemId": 3,
"itemName": "Eggs",
"quantity": 10,
"unit": "Crate",
"piece": 0,
"receiptNo": null,
"billNo": 366,
"unitPrice": 390,
"itemAmount": 3900
}
],
"totalQuantity": 15,
"paymentMethod": "Cash",
"subTotal": 10000,
"amountInWords": "ten thousand only",
"outstandingBalance": 100,
"receivedAmount": 5000,
"balanceAmount": 5000,
"__v": 0
}
]
}
]
}
A code snippet how to generate a pdf output as per the structure in the image would be helpful.

Create a new array from object with same keys

I have a array of objects. I want to merge the objects into a single array and use one of the value as key. In the example below I have a data array which I'm getting from the server as a response to a API and I want to use call_id as a key to index the response into a new array.
I've tried:
data.map(function(index, elem) {responses[index.call_id] = index;})
but this obviously only gets the last array and adding a [] gives me an error
Current Array:
[
{
"id": 2,
"survey_id": 1,
"question_id": 2,
"response": 1,
"order_id": null,
"customer_id": 1,
"call_id": 108,
"created_at": "2020-02-20 18:18:47",
"updated_at": "2020-02-20 18:18:47",
"question": "Do you want it gift wrapped?",
"first_name": "Zain",
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
},
{
"id": 1,
"survey_id": 1,
"question_id": 1,
"response": 2,
"order_id": null,
"customer_id": 1,
"call_id": 108,
"created_at": "2020-02-20 18:18:32",
"updated_at": "2020-02-20 18:18:32",
"question": "Is your order confirmed?",
"first_name": "Zain",
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
},
{
"id": 1,
"survey_id": 1,
"question_id": 1,
"response": 2,
"order_id": null,
"customer_id": 1,
"call_id": 109,
"created_at": "2020-02-20 18:18:32",
"updated_at": "2020-02-20 18:18:32",
"question": "Is your order confirmed?",
"first_name": "Zain",
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
}
]
Expected Result
[{
'108': [
{
"id": 2,
"survey_id": 1,
"question_id": 2,
"response": 1,
"order_id": null,
"customer_id": 1,
"call_id": 108,
"created_at": "2020-02-20 18:18:47",
"updated_at": "2020-02-20 18:18:47",
"question": "Do you want it gift wrapped?",
"first_name": "Zain",
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
},
{
"id": 1,
"survey_id": 1,
"question_id": 1,
"response": 2,
"order_id": null,
"customer_id": 1,
"call_id": 108,
"created_at": "2020-02-20 18:18:32",
"updated_at": "2020-02-20 18:18:32",
"question": "Is your order confirmed?",
"first_name": "Zain",
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
}
],
'109' : [
{
"id": 1,
"survey_id": 1,
"question_id": 1,
"response": 2,
"order_id": null,
"customer_id": 1,
"call_id": 109,
"created_at": "2020-02-20 18:18:32",
"updated_at": "2020-02-20 18:18:32",
"question": "Is your order confirmed?",
"first_name": "Zain",
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
}
]
}]

I think that you want something like below, correct?
If yes, let me explain a little bit:
You will use .reduce(), it uses two values as parameter, an accumulator (in this case is an object) and the current value that is being iterated(in this case each object from the array)
Each iteration you check the accumulator to see if the call_id of the current iterated object already exists or not, if exists, so you just push the object into it, if not, create a new object with call_id as key.
Note: I'm using an array with less properties just for better visualization of the code
let arr = [{
"id": 2,
"call_id": 108,
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
},
{
"id": 1,
"call_id": 108,
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
},
{
"id": 3,
"call_id": 109,
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
}
]
let result = arr.reduce(function(accObj, currentObj) {
accObj[currentObj.call_id] = accObj[currentObj.call_id] || [];
accObj[currentObj.call_id].push(currentObj);
return accObj;
}, {}); //{} is the accumulator object
console.log(result);

var arr = [
{
"id": 2,
"survey_id": 1,
"question_id": 2,
"response": 1,
"order_id": null,
"customer_id": 1,
"call_id": 108,
"created_at": "2020-02-20 18:18:47",
"updated_at": "2020-02-20 18:18:47",
"question": "Do you want it gift wrapped?",
"first_name": "Zain",
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
},
{
"id": 1,
"survey_id": 1,
"question_id": 1,
"response": 2,
"order_id": null,
"customer_id": 1,
"call_id": 108,
"created_at": "2020-02-20 18:18:32",
"updated_at": "2020-02-20 18:18:32",
"question": "Is your order confirmed?",
"first_name": "Zain",
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
},
{
"id": 1,
"survey_id": 1,
"question_id": 1,
"response": 2,
"order_id": null,
"customer_id": 1,
"call_id": 109,
"created_at": "2020-02-20 18:18:32",
"updated_at": "2020-02-20 18:18:32",
"question": "Is your order confirmed?",
"first_name": "Zain",
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
}
];
var obj = {}
arr.forEach(item => {
if (!obj[item.call_id]) obj[item.call_id] = []
obj[item.call_id].push(item)
})
console.log(obj);

You can initialize an object, and for every item in the array check if object[item.call_id]. If it doesn't, assign that new key the value of [item] (starting off the array). If it does, simply get the value of object[call_id], push the current item into that array, then reassign object[call_id] to the updated array. Then wrap the whole thing in brackets if you want it to be an array.
By creating the object first your avoiding the use of nested loops or reduce which can be inefficient in terms of time efficiency should the dataset grow.
var arr = [
{
"id": 2,
"survey_id": 1,
"question_id": 2,
"response": 1,
"order_id": null,
"customer_id": 1,
"call_id": 108,
"created_at": "2020-02-20 18:18:47",
"updated_at": "2020-02-20 18:18:47",
"question": "Do you want it gift wrapped?",
"first_name": "Zain",
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
},
{
"id": 1,
"survey_id": 1,
"question_id": 1,
"response": 2,
"order_id": null,
"customer_id": 1,
"call_id": 108,
"created_at": "2020-02-20 18:18:32",
"updated_at": "2020-02-20 18:18:32",
"question": "Is your order confirmed?",
"first_name": "Zain",
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
},
{
"id": 1,
"survey_id": 1,
"question_id": 1,
"response": 2,
"order_id": null,
"customer_id": 1,
"call_id": 109,
"created_at": "2020-02-20 18:18:32",
"updated_at": "2020-02-20 18:18:32",
"question": "Is your order confirmed?",
"first_name": "Zain",
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
},
{
"id": 1,
"survey_id": 1,
"question_id": 1,
"response": 2,
"order_id": null,
"customer_id": 1,
"call_id": 109,
"created_at": "2020-02-20 18:18:32",
"updated_at": "2020-02-20 18:18:32",
"question": "Is your order confirmed?",
"first_name": "Zain",
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
},
{
"id": 1,
"survey_id": 1,
"question_id": 1,
"response": 2,
"order_id": null,
"customer_id": 1,
"call_id": 109,
"created_at": "2020-02-20 18:18:32",
"updated_at": "2020-02-20 18:18:32",
"question": "Is your order confirmed?",
"first_name": "Zain",
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
},
{
"id": 1,
"survey_id": 1,
"question_id": 1,
"response": 2,
"order_id": null,
"customer_id": 1,
"call_id": 109,
"created_at": "2020-02-20 18:18:32",
"updated_at": "2020-02-20 18:18:32",
"question": "Is your order confirmed?",
"first_name": "Zain",
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
},
{
"id": 1,
"survey_id": 1,
"question_id": 1,
"response": 2,
"order_id": null,
"customer_id": 1,
"call_id": 109,
"created_at": "2020-02-20 18:18:32",
"updated_at": "2020-02-20 18:18:32",
"question": "Is your order confirmed?",
"first_name": "Zain",
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
},
{
"id": 1,
"survey_id": 1,
"question_id": 1,
"response": 2,
"order_id": null,
"customer_id": 1,
"call_id": 109,
"created_at": "2020-02-20 18:18:32",
"updated_at": "2020-02-20 18:18:32",
"question": "Is your order confirmed?",
"first_name": "Zain",
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
},
{
"id": 1,
"survey_id": 1,
"question_id": 1,
"response": 2,
"order_id": null,
"customer_id": 1,
"call_id": 109,
"created_at": "2020-02-20 18:18:32",
"updated_at": "2020-02-20 18:18:32",
"question": "Is your order confirmed?",
"first_name": "Zain",
"sid": "CA1564cda12b7e1364dc967538c7bdf617"
}
]
const reorderArr = () =>{
let myMap = {}
arr.forEach(x=>{
if (!myMap[x.call_id]){
myMap[x.call_id] = [x]
} else {
var children = myMap[x.call_id]
children.push(x)
myMap[x.call_id] = children
}
})
console.log([myMap])
}
reorderArr()

Can not read property picture of undefined

I have the following JSON
{
"error": false,
"data": {
"id": 1,
"name": "Jagadesha NH",
"email": "example#gmail.com",
"phone": "9986XXXXXX",
"dob": "1991-06-01",
"gender": "m",
"active": 1,
"created_at": "2017-02-19 21:33:04",
"updated_at": "2017-02-19 21:33:04",
"profile": {
"id": 1,
"user_id": 1,
"picture": "https:\/\/placehold.it\/150x150",
"about": null,
"occupation": null,
"created_at": "2017-02-19 21:33:04",
"updated_at": "2017-02-19 21:33:04"
}
},
"msg": ""
}
every time I try to read picture property I get an error saying
cannot read property picture of undefined
I am reading like
data.profile.picture

i found it like this :
var x={
"error": false,
"data": {
"id": 1,
"name": "Jagadesha NH",
"email": "example#gmail.com",
"phone": "9986xxxxxx",
"dob": "1904-06-01",
"gender": "m",
"active": 1,
"created_at": "2017-02-19 21:33:04",
"updated_at": "2017-02-19 21:33:04",
"profile": {
"id": 1,
"user_id": 1,
"picture": "https:\/\/placehold.it\/150x150",
"about": null,
"occupation": null,
"created_at": "2017-02-19 21:33:04",
"updated_at": "2017-02-19 21:33:04"
}
},
"msg": ""
}
;
alert(x.data.profile.picture);
if you store json in a variable access it with variable and then using dot(<<variable_name>>.data.profile.picture)

you are getting error because data is itself a key or property of object
var a = //Your json
a.data.profile.picture