pdfmake how to add more than one element in a column - javascript

I'm trying to generate pdf files using pdf make. But when I define a column I can't add more than one element to that column. I want to add a table and a separate text. But text doesn't appear in the generated pdf file.
This is my code.
columns: [
{
text: `Timesheet${timesheet}\n`
},
{
text: `Rate${rate}\n\n`
},
{
text: "Amount Due",
table: {
body: xyz
}
}
]
Here table appears but the text Amount Due doesn't appear.
How do I fix this?

You can set an array of objects inside the column (instead of an object of objects) as follows:
columns: [
{
text: `Timesheet${timesheet}\n`
},
{
text: `Rate${rate}\n\n`
},
[
{text: "Amount Due"},
{table: {
body: xyz
}}
]
]

You may want to use stack, that will allow you to add multiple elements in the same column.
var dd = {
content: [
{
columns: [
{
text: `Timesheet\n`
},
{
text: `Rate\n\n`
},
{
stack: [
{text: "Amount Due"},
{table: {
body: [
["one", "two"],
["three", "four"]
]
}}
]
}
]
}
]
}

Related

Recreate array on basis of object's child

Some time ago I asked a question about how to filter array based on its key today this function but i am working a new implementation that I'm doing.
create array on basis of object's child
But I'm doing a refactoring of how I treat the field value because before I just need the first object and its value [0].value now I need to expand this logic to work with array I'll leave some examples below.
My Code I'm currently using
https://codesandbox.io/s/lodash-tester-forked-fcdmy1?file=/index.js
Original, unfiltered data from API:
[
{
"_id" : ObjectId("62548802054c225fe560f41a"),
"test" : [
"taetea",
"atty",
],
"Peso" : [
{
"_id" : "624f2ab363dd92f2101de167",
"value" : "255"
}
],
}
]
Expected result for table data:
[
{
"_id" : "62548802054c225fe560f41a",
"test1":"taetea",
"test2":"atty",
"Peso":"255"
},
{
...
},
]
Anyone who can help I'm grateful I will repay with rep+ and my eternal thanks xD
As i understand,you want to use title property from the table Columns & search it in the API data.If the title property represents an array of strings,then add all the strings otherwise add the value property.
const apiData = [
{
"_id" : "62548802054c225fe560f41a",
"test" : [
"taetea",
"atty",
],
"Peso" : [
{
"_id" : "624f2ab363dd92f2101de167",
"value" : "255"
}
],
}
];
const tableData = [
{
title: "Peso",
dataIndex: "peso",
key: "peso",
},
{
title: "test",
children: [
{
title: "ex: ${title} field ${title.length}",
dataIndex: "ex: ${title} + ${title.length}",
key: "ex: ${title} + ${title.length}",
},
{
title: "ex: ${title} field ${title.length}",
dataIndex: "ex: ${title} + ${title.length}",
key: "ex: ${title} + ${title.length}",
},
],
},
];
const tableKeys = tableData.map(t => t.title)
const output = []
apiData.forEach(obj => {
const data = []
Object.keys(obj).filter(key => tableKeys.includes(key)).forEach(key =>{
if(typeof obj[key][0]=== 'string'){
data.push(...obj[key].map((val,index) => ({[`${key}${index+1}`]:val})))
}else{
data.push({[key]: obj[key][0].value})
}
})
// Add the id of the the api data & spread the objects collected
output.push({'_id':obj._id,
...data.reduce((map,elem)=>({...map,...elem}),
{})})
})
console.log('output',output)

Returning the ids from the object within the arrays

I have a multidimensional javascript array of objects that I am trying to use to simply collate the Unit id into a new array as shown below.
What is the best solution for returning the id within the inner value so I just get an array of the ids whatever I try seems to not work
[
{
units: [
{
id: 10000282,
name: "Group 1",
},
{
id: 10000340,
name: "Group 2",
},
{
id: 10000341,
name: "Group 3",
},
],
},
{
units: [
{
id: 10000334,
name: "Group 4",
},
],
},
]
Expected output - just return an array with simply the ids
e.g
ids = [ 10000282, 10000340, 10000341, 10000334 ]
Assuming that data is in variable data:
> data.map(o => o.units.map(u => u.id)).flat()
[ 10000282, 10000340, 10000341, 10000334 ]
This assumes you're in an environment where .flat() is a thing.
If that's not the case, the longer way around is
const ids = [];
data.forEach(o => {
o.units.forEach(u => {
ids.push(u.id);
});
});

How to map model to table when the structure is array based?

I have my data as following:
{
meta: {
format: "csv",
info: "desc",
columns: [
{
id: "Name",
type: "Text",
length: 32
},
{
id: "Text",
type: "Text",
length: 128
}]
},
rows: [
["John","xxxx"],
["Alpha","yyyy"],
["Beta","wwww"],
["Gamma","zzzz"]]
}
Now, I am struggling to map the records to a Table control as Columns and Rows. Column seems straight forward, straight map, but the rows since lacks a mapping to column I wonder what could be the simplest way.
Approach Steps:
Make a keys[] from column.id of each columns record.
Traverse the rows[]
Each loop, while keys.length create an object as {keys[j]:row[k]}
Push to an array
Recreate the original JSON but replace Rows arrays with Objects
I am really struggling to translate this into code specially at the rows[] parsing and creating Objects. Is there, I am sure there must be, an efficient way to achieve this.
Here is what you could do. using Array.map and forEach.
var input = {
meta: {
format: "csv",
info: "desc",
columns: [{
id: "Name",
type: "Text",
length: 32
}, {
id: "Text",
type: "Text",
length: 128
}]
},
rows: [
["John", "xxxx"],
["Alpha", "yyyy"],
["Beta", "wwww"],
["Gamma", "zzzz"]
]
};
var columns = input.meta.columns.map((column) => {
return column.id
});
var rows = input.rows.map((row) => {
var obj = {};
row.forEach((column, idx) => {
obj[columns[idx]] = column;
});
return obj;
});
input.rows = rows;
console.log(input);

Angular JS replace values ng grid

I am newbie in angular JS and I think that I need help.
This is my issue :
I have a ng-grid which is linked with a table. Within there are values and a ID (which is a foreignkey from a another table). I don't want to show the ID but another field in this foreign table.
CompanyFactory.getCompanies().success(function (data) { $scope.objs = data })
$scope.gridOptions = {
data: 'objs',
showGroupPanel: true,
jqueryUIDraggable: true,
columnDefs: [
{ field: 'COMP_NAME', displayName: 'comp_name'},
{ field: 'COUNTRY', displayName: 'country' },
{ field: 'LU_SECTOR_ID', displayName: 'sector', },
]
};
I want show the sector_name field instead of the sector_ID field. How can I make the relation between these two tables ?
$scope.countries = [
{ COMP_NAME: 'KOLI', COUNTRY: 'KOLI_COUNTRY', LU_SECTOR_ID: '1'},
{ COMP_NAME: 'ZOLI', COUNTRY: 'ZOLI_COUNTRY', LU_SECTOR_ID: '2'},
{ COMP_NAME: 'TULI', COUNTRY: 'TULI_COUNTRY', LU_SECTOR_ID: '3'},
];
$scope.sector= [
{ LU_SECTOR_ID: '1', LU_SECTOR_NAME: 'SECTOR_1'},
{ LU_SECTOR_ID: '2', LU_SECTOR_NAME: 'SECTOR_2'},
{ LU_SECTOR_ID: '3', LU_SECTOR_NAME: 'SECTOR_3'},
];
I would like to show in the ng-grid the SECTOR NAME instead of the SECTOR_ID.
It is difficult to answer the question without the information of the data object.
However, suppose that your data object returned by your CompanyFactory is something like:
[
{
"COMP_NAME": "Tomms",
"COUNTRY": "France",
"LU_SECTOR_ID": "9":,
"SECTOR": { "SECTOR_NAME": "IT" }
}
]
You just need to bind the correct field:
$scope.gridOptions = {
data: 'objs',
showGroupPanel: true,
jqueryUIDraggable: true,
columnDefs: [
{ field: 'COMP_NAME', displayName: 'comp_name'},
{ field: 'COUNTRY', displayName: 'country' },
// Here
{ field: 'SECTOR.SECTOR_NAME', displayName: 'sector', },
]
};
But, if you returning both objects separated you will need to link it manually. My suggestion is to perform that in the server side and return the object like I used as an example.
the problem is here
{ field: 'LU_SECTOR_ID', displayName: 'sector', }
Specifically
LU_SECTOR_ID
you need to change the name of this variable to be the name on the objs and not the id

Converting JSON to DynaTree Object

I have following data Structure which I want to use in data structure given in Dyntree Format:
[
{
title: "my Title",
isFolder: "true",
key: 1
}
]
I am setting above data structure as STRING in a JS variable.
When I set this value as a javascript variable, it gives error of Invalid Type
DynTree format is given below;
var fakeJsonResult = [
{ title: 'Lazy node 1', isLazy: true },
{ title: 'Simple node 2', select: true }
];
This is simple if you want to create a dynatree from the object you mentioned simply do this
var children = [
{
title: "my Title",
isFolder: "true",
key: 1
}
];
$('#tree').dynatree({
children : children
});

Categories

Resources