I am working on react-csv. I created an array for custom headers there I used header array and assign label and key. Currently, I have a situation of two fields to be assigned ( in the header, key is used to assign the reference of data fields). I tried but I failed could someone please help me how to achieve this goal.
Thanks
Code
headers = [
{
label: "id",
key: "user.id"
},
{
label: "Agent Name",
key: "user.firstName + user.lastName"
},
{
label: "Agent Email",
key: "user.email"
},
{
label: "Agent Phone",
key: "user.phoneNumber"
},
{
label: "Agent Commission",
key: "agentComission"
},
{
label: "Company Commission",
key: "companyComission"
},
{
label: "Total Sale",
key: "sale"
}
];
key: "user.firstName + user.lastName" },, as you see I want to assign this two fields but when I click on export it gives me empty cell.
I hope this will work
import { CSVLink } from "react-csv";
headers = [
{
label: "id",
key: "id"
},
{
label: "Agent Name",
key: "fullname"
},
{
label: "Agent Email",
key: "email"
},
{
label: "Agent Phone",
key: "phoneNumber"
},
{
label: "Agent Commission",
key: "agentComission"
},
{
label: "Company Commission",
key: "companyComission"
},
{
label: "Total Sale",
key: "sale"
}
];
data = [
{
id: 1,
fullname: "name of agent",
email: "test#gmail.com",
phoneNumber: 123456789,
agentComission: 'agent comission',
companyComission: 'company comission',
sale: 'sale',
},
{
id: 2,
fullname: "name of agent 2",
email: "test2#gmail.com",
phoneNumber: 123456789,
agentComission: 'agent comission 2',
companyComission: 'company comission 2',
sale: 'sale 2',
},
];
<CSVLink data={data} headers={headers}>
Download me
</CSVLink>;
Related
Related to the existing question. How to assign two fields data in header of react-csv. I am working on something and came across the same issue. Asking again since there is no correct answer given. The following code for headers. - key: "user.firstname + user.lastname" doesn't work and the fields are empty. Please help how to get this working! TIA!!
Code:
headers = [
{
label: "id",
key: "user.id"
},
{
label: "Agent Name",
key: "user.firstName + user.lastName"
},
{
label: "Agent Email",
key: "user.email"
},
{
label: "Agent Phone",
key: "user.phoneNumber"
},
{
label: "Agent Commission",
key: "agentComission"
},
{
label: "Company Commission",
key: "companyComission"
},
{
label: "Total Sale",
key: "sale"
}
];
Data format example :
data = [
{
id: 1,
firstnamename: "name ",
lastname: "lastname",
email: "test#gmail.com",
phoneNumber: 123456789,
agentComission: 'agent comission',
companyComission: 'company comission',
sale: 'sale',
},
{
id: 2,
firstnamename: "name",
lastname: "lastname,
email: "test2#gmail.com",
phoneNumber: 123456789,
agentComission: 'agent comission 2',
companyComission: 'company comission 2',
sale: 'sale 2',
},
];
I have two objects.
const arrayOne = [
{
label: "Categories",
to: "/categories",
id: "product_type",
},
{
label: "Colors",
to: "/colors",
id: "color",
},
{
label: "Materials",
to: "/materials",
id: "material",
},
{
label: "Sizes",
to: "/sizes",
id: "sizes",
},
{
label: "Designers",
to: "/designers",
id: "designer_slug",
},
{
label: "Stores",
to: "/stores",
id: "retailer_slug",
},
];
const arrayTwo = [
{
id: "gender",
label: "Gender",
lazy_loaded: false,
},
{
id: "product_type",
label: "Category",
lazy_loaded: false,
},
{
id: "quick_filters",
label: "Quick filters",
lazy_loaded: false,
},
{
id: "final_price",
label: "Price",
lazy_loaded: false,
},
{
id: "color",
label: "Color",
lazy_loaded: false,
},
{
id: "material",
label: "Material",
lazy_loaded: false,
},
{
id: "designer_slug",
label: "Brand",
lazy_loaded: true,
},
{
id: "retailer_slug",
label: "Store",
lazy_loaded: true,
},
];
As you can see they both have the key 'id'. If the IDs in arrayOne aren't in arrayTwo, I would like them to be removed from arrayOne (the whole object). So in this case, only the object with "sizes" should be removed from arrayOne. How would I go about doing this? Thanks in advance!
you could utilize filter:
const newArrayOne = arrayOne.filter(x => arrayTwo.find(y => y.id === x.id))
You could use a Set with id and filter the other array.
const
arrayOne = [{ label: "Categories", to: "/categories", id: "product_type" }, { label: "Colors", to: "/colors", id: "color" }, { label: "Materials", to: "/materials", id: "material" }, { label: "Sizes", to: "/sizes", id: "sizes" }, { label: "Designers", to: "/designers", id: "designer_slug" }, { label: "Stores", to: "/stores", id: "retailer_slug" }],
arrayTwo = [{ id: "gender", label: "Gender", lazy_loaded: false }, { id: "product_type", label: "Category", lazy_loaded: false }, { id: "quick_filters", label: "Quick filters", lazy_loaded: false }, { id: "final_price", label: "Price", lazy_loaded: false }, { id: "color", label: "Color", lazy_loaded: false }, { id: "material", label: "Material", lazy_loaded: false }, { id: "designer_slug", label: "Brand", lazy_loaded: true }, { id: "retailer_slug", label: "Store", lazy_loaded: true }],
two = new Set(arrayTwo.map(({ id }) => id)),
result = arrayOne.filter(({ id }) => two.has(id));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
I have a list which I want sort according to Arrival Date & Departure Date based on Caption and Value. But Arrival and Departure don't exist together in the list. If sort using arrival, then the departure can be ignored, just push to the bottom of the list, and vice versa. How can I achieve that?
var svehicleList = [
{
Brand: 'Volvo',
Summary: [
{
Caption: "Consignee",
Value: "ONE TO ONE SDN BHD",
},
{
Caption: "Arrival",
Value: "18-08-2020 06:01",
}
]
},
{
Brand: 'BMW',
Summary: [
{
Caption: "Consignee",
Value: "ABC SDN BHD",
},
{
Caption: "Arrival",
Value: "14-08-2020 16:03",
}
]
},
{
Brand: 'TOYOTA',
Summary: [
{
Caption: "Consignee",
Value: "MATTA SDN BHD",
},
{
Caption: "Departure",
Value: "14-08-2020 16:03",
}
]
},
{
Brand: 'FERRARI',
Summary: [
{
Caption: "Consignee",
Value: "GLOBAL P SDN BHD",
},
{
Caption: "Departure",
Value: "14-08-2020 18:03",
}
]
},
{
Brand: 'HONDA',
Summary: [
{
Caption: "Consignee",
Value: "HH SDN BHD",
},
{
Caption: "Arrival",
Value: "09-09-2020 16:03",
}
]
},
];
Edited: There is actually two object in summary.
This one helped me: How to Sort Multi-dimensional Array by Value?
You have to write your own comparision function.
You could find the object with the wanted Caption, then sort by occurence and then by date with a wrapper for getting an ISO date.
const
getISO = (string = '') => string.replace(/^(..)-(..)-(....) (.*$)/, '$3-$2-$1 $4'),
sortBy = caption => ({ Summary: a }, { Summary: b }) => {
const
aa = a.find(o => o.Caption === caption),
bb = b.find(o => o.Caption === caption);
return !aa - !bb
|| getISO(aa?.Value).localeCompare(getISO(bb?.Value));
},
vehicleList = [{ Brand: 'Volvo', Summary: [{ Caption: "Consignee", Value: "ONE TO ONE SDN BHD" }, { Caption: "Arrival", Value: "18-08-2020 06:01" }] }, { Brand: 'BMW', Summary: [{ Caption: "Consignee", Value: "ABC SDN BHD" }, { Caption: "Arrival", Value: "14-08-2020 16:03" }] }, { Brand: 'TOYOTA', Summary: [{ Caption: "Consignee", Value: "MATTA SDN BHD" }, { Caption: "Departure", Value: "14-08-2020 16:03" }] }, { Brand: 'FERRARI', Summary: [{ Caption: "Consignee", Value: "GLOBAL P SDN BHD" }, { Caption: "Departure", Value: "14-08-2020 18:03" }] }, { Brand: 'HONDA', Summary: [{ Caption: "Consignee", Value: "HH SDN BHD" }, { Caption: "Arrival", Value: "09-09-2020 16:03" }] }];
vehicleList.sort(sortBy('Arrival'));
console.log(vehicleList);
vehicleList.sort(sortBy('Departure'));
console.log(vehicleList);
.as-console-wrapper { max-height: 100% !important; top: 0; }
I am trying to define an interface for the following data:
result =
{
"data1" : [ { "type1" : 30 }, { "type2" :40 } ],
"data1" : [ { "abc" : 40 }, { "def" 940 } ],
"data3" : []
}
here the keys and values inside result object are dynamic. Even the values inside array of objects are dynamic but it will be of format string: number or that array can be empty just as in data3.
I tried using [x:any]: any, but looks like it will remove the significance of rest of the types defined in interface as it will match eveything.
Can someone help me here?
You can define dynamic key interface as follows:
interface Result {
[key: string]: {
[childKey: string]: number;
}[];
}
Something similar you can do -->
You don't need to use an indexer (since it a bit less typesafe). You have two options :
interface EnumServiceItem {
id: int; label: string; key: any
}
interface EnumServiceItems extends Array<EnumServiceItem>{}
// Option A
var result: EnumServiceItem[] = [
{ id: 0, label: 'CId', key: 'contentId' },
{ id: 1, label: 'Modified By', key: 'modifiedBy' },
{ id: 2, label: 'Modified Date', key: 'modified' },
{ id: 3, label: 'Status', key: 'contentStatusId' },
{ id: 4, label: 'Status > Type', key: ['contentStatusId', 'contentTypeId'] },
{ id: 5, label: 'Title', key: 'title' },
{ id: 6, label: 'Type', key: 'contentTypeId' },
{ id: 7, label: 'Type > Status', key: ['contentTypeId', 'contentStatusId'] }
];
// Option B
var result: EnumServiceItems = [
{ id: 0, label: 'CId', key: 'contentId' },
{ id: 1, label: 'Modified By', key: 'modifiedBy' },
{ id: 2, label: 'Modified Date', key: 'modified' },
{ id: 3, label: 'Status', key: 'contentStatusId' },
{ id: 4, label: 'Status > Type', key: ['contentStatusId', 'contentTypeId'] },
{ id: 5, label: 'Title', key: 'title' },
{ id: 6, label: 'Type', key: 'contentTypeId' },
{ id: 7, label: 'Type > Status', key: ['contentTypeId', 'contentStatusId'] }
]
Personally I recommend Option A (simpler migration when you are using classes not interfaces).
I am building best employee survey project using surveyjs. When working in matrix type, I get trouble how to change text "employee1,employee2,employee3" with real name employee
see picture.
so far here is my code:
var json = {
title: "Software developer survey.",
pages: [
{
title: "Part 1",
questions: [
{
type: "matrix",
name: "Question1",
//isAllRowRequired: true,
title: "Please indicate if you agree or disagree with the following statements",
columns: [
{
value: 1,
text: "Strongly Disagree"
}, {
value: 2,
text: "Disagree"
}, {
value: 3,
text: "Neutral"
}, {
value: 4,
text: "Agree"
}, {
value: 5,
text: "Strongly Agree"
}
],
rows: [
{
value: "valueEmployee1",
text: "Employee1 "
}, {
value: "valueEmployee2",
text: "Employee2"
}, {
value: "valueEmployee3",
text: "Employee3"
}
]
},
//
]
},
thank you for your help
You can add matrix rows dynamically:
var json = {
questions: [
{
type: "matrix",
name: "score",
title: "Please score the employees in the list",
columns: [
{
value: 1,
text: "Bad"
}, {
value: 2,
text: "So-so"
}, {
value: 3,
text: "Good enough"
}, {
value: 4,
text: "Good"
}, {
value: 5,
text: "Excellent"
}
],
rows: [
]
}
]
};
window.survey = new Survey.Model(json);
var q = survey.getQuestionByName("score");
var employees = [{ id: "id1", name: "John"}, { id: "id2", name: "Ben"}, { id: "id3", name: "Chack"}]
employees.forEach(function(employee) {
q.rows.push(new Survey.ItemValue(employee.id, employee.name));
});
Here is the working sample - https://plnkr.co/edit/OMBt1n02Qc8f5znUmOHE?p=preview