I'm trying to display information from child and parent data within a json object. Below is my data:
$scope.electionDetails = {
id : 1,
election_type: "CityCouncil",
election_name: "City A City Council Elections
candidates : [{
id: 1,
election_id: 1,
position_id: 1,
first_name: "John",
last_name: "Doe"
},
{
id:2,
election_id:1,
position_id:1,
first_name: "Jane",
last_name: "Doe"
},
{
id:3,
election_id:1,
position_id:2,
first_name: "Mike",
last_name: "Doe"
},
{
id:4,
election_id:1,
position_id:2,
first_name: "Mary",
last_name: "Doe"
}],
positions : [{
id:1,
election_id: 1,
position: "Seat 1"
},
{
id:2,
election_id:1,
position: "Seat 2"
}]
}
I want to display this data grouped, using angular like so:
City A City Council Elections
Seat 1
John Doe
Jane Doe
Seat 2
Mike Doe
Mary Doe
Here you go. The HTML structure may not be exactly what you want, so you can change up what tags you use, but this is the basic idea using ng-if and ng-repeat to create lists of candidates for a given seat.
DEMO
Related
I have been struggling to set a filter a column that has multiple data in Material-table.
The data is below:
data: [
{
id: 1,
staffName: "John",
role: "1"
},
{
id: 2,
staffName: "Smith",
role: "1,2"
},
{
id: 3,
staffName: "Alex",
role: "2"
}
],
role: {
1: "administrator",
2: "sales"
}
};
The column is below:
const columns = [
{ title: "Id", field: "id" , filtering: false},
{ title: "Name", field: "staffName" , filtering: false},
{
title: "Role",
field: "role",
lookup: roles,
render: (data) =>
data.role
.split(",")
.map((s) => roles[s])
.join(", ")
}
];
I want to show John and Smith when administrator is checked to filter in Role,
but it shows only John.
Similarly, when sales is checked only Alex shows up(I want to show both Smith and Alex).
How can I change the filter including data checked?
Link to code sandbox here
I am trying to sort a table that has children, but it ignores the value "Age" of the children. All items including children should sort in Ascending or descending order. Not sure if this is a bug or my implementation is incorrect.
Codesanbox: https://codesandbox.io/s/hardcore-paper-nvodp
Current Result, Children are ignored. The idea is too sort every item in the tree.
js:
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name"
},
{
title: "Age",
dataIndex: "age",
key: "age",
width: "12%",
sorter: {
compare: (a, b) => a.age - b.age,
multiple: 3
}
},
{
title: "Address",
dataIndex: "address",
width: "30%",
key: "address"
}
];
const data = [
{
key: 1,
name: "John Brown sr.",
age: 60,
address: "New York No. 1 Lake Park",
children: [
{
key: 11,
name: "John Brown",
age: 42,
address: "New York No. 2 Lake Park"
}
]
},
{
key: 2,
name: "Joe Black",
age: 22,
address: "Sidney No. 1 Lake Park",
children: [
{
key: 10,
name: "John Brown",
age: 12,
address: "New York No. 2 Lake Park"
}
]
}
];
function onChange(pagination, filters, sorter, extra) {
console.log("params", extra);
}
function TreeData() {
return (
<>
<Table
columns={columns}
dataSource={data}
onChange={onChange}
indentSize={0}
/>
</>
);
}
You can not resort parent and children in the same tree, so that all elements are sorted by age.
This wouldn't be a tree any longer and does not make sense at all. You would lost the parent - child relation.
If you want to sort all elements by age, you have to move the items into a list and sort them there.
You can only sort the items at the same level and that is what #edo9k 's implementation does correctly!
Tree sorting works as expected by age at for every tree level:
parents [22, 61, 62]
children1 [12]
children2 [10, 30, 40]
children3
[41, 42]
Best way you can achieve this through AntD is by using the Nested Tables component. You can display your expandable/children data for each row in your main table into this nested table and then by incorporating the sortable functions in your nested table you can sort that data.
I am working with Reactjs and my data looks like this:
const this.state.singlePost = [{
name: 'Johnny',
age: 20,
birthPlace: 'Germany'
},
{
name: 'Samuel',
age: 22,
birthPlace: 'France'
}
]
let this.state.post = [{
email: 'john#gm.co',
number: 4567887654
},
{
email: 'samuel#gm.co',
number: 0987655881
},
]
I want to make something like this:
let editedPost = [{
name: 'Johnny',
age: 20,
birthPlace: 'Germany',
email: 'john#gm.co',
number: 4567887654
},
{
name: 'Samuel',
age: 22,
birthPlace: 'France',
email: 'samuel#gm.co',
number: 0987655881
}
]
It might be a stupid question, but I got stuck for a few hours on this, Could somebody help me please? I have 5 items in this.state.singlePost and 10 items in this.state.post. How do I put the stuff in this.state.singlePost into this.state.post just like the way I did in editedPost?
In theory, you would have a common key between the two objects that you would be able to merge on as without you will be relying on matching the index of objects.
let post = [
{email: 'john#gm.co',
number: 4567887654},
{email: 'samuel#gm.co',
number: 987655881}
]
let singlePost = [
{name: 'Johnny', age: 20, birthPlace: 'Germany'},
{name: 'Samuel', age: 22, birthPlace: 'France'}
]
let newList = post.map((item, i) => ({...item, ...singlePost[i]}))
console.log(newList)
Output:
[
{
email:"john#gm.co",
number:4567887654,
name:"Johnny",
age:20,
birthPlace:"Germany"
},
{
email:"samuel#gm.co",
number:987655881,
name:"Samuel",
age:22,
birthPlace:"France"
}
]
There is many ways to do this in Javascript. The way I chose prevents mutation of data, which may be something you are concerned with when using React.
In UnderscoreJS there is a method called _.difference which can give difference between two arrays.
But In my case I have two different arrays as shown below:
Array 1:
var obj1 = [
{
id: 1,
name: 'abc-1',
lname: 'xyz-1',
phone: 'xxxxxx1',
company: 'Comp-1',
address: 'Address-1',
country: 'C-1',
securityNo: 'xxxx-1'
},
{
id: 2,
name: 'abc-2',
lname: 'xyz-2',
phone: 'xxxxxx2',
company: 'Comp-2',
address: 'Address-2',
country: 'C-2',
securityNo: 'xxxx-2'
},
{
id: 3,
name: 'abc-3',
lname: 'xyz-3',
phone: 'xxxxxx3',
company: 'Comp-3',
address: 'Address-3',
country: 'C-3',
securityNo: 'xxxx-3'
}]
And another array contains only limited properties:
Array 2:
var obj2 = [
{
id: 1,
name: 'abc-1',
lname: 'xyz-1'
},
{
id: 2,
name: 'abc-2',
lname: 'xyz-2'
}]
Now I would like to apply difference between these two arrays like:
_.difference(obj1, obj2);
And it should give me 3rd element as a result.
But I could not find any way to achieve this.
See answer using underscore's “difference” method on arrays of objects. This is due to Object comparison.
I have a lot of objects I'm saving to Mongoose. They are deep objects.
var obj1 = {
first_name : 'adam',
last_name: 'smith',
car : [{
make: 'honda',
model: 'civic',
colors: [{
name: 'red',
code: 'ff0000'
}]
}]
}
Going in to a matching model like so:
var Owner = new Schema({
first_name: String,
last_name: String,
cars:[{
make: String,
model: String
colors: [{
name: String,
code: String
}]
}]
});
Which is all fine and dandy, unless adam has a second record:
var obj2 = {
first_name : 'adam',
last_name: 'smith',
car : [{
make: 'ford',
model: 'focus',
colors: [{
name: 'blue',
code: '0000ff'
}]
}]
}
var obj3 = {
first_name : 'adam',
last_name: 'smith',
car : [{
make: 'honda',
model: 'civic',
colors: [{
name: 'blue',
code: '0000ff'
}]
}]
}
Each overwrites the previous one completely when I do something like:
Owner.findOneAndUpdate({first_name:"adam", last_name: "smith"}, obj2, {upsert: true});
How do I get mongoose to create a new record when there isn't one, but append to the car array when there is? And if the car already exists, append to the colors array?
To make things a little more fun, the structure of the data is not consistent in my case. It is for a given collection, but each of my collections are being set up dynamically, so the model may be many layers deep and have any given keys.
This approaches allows you to push a new element onto an array field
db.findOneAndUpdate(
{first_name:"adam", last_name: "smith"},
{ $push: { cars : {
make: 'ford',
model: 'focus'
}
}
},
{ safe: true,
upsert: false,
new : true
}
);
I feel your pain regarding trying to guess syntax for arbitrarily complex insert/update/deletes ... the world of mongo/mongoose is screaming for a tool to read Schemas/data and let you interactively describe your particulars to synthesize code snippets like above