How to access the img value? javascript - javascript

I have an array of objects with several properties, one of them is called 'file', of which there are two types as represented below
const products = [
{
functional_id: "2_recharges",
quantity: 1,
title: "Coffret empreinte rouge",
file: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAA…em3dIEUUE1O4fn/M8l6v+f6VPgptdk2plAAAAAElFTkSuQmCC"
},
{
functional_id: "sacs_blancs",
quantity: 1,
title: "Sacs blancs",
file: "data:image/;base64,"
}
]
It's the first time I work with image files and I don't know how to differentiate to create a condition so that only those containing the word 'png' in its value are displayed, in the case of the example the first one, since those that are like the second one don't display any image
I tried to treat them as a string to check if they contained the value string but it doesn't work, as I understand that they are not strings.
If someone can give me an idea of how to create my condition. Thank you very much in advance

You will want to use the js filter method to check whether the file includes 'png'.
const products = [{
functional_id: "2_recharges",
quantity: 1,
title: "Coffret empreinte rouge",
file: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAA…em3dIEUUE1O4fn/M8l6v+f6VPgptdk2plAAAAAElFTkSuQmCC"
},
{
functional_id: "sacs_blancs",
quantity: 1,
title: "Sacs blancs",
file: "data:image/;base64,"
}
]
const pngImages = products.filter(product => product.file.includes('png'))
console.log(pngImages)

this simple filter returns you just only those products that have png in file string
products.filter(product => product.file.match('png').length);

Related

Add a filter to GTM custom javascript variable array

We have a ecommerce system that pushes through a datalayer. Unfortunately, the datalayer includes the 'building blocks' of our products. Resulting in tags that register more information than I would like. I would like to exclude these 'building blocks' through a custom javascript variable. See an example of the datalayer below.
checkout: {
actionField: {step: 1},
currencyCode: 'EUR',
products: [
{
name: 'product name',
id: '40291',
price: '149,00',
category: 'Transportation/Other',
quantity: 2
},
{
name: 'building block 1',
id: '20231',
price: '0,00',
category: 'Transportation/Other',
quantity: 2
},
{
name: 'building block 2',
id: '12302',
price: '0,00',
category: 'Transportation/Other',
quantity: 2
I've made a CJS variables that makes the products.id, .name, .price and .quantity an array (see below), but I am unable to figure out how to add a filter() that excludes from the array the values where corresponding product.name = "building block 1" && "building block 2".
var products = {{dlv - product}};
return products.reduce(function(arr, prod) { return arr.concat(prod.id); }, []);
Would anybody be able to help me out with this part of the function? Alternatively, I was thinking I might be able to achieve the same with a conditional if() statement.
Thanks in advance!
I'm not sure how GTM works, but if you want to filter an array with JS you could use something like this:
checkout.products.filter(product => !product.name.includes('building block'))
Let me know if this helps or I'm missing something.
I had the same challenge. My solution:
1. Create data layer variable with yours products array
In my case it was ecommerce.impressions data layer variable from productImpression event.
2. Choose parameters for your filter
I had:
variable with products array from step 1 - {{products array}}
term - only products with this word will be in my filtered array
custom dimension - 'dimensionXX' - this parameter will be check
3. Create custom javascript variable with filtered products array
Paste this function with yours filter parameters
function() {
var items = {{products array}};
var filtered_items = items.filter(function(filter) {
return filter.dimensionXX.includes('term');
}
);
return filtered_items;
}
4. Add your custom javascript variable from step 3 to your tag configuration
Replace your original product array with this custom javascript variable to send filtered product array to GA.

Using multiple filters on a dynamically generated table with pure JavaScript

I have a table that is dynamically generated using PHP and a MySQL table/database... I also have figured out how to use filters. The problem is that it only lets you use one filter at a time... Here is a screenshot of what I mean: screenshot
You can only filter by description or by date... not both.
Is there some way to do this? I can't really provide you any HTML/JavaScript code as you won't see anything because the table data comes from a database but let me know if you need any more detail...
Thanks!
If I understood your question properly, you can do something like this:
Let's assume we have an array of objects
const data = [
{
id: 0,
date: '1609084588132',
description: 'something'
},
{
id: 1,
date: '1609087588132',
description: 'anything'
},
{
id: 2,
date: '1609087588132',
description: 'anything'
}
]
And to filter this array by two properties, you can do something like:
const filteredData = data.filter((item) => {
if (item.date > 'some date' && item.description.includes('anyth')) {
return true;
}
return false;
});
console.log(filteredData)
I think you got an idea, we filtered the array above with two conditions: id must be bigger than 0 and description string must contain 'anyth'.

Filtering a JSON with Javascript

I am trying to filter a JSON using filter and I'm not getting the clubProducts to return as I hoped (allProducts works fine). Any help is appreciated. Thank you
const state = {
added: [],
all: [
{
id: 'bcd755a6-9a19-94e1-0a5d-426c0303454f',
name: 'Iced Coffee',
description: 'Coffee, now featuring ice.',
image: 'https://images.com',
price: 899,
fxCategory: 'Coffee'
},
{
id: 'cc919e21-9a19-94e1-ace9-426c0303454f',
name: 'The 2ndItem',
description: 'Wouldn't you like to know.',
image: 'https://images.com',
price: 499,
fxCategory: 'Club'
}
]
}
const getters = {
allProducts: state => state.all,
clubProducts: state => function () {
return state.all.filter(item => item.fxCategory == 'Club')
}
}
EDIT: Updated with latest attempt as per suggestions
You made two mistakes: you can use filter() only on an array (ie state.all in your case), and in your comparison you didn't quote the string 'Club'.
Also, your filter() can be written in a shorter way, as such:
clubProducts: state.all.filter(item => item.fxCategory == 'Club')
See documentation for more.
As mentioned by #Reyedy you can call filter function directly in 'clubProducts' field and this example is works.
But you may get an error because you use single quotes in 'description' field.
Try in state.all
description: "Wouldn't you like to know.",
instead of
description: 'Wouldn't you like to know.',
This is the only place I got an error trying to repeat your example.

Map the values in object with the given value in react

I am new to the react, Here I have one array of object which is like
const bgStatus =
[{
Id: "809"
Name: "PRE"
Description: "PRE"
Value: "VP:PRE"
},
{
Id: "809"
Name: "CLO"
Description: "CLO"
Value: "VP:CLO"
},
{
Id: "809"
Name: "BU"
Description: "BU"
Value: "VP:BU"
}
]
Now , In this I have one method through which I get the value which is VP:PRE or VP:BU or VP:CLO
Now, I have the following function
getmsg = (bgSt, tobeChange, current) => {
return `Are you sure you want to change to ${tobeChange}? not possible to go ${current} `
}
Now, In this both the status tobeChange and current comes in a VP:PRE in this format. Now, I want to use the Description from that array for that value like for VP:PRE , it should be 'PRE' in the return value. Now ,
I have one solution which is like creating a key value map and then map it. But, I can not hard code that values over here.
So, and also don't want to use the includes or contains things.
Result which I want - When I am calling the function
getmsg this time in params I am passing , tobeChange is `"VP:PRE"`, current is "VP_BU" and bgStatus is the array of object.
Now in return I should get this message ,
`Are you sure you want to change to PRE not possible to go BU `
The values VP_PRE should get replaced with the description PRE
Well if you are always getting the two variables :
tobeChange=VP:something_to_change
current=VP:something
It has nothing to do with react it is javascript traitement
I suggest you use the function split here is an example :
getmsg = (tobeChange, current) => {
toChange=tobeChange.split(":")
tobeChange=toChange[1]
curr=current.split(":")
current=curr[1]
return `Are you sure you want to change to ${tobeChange}? not possible to go ${current} `
}
tobeChange="VP:something_to_change"
current="VP:something_current"
console.log(getmsg(tobeChange, current))

Methodology Approach - json string/output

Hope this question is up to par for SO. I've never posted before but looking for some info in regards to approaching a task I have been assigned.
I have a page with Form information, some simple fields that I've got going.
The page outputs a json string of the form fields and writes them to a text file.
What I need to do is use the key: values to fill in a bash script to output to a hotfolder for ingestion into the production environment.
The "addmore" array needs to determine the number of filename fields produced. I should add that this is dynamic, the "addmore" array may contain 1 entry, or up to technically an unlimited number. This number will fluctuate, though.
JSON Output:
{"formatcode":"JFM","serialnumber":"555","callletters":"555","rotator":"555","addmore":["555","444","333",""]}
How can I use the key : value pairs to output this into a file like below:
{"type":"sequential","items":[
{"filename": "/assets/$formatcode/$serialnumber/$addmore1", "description":"First item"},
{"filename": "/assets/$formatcode/$serialnumber/$addmore2", "description": "Second item"},
{"filename": "/assets/$formatcode/$serialnumber/$addmore3", "description": "Third item"}
]}
This should do the trick, I'm using ES6 string templates to create the dynamic filename and description. The resulting object should have addmore.length items, so we reduce based on data.addmore, creating the basic object as our starting point ({ type: "sequential", items: [] }) and pushing the dynamic strings into output.items on each iteration.
const data = {
"formatcode":"JFM",
"serialnumber":"555",
"callletters":"555",
"rotator":"555",
"addmore":[
"555",
"444",
"333",
]
};
const desiredOutput = data.addmore.reduce((p, c, index) => {
p.items.push({
filename: `/assets/${data.formatcode}/${data.serialnumber}/${c}`,
description: `Item ${index + 1}`
});
return p;
}, {
type: "sequential",
items: []
});
console.log(desiredOutput);
If you don't have ES6 available, you can turn the arrow function into a regular function and use the + concat operator instead of string templates.

Categories

Resources