I have 2 array of object, one is the preloaded list, one is the selected items. My problem is couldn't make the selected items checked on checkboxes.
https://jsfiddle.net/8usvfzv9
class HelloWidget extends React.Component {
constructor(props) {
super(props);
this.list = [{
"id": "exhibitions",
"name": "Exhibitions"
}, {
"id": "festivals_n_concerts",
"name": "Festivals & Concerts"
}, {
"id": "grand_opening",
"name": "Grand Opening"
}, {
"id": "meeting",
"name": "Meeting"
}, {
"id": "party",
"name": "Party"
}, {
"id": "product_launches",
"name": "Product Luanches"
}, {
"id": "roadshows",
"name": "Roadshows"
}, {
"id": "sporting_events",
"name": "Sporting Events"
}, {
"id": "trade_show",
"name": "Trade Show"
}]
this.selectedList = [{
"id": "grand_opening",
"name": "Grand Opening",
"space_event_id": "grand_opening"
}, {
"id": "trade_show",
"name": "Trade Show",
"space_event_id": "trade_show"
}]
}
render() {
return (<div>
{this.list.map(obj => <div><br /><input
key={obj.name}
checked={this.selectedList.findIndex(o => o.id === obj.id)}
type="checkbox" >{obj.name}</input></div>)}
</div>
)
}
}
I think this line is wrong
checked={this.selectedList.findIndex(o => o.id === obj.id)}
base on the output result. Any clue how to use findIndex?
As 'checked' prop only works with boolean and findIndex returns number, you can modify as below:
checked={this.selectedList.findIndex(o => o.id === obj.id) !== -1}
Related
I have an array with object, which I need to sort in a such way that first the parent object should appear, and then its children objects, and so on. However, when I try to find index of a parent object in array in order to push the children object after it, the findIndex() method returns -1. Can somebody point to the root of this problem, as I cannot clearly see why it does that.
The code and data array that I'm using is written below.
const data = [
{
"_id": "0",
"parent": null,
"title": "All"
}, {
"_id": "61c0a9cb8f67e811d55abb2d",
"parent": null,
"title": "Electronics"
}, {
"_id": "61c0a9cb8f67e811d55abb2e",
"parent": { "_id": "61c0a9cb8f67e811d55abb2d" },
"title": "Phones"
}, {
"_id": "61c0a9cb8f67e811d55abb2f",
"parent": { "_id": "61c0a9cb8f67e811d55abb2d" },
"title": "Laptops"
}, {
"_id": "61c0a9cb8f67e811d55abb30",
"parent": { "_id": "61c0a9cb8f67e811d55abb2d" },
"title": "TVs"
}, {
"_id": "61c0a9cb8f67e811d55abb31",
"parent": null,
"title": "Literature"
}, {
"_id": "61c0a9cb8f67e811d55abb32",
"parent": { "_id": "61c0a9cb8f67e811d55abb31"},
"title": "Study Literature"
}, {
"_id": "61c0a9cb8f67e811d55abb33",
"parent": { "_id": "61c0a9cb8f67e811d55abb31" },
"title": "Fictional Literature"
}, {
"_id": "61c0a9cb8f67e811d55abb34",
"parent": { "_id": "61c0a9cb8f67e811d55abb31" },
"title": "Comic books"
}, {
"_id": "61c0a9cb8f67e811d55abb35",
"parent": { "_id": "61c0a9cb8f67e811d55abb2e" },
"title": "Smartphones"
}, {
"_id": "61c0a9cb8f67e811d55abb36",
"parent": { "_id": "61c0a9cb8f67e811d55abb35" },
"title": "Accessories"
}
];
let parents = [];
data.forEach( element => {
if( element.parent == null ) {
parents.push(element);
}
else {
let parentId = element.parent._id;
let index = parents.findIndex(item => {
item._id == parentId;
});
console.log(index);
parents.splice(index+1, 0, element);
}
});
Using item => {parentId == item._id;} does require a 'return' to be used: item => {return parentId == item._id;} without the return the function is basically item => null; which is than seen as false by .findIndex() resulting in a -1
If you use the arrow function without the curly braces a return is implied (But limits you to single line expressions as a trade-off): item => parentId == item._id
Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
I need to grab all of the ID values from the previous object and build out an array of the IDs in each parent item. This needs to be done in a generic manner and cannot use the name of the property. However, each property does inherit a base class. There may be other arrays on the structure that do not inherit from the SubResource class, so only those that do, should be added to the identifierHierarchy.
export abstract class SubResource {
public id: number;
public identifierHierarchy: number[] = [];
}
Given the following snippet of data
let data = [{
"id": "1",
"name": "Deer, spotted",
"parents": [
{
"id": "133",
"name": "Jaime Coldrick",
"children": [
{
"id": "0723",
"name": "Ardys Kurten",
"grandchildren": [
{
"id": "384",
"name": "Madelle Bauman"
},
{
"id": "0576",
"name": "Pincas Maas"
},
{
"id": "5",
"name": "Corrie Beacock"
}
]
}]
}]
}]
I need for the values on the objects to now be.
[{
"id": "1",
"name": "Deer, spotted",
"parents": [{
"id": "133",
"name": "Jaime Coldrick",
"identifierHierarchy": ["1"],
"children": [{
"id": "0723",
"name": "Ardys Kurten",
"identifierHierarchy": ["1", "133"],
"grandchildren": [{
"id": "384",
"name": "Madelle Bauman",
"identifierHierarchy": ["1", "133", "0723"]
},
{
"id": "0576",
"name": "Pincas Maas",
"identifierHierarchy": ["1", "133", "0723"]
},
{
"id": "5",
"name": "Corrie Beacock",
"identifierHierarchy": ["1", "133", "0723"]
}
]
}]
}]
}]
I think this could work:
function addHierarchy(items: any[], chain: string[], inherited: string[] = []) {
items.forEach(item => {
if (inherited.length)
item.identifierHierarchy = inherited;
if (chain.length)
addHierarchy(item[chain[0]], chain.slice(1), [...inherited, item.id]);
});
}
addHierarchy(data, ['parents', 'children', 'grandchildren']);
Not as type-safe as I would like, but...
export class RestHierarchyService {
public static assignHierarchyIdentifiers(subResource: SubResource | any, parentIdentifiers: any): void {
const composedSubResources = Object.entries(subResource)
.filter(([key, value]) => key !== 'identifierHierarchy' && value.constructor === Array)
.map(([key, value]) => Object.values(value).reduce(x => x));
subResource.identifierHierarchy = parentIdentifiers;
composedSubResources.forEach(x => RestHierarchyService.assignHierarchyIdentifiers(x, [...parentIdentifiers, subResource.id]));
}
}
ancestry.forEach(x => x.parents.forEach(y => RestHierarchyService.assignHierarchyIdentifiers(y, [x.id])));
I have an Array of Objects, each containing Array and Objects, like so:
data = [{
"id": 10022,
"date": "2017-12-31T03:44:19.963808Z",
"bought_beats": [{
"id": 10034,
"beat": {
"id": 6334,
"name": "Glass",
"producer": {
"id": 23,
"display_name": "MadReal",
}
},
"license": {
"id": 10034,
"name": "Premium",
},
}, {
"id": 894,
"beat": {
"id": 6334,
"name": "Other Name",
"producer": {
"id": 25,
"display_name": "Other Name",
}
},
"license": {
"id": 10034,
"name": "Premium",
},
}]
}, {
"moredata": "stuff"
}]
And I need to filter the bought_beats property, and only return beat, if beat.producer.id === 23
This is what I have but it's clearly not working
data.forEach(order => {
return order.bought_beats.filter(item => item.beat.id === producerId)
})
===========
Edit1:
Trying this. It "works", but it also removed some properties (id & date) from each order object (which is each index of data), so I have objects that only contain the array of "bought_beats"
var res = data.map(item => item.bought_beats.filter(item => item.beat.producer.id === 23))
========
Edit2
This seems to be 1 solution, it maintains the array and object structure the same, while it removes those unwanted elements from the bought_beats array.
data.forEach(order => {
let elementToRemoveIndex = order.bought_beats.findIndex(item => item.beat.producer.id !== 23)
order.bought_beats.splice(elementToRemoveIndex, 1)
})
Thanks #Pac0 for the continuous help
use .find over data.bought_beats since its an array,
DEMO
var data = [{
"id": 10022,
"date": "2017-12-31T03:44:19.963808Z",
"bought_beats": [{
"id": 10034,
"beat": {
"id": 6334,
"name": "Glass",
"producer": {
"id": 23,
"display_name": "MadReal",
}
},
"license": {
"id": 10034,
"name": "Premium",
},
}, {
"id": 894,
"beat": {
"id": 6334,
"name": "Other Name",
"producer": {
"id": 25,
"display_name": "Other Name",
}
},
"license": {
"id": 10034,
"name": "Premium",
},
}]
}, {
"moredata": "stuff"
}];
var result = data.find(dat => dat.bought_beats.some(item => item.beat.producer.id === 23));
console.log(result);
If I understood correctly, this should be what you want :
// project each object to its bought_beats / beats part
var beatsArrays = data.filter(x => x.bought_beats).map(x => x.bought_beats);
// flatten the array of arrays of beats into a simple array of beats
var beats = [].concat.apply([],beatsArrays).map(x => x.beat);
// filter
var relevantBeats = beats.filter(item => item.producer.id === 23);
// serve with a cherry in a sugar-frost cocktail glass (happy new year ! )
console.log(relevantBeats);
Snippet :
data = [{
"id": 10022,
"date": "2017-12-31T03:44:19.963808Z",
"bought_beats": [{
"id": 10034,
"beat": {
"id": 6334,
"name": "Glass",
"producer": {
"id": 23,
"display_name": "MadReal",
}
},
"license": {
"id": 10034,
"name": "Premium",
},
}, {
"id": 894,
"beat": {
"id": 6334,
"name": "Other Name",
"producer": {
"id": 25,
"display_name": "Other Name",
}
},
"license": {
"id": 10034,
"name": "Premium",
},
}]
}, {
"moredata": "stuff"
}];
// project each object to its bought_beats / beats part
var beatsArrays = data.filter(x => x.bought_beats).map(x => x.bought_beats);
// flatten the array of arrays of beats into a simple array of beats
var beats = [].concat.apply([],beatsArrays).map(x => x.beat);
// filter
var relevantBeats = beats.filter(item => item.producer.id === 23);
// serve with a cherry in a sugar-frost cocktail glass (happy new year ! )
console.log(relevantBeats);
// for each order
data.forEach(order => {
// we loop thorugh the bought beats array
order.bought_beats.forEach((item, index) => {
// and if there's a beat from another producer, we remove it
if (item.beat.producer.id !== producerId) order.bought_beats.splice(index, 1)
})
})
Can't use javascript filter in multi-dimensional object.
var object = [{
"id": "1",
"name": "General",
"cards": [{
"id": "1",
"name": "shawn"
}, {
"id": "2",
"name": "neo"
}]
}, {
"id": "2",
"name": "CEO",
"cards": [{
"id": "1",
"name": "Raman"
}, {
"id": "2",
"name": "Sheena"
}]
}]
function searchFor(item) {
return item.cards.filter(
(card) => {
return card.name.indexOf("Raman") !== -1;
}
);
}
var filtered = object.filter(searchFor);
console.log(filtered);
This is how I am trying, inside the searchFor card.name I am getting the correct card name but filtering is returning all the cards.Its not filtering.
Could any help me with this.
An empty array isn't considered falsey in Javascript. So instead of returning the result of filtering the cards array, test its length.
var object = [{
"id": "1",
"name": "General",
"cards": [{
"id": "1",
"name": "shawn"
}, {
"id": "2",
"name": "neo"
}]
}, {
"id": "2",
"name": "CEO",
"cards": [{
"id": "1",
"name": "Raman"
}, {
"id": "2",
"name": "Sheena"
}]
}]
function searchFor(item) {
return item.cards.filter(
(card) => {
return card.name.indexOf("Raman") !== -1;
}
).length != 0;
}
var filtered = object.filter(searchFor);
console.log(filtered);
You were returning the filtered array, which would produce a TRUE result whenever cards existed. So you can just turn that into a boolean, by saying when the item.cards.filter(...).length > 0.
var object = [{
"id": "1",
"name": "General",
"cards": [{
"id": "1",
"name": "shawn"
}, {
"id": "2",
"name": "neo"
}]
}, {
"id": "2",
"name": "CEO",
"cards": [{
"id": "1",
"name": "Raman"
}, {
"id": "2",
"name": "Sheena"
}]
}]
var searchFor = (card) => card.name.indexOf("Raman") > -1;
var filteredCards = object.reduce((cards, item) => cards.concat(item.cards.filter(searchFor)), []);
var filteredObj = object.map(i => {
i.cards = i.cards.filter(searchFor);
return i;
}).filter(i => i.cards.length)
console.log(filteredCards, filteredObj)
Updated
I updated the code snippet to produce either the cards which were found. I also provide a method for returning all objects which contain the needed cards, and filter out the other cards.
// HTML Part
<div class="filter-list">
<button class="filter" data-filter-key="all">all</button>
<button class="filter" data-filter-key="open">open</button>
<button class="filter" data-filter-key="done">done</button>
</div>
// CSS Part
.filter:hover,
.filter:focus,
[data-active-filter="all"] .filter[data-filter-key="all"],
[data-active-filter="done"] .filter[data-filter-key="done"],
[data-active-filter="open"] .filter[data-filter-key="open"] {
text-decoration: underline;
}
[data-active-filter="open"] [data-completed="true"],
[data-active-filter="done"] [data-completed="false"] {
display: none;
}
// Script Part
(function () {
const mainNode = document.querySelector("main");
const filters = document.querySelector(".filter-list");
for (const filter of filters.children) {
filter.addEventListener("click", () => {
mainNode.setAttribute(
"data-active-filter",
filter.getAttribute("data-filter-key")
);
});
}
mainNode.setAttribute("data-active-filter", "all");
})();
How would I be able to nest json object if the parent and its children was given as a property.
The data looks like:
"1": {
"id": 1,
"name": "foo",
"parent": null,
"root": 1,
"children": [2, 4, 6],
"posts":[
{ "id": "1", "name": "item1" },
{ "id": "2", "name": "item2" },
{ "id": "3", "name": "item3" }
]
},
"2": {
"id": 2,
"name": "bar",
"parent": 1,
"root": 1,
"children": null,
"posts":[
{ "id": "4", "name": "item4" }
]
},
"3": {
"id": 3,
"name": "bazz",
"parent": null,
"root": 3,
"children": [5, 7],
"posts":[
{ "id": "5", "name": "item5" },
{ "id": "6", "name": "item6" }
]
},
....
A simple groupby using lodash won't do it.
var group = _.groupBy(data, 'parent');
Here is a fiddle:
http://jsfiddle.net/tzugzo8a/1/
The context of question is a nested categories with subcategories, and categories can have categories and posts in them.
Basically I don't want to have a different property for children and posts, since they are all children of a parent.
Desired output
"1": {
"id": 1,
"name": "foo",
"parent": null,
"root": 1,
"isCategory": true,
"children": [
{
"id": 2,
"name": "bar",
"parent": 1,
"root": 1,
"isCategory": true,
"children": null
},
{ "id": "1", "name": "item1", isCategory: false },
{ "id": "2", "name": "item2", isCategory: false },
{ "id": "3", "name": "item3", isCategory: false }
]
...
}
This is my take on the question (fiddle):
var data = getData();
var group = getTree(data);
console.log(group);
function getTree(flat) {
return _.reduce(flat, function (treeObj, item, prop, flatTree) {
var children = _.map(item.children, function (childId) {
return _.set(flatTree[childId], 'isCategory', true);
}).concat(_.map(item.items, function(item) {
return _.set(item, 'isCategory', false);
}));
item.children = !!children.length ? children : null;
delete item.items;
item.parent === null && (treeObj[prop] = item);
return treeObj;
}, {});
}
Take a look on the updated fiddle:
var data = getData();
_.keys(data).forEach(function(id){
var element = data[id];
if (element.children === null){
element.children = [];
}
element.isCategory = true;
element.items.forEach(function(item){
item.isCategory = false;
})
});
_.keys(data).forEach(function(id){
var element = data[id];
element.children = element.children.map(function(childId){
return data[childId];
}).concat(element.items);
});
_.keys(data).forEach(function(id){
delete data[id].items;
});
console.log(JSON.stringify(_.findWhere(_.values(data), {'parent': null})));