First, I have data from url like this GET /api/fruit?per_page=10&page=1 and this is what I got :
{
"data": [
{
"id": "1",
"name": "Orange",
"price": "200"
},
{
"id": "2",
"name": "Manggo",
"price": "300"
},
...(display 10 data)
],
"meta": {
"pagination": {
"total": 69487,
"count": 10,
"per_page": 10,
"current_page": 1,
"total_pages": 4633
}
}
}
Then I following this code fiddle and success render data, and pagination work as well. But input search not working. My question is how to use jquery dataTable properly with data from api like this GET /api/fruit?per_page=10&page=1
Related
This is a JSON snip that is created in WooCommerce by a plugin that adds some metadata. I cannot change the formatting of this JSON because it is generated by a plugin. The problem is that the keys and the values are added in a weird way. I am iterating through the line_items and statically referencing this data which I don't want to do, I would like to know if there is a smart way to reference for example:
"key": "_cpo_product_id",
"value": "3572",
if this was formatted correctly it would be: "_cpo_product_id": "3572" and not have "value" as a key, and it would be accessed by: foo.line_items[i]._cpo_product_id
but with this configuration I am a bit lost, I am sure there is an easy way to find the value for a specific key. I am doing this on Google app scripts, but a solution in JavaScript should suffice.
JSON snip:
"line_items": [
{
"id": 749,
"name": "Dune",
"product_id": 3572,
"variation_id": 0,
"quantity": 1,
"tax_class": "",
"subtotal": "149.54",
"subtotal_tax": "31.40",
"total": "149.54",
"total_tax": "31.40",
"taxes": [
{
"id": 24,
"total": "31.403148",
"subtotal": "31.403148"
}
],
"meta_data": [
{
"id": 11919,
"key": "_cpo_product_id",
"value": "3572",
"display_key": "_cpo_product_id",
"display_value": "3572"
},
{
"id": 11920,
"key": "_add-to-cart",
"value": "3572",
"display_key": "_add-to-cart",
"display_value": "3572"
},
Okay so I was doing my research and I found something but in vue 2, which is quite interesting, however doesn't seems to be possible for the vue 3(I tested it already). See the reference on here
However myself I was trying to do something "quite experimental"
So see below my "v-for"
<span
v-for="model in sortIndex(colour.relatedModels)"
:key="model.id"
:style="{ color: colour.colourHex.hex }">
<pill-search
#pushUp="pushUp($event)"
:primColor="colour.primaryColour"
:secColor="colour.secondaryColour"
:slug="colour.slug"
:modelName="model.modelName"
></pill-search>
</span>
So I have this " v-for="model in sortIndex(colour.relatedModels)"
Where sortIndex() is a method that receive an object array and then I try to orderBy
sortIndex(arrayModels){
return _.orderBy(arrayModels, [arrayModels.index]);
},
but actually don't do anything
Important to say in that index, is nothing else more than a field inside relatedModels object, which is quite a fav range.
See an extract sample of my graph on here
[
{
"colorName": "yellow",
"slug": "yellow",
"colourDescription": "",
"colourHex": {
"hex": "#BF0000"
},
"colourSerie": "XX1",
"id": "48361636",
"secondaryColour": "hsla(0, 100.00%, 12.91%, 1.00)",
"relatedModels": [
{
"id": "48355531",
"index": "5",
"modelName": "modelOne"
},
{
"id": "48355536",
"index": "4",
"modelName": "modelTwo"
}
]
},
{
"colorName": "green",
"slug": "green",
"colourDescription": "",
"colourHex": {
"hex": "#C3E300"
},
"colourSerie": "XX2",
"id": "58375424",
"secondaryColour": "hsla(68.45814977973569, 100.00%, 14.24%, 1.00)",
"relatedModels": [
{
"id": "48355512",
"index": "6",
"modelName": "modelFour"
},
{
"id": "48354230",
"index": "5",
"modelName": "modelOne"
},
{
"id": "48355529",
"index": "7",
"modelName": "modelThree"
}
]
},
{
"colorName": "yellow",
"slug": "yellow",
"colourDescription": "",
"colourHex": {
"hex": "#BF0000"
},
"colourSerie": "XX1",
"id": "48361636",
"secondaryColour": "hsla(0, 100.00%, 12.91%, 1.00)",
"relatedModels": [
{
"id": "48355531",
"index": "5",
"modelName": "modelOne"
},
{
"id": "48355536",
"index": "4",
"modelName": "modelTwo"
}
]
},
...
]
So any help or advice of a different approach of this will be very helpful
So keeping with this solution, I ended up to have typo on the call of the function, so instead of:
return _.orderBy(arrayModels, [arrayModels.index]);
I corrected it with :
return _.orderBy(arrayModels, 'index']);
and this worked for me
I've been playing around trying to learn in an API project using Postman and conducting tests using JavaScript. So far, I have succeeded with the help of reading on websites and watching YouTube videos. Of course, previous tests and playing around have been fairly easy but now I came to a stop. I really tried to figure this out for several weeks but I need further guidance, a push in the right direction or direct help.
What I'm trying to do is to filter out some of the response to only view objects that contain specific data.
To do that, I'm using a filter where I want all products containing a specific value inside an array "product_option_values".
My first approach was to see if I could sort products having any values from the first array, and it worked. It filters just fine.
var filterSmall = jsonData.products.filter(fs => fs.associations.product_option_values);
My next approach was to get to my goal of filtering out products according to specific values inside this array. I tried many simple .(dot) combinations and pointing to [index] to access it without any luck. (I must add that I know how to access this from a specific product, but that way doesn't work when filtering).
I've also tried other approaches such as:
var filterSmall = jsonData.products.filter(fs => fs.associations["product_option_values", 0, "name"] === "S");
and other similar combinations.
This is a very shortened sample of the structure of "products" which in its full form consists of 20 products and far more values inside of it:
{
"products": [
{
"id": 16,
"manufacturer_name": "Graphic Corner",
"quantity": "0",
"price": "12.900000",
"indexed": "1",
"name": "Mountain fox notebook",
"associations": {
"categories": [
{
"id": "2"
},
{
"id": "6"
}
],
"product_option_values": [
{
"id": "22"
},
{
"id": "23"
}
]
}
},
{
"id": 17,
"manufacturer_name": "Graphic Corner",
"quantity": "0",
"price": "12.900000",
"indexed": "1",
"name": "Brown bear notebook",
"associations": {
"categories": [
{
"id": "2"
},
{
"id": "6"
}
],
"product_option_values": [
{
"id": "23"
},
{
"id": "24"
}
]
}
}
]
}
and here is a small and expanded sample from product_option_values:
{
"product_option_values": [
{
"id": 1,
"id_attribute_group": "1",
"color": "",
"position": "0",
"name": "S"
},
{
"id": 2,
"id_attribute_group": "1",
"color": "",
"position": "1",
"name": "M"
},
{
"id": 3,
"id_attribute_group": "1",
"color": "",
"position": "2",
"name": "L"
}
]
}
How do I proceed? Did I do anything correct or even close to it?
Perhaps I've been staring at this for too long.
Thanks in advance.
If you want to compare nested attributes you have to transform the objects (e.g. by using a map operation), so that the relevant attributes are easily accessible for a comparison. If you want to filter by product_option_value id, you could do something like this:
const jsonData = {
"products": [
{
"id": 16,
"manufacturer_name": "Graphic Corner",
"quantity": "0",
"price": "12.900000",
"indexed": "1",
"name": "Mountain fox notebook",
"associations": {
"categories": [
{
"id": "2"
},
{
"id": "6"
}
],
"product_option_values": [
{
"id": "22"
},
{
"id": "23"
}
]
}
},
{
"id": 17,
"manufacturer_name": "Graphic Corner",
"quantity": "0",
"price": "12.900000",
"indexed": "1",
"name": "Brown bear notebook",
"associations": {
"categories": [
{
"id": "2"
},
{
"id": "6"
}
],
"product_option_values": [
{
"id": "23"
},
{
"id": "24"
}
]
}
}
]
};
const sample = {
"product_option_values": [
{
"id": 22,
"id_attribute_group": "1",
"color": "",
"position": "0",
"name": "S"
},
{
"id": 2,
"id_attribute_group": "1",
"color": "",
"position": "1",
"name": "M"
},
{
"id": 3,
"id_attribute_group": "1",
"color": "",
"position": "2",
"name": "L"
}
]
};
const ids = sample.product_option_values.map((el) => String(el.id));
console.log(ids);
const filtered = jsonData.products.filter((fs) => fs.associations.product_option_values.map((e) => e.id).some((f) => ids.includes(f)));
console.log(filtered);
I have this knexnest query:
const query = knex.select([
'notes.id AS _id',
'notes.note AS _note',
'notes.timestamp AS _timestamp',
'customers.id AS _customerId',
'users.name AS _name',
'products.id AS _productId',
'tags.id AS _tags_tagId',
'tags.title AS _tags_tagTitle',
'tags.type AS _tags_tagType',
]).from('notes')
.join('users', 'notes.user_id', 'users.id')
.join('customers', 'notes.customer_id', 'customers.id')
.leftJoin('products', 'notes.product_id', 'products.id')
.leftJoin('note_tags', 'notes.id', 'note_tags.note_id')
.leftJoin('tags', 'note_tags.tag_id', 'tags.id')
.where('customers.id', customerId);
return knexnest(query);
My response json looks like this:
{
"id": 47,
"note": "This is an updated1 note",
"timestamp": "2019-07-12T15:17:27.281Z",
"customerId": 111781,
"name": "Paul",
"productId": 1,
"tags": {
"tagId": 4,
"tagTitle": "price",
"tagType": "product"
}
}
The problem is that the database returns more than one tag, only one is displayed. I'm expecting a response like this:
{
"id": 47,
"note": "This is an updated1 note",
"timestamp": "2019-07-12T15:17:27.281Z",
"customerId": 111781,
"name": "Paul",
"productId": 1,
"tags": {[
{
"tagId": 4,
"tagTitle": "price",
"tagType": "product"
},
{
"tagId": 5,
"tagTitle": "quality",
"tagType": "product"
}
]}
}
Have I got something wrong in my query that is causing this?
Got it. I was missing double __ in the tags:
'tags.id AS _tags__tagId',
'tags.title AS _tags__tagTitle',
'tags.type AS _tags__tagType'
I am trying to access an object (tmp_name) within a Woocommerce webhook payload in AWS Lambda. At the moment I can output the "line item" with:
exports.handler = (event, context, callback, err) => {
callback(null, event.line_items);
if (err) console.log('JSON Pass Fail'); // an error occurred
else console.log(event.order_key); // successful response
};
When I try to go deeper into the event data it runs as null, such as
callback(null,event.line_items.meta_data.value.tmp_name);
I have tried accessing the array with 0 and [0] with no joy either.
Eventually if I can access the file path, i need to strip out the backslahes so it looks like a proper file path. I have got the regex for that which is string.replace(/\\\//g, "/");
Can anyone help me put this together?
{
"line_items": [
{
"id": 2,
"name": "Audio 5",
"product_id": 15,
"variation_id": 0,
"quantity": 1,
"tax_class": "",
"subtotal": "10.00",
"subtotal_tax": "0.00",
"total": "10.00",
"total_tax": "0.00",
"taxes": [
],
"meta_data": [
{
"id": 20,
"key": "_wcj_product_input_fields_global_1",
"value": {
"name": "Aaron Ramsey's departure from Arsenal to Juventus.mp3",
"type": "audio\/mp3",
"tmp_name": "\/home\/site\/public_html\/wp-content\/uploads\/woocommerce_uploads\/wcj_uploads\/input_fields_uploads\/21.mp3",
"error": 0,
"size": 4943085,
"wcj_type": "file"
}
}
],
"sku": "",
"price": 10
}
],
"tax_lines": [
],
"shipping_lines": [
],
"fee_lines": [
],
"coupon_lines": [
],
"refunds": [
]
}