We Keep Coding

AgGrid access base component's hook inside frameworkComponents [duplicate]

I am using a AGGrid (actually via custom wrapper) and I have checkoboxes on each row.
Also, I have a bottom row with buttons. I want to enable/disable the buttons based on selected rows.
<AgGrid
id="dataListGrid"
containerProps={{style: {height: gridData.length * 30, minHeight: 180}}}
className="customGrid"
columnDefs={dataListColumns}
frameworkComponents={{checkboxColRenderer: checkboxColRenderer}}
gridDescription="List"
onGridReady={handleGridReady}
rowData={gridData}
enableBrowserTooltips={true}
pagination
paginationPageSize={100}
onCellClicked={onCellClicked}
onRowSelected={(params) => {
params.api.redrawRows({
rowNodes: [params.api.getPinnedBottomRow(0)],
});
}}
isFullWidthCell={(rowNode) => rowNode.rowPinned === 'bottom'}
fullWidthCellRenderer={CustomPinnedRowRenderer}
pinnedBottomRowData={[{}]}
{...props}
/>
My data looks like below;
let gridData = [{
fmIdentifier: 'Test data 1',
category: 'Test',
comments: 'Test',
fm: 'Test',
gti: 'Test data',
wins: 'Test',
identifier: 'Test',
status: 'Test data',
}, {
fmIdentifier: 'Test data 2',
category: 'Test',
comments: 'Test',
fm: 'Test',
gti: 'Test data',
wins: 'Test',
identifier: 'Test',
status: 'Test data X',
rowPinned: 'bottom'
}]
setDataListColumns(DataListColumns);
setGridData(gridData);
Below is how my CustomPinnedRowRenderer looks;
class CustomPinnedRowRenderer {
init(params) {
this.eGui = document.createElement('div');
// QUESTION : I want to access the grid data here...param.api.data shows empty object {}
const selectedNodes = params.api.getSelectedNodes();
this.eGui.innerHTML = finalDOMStr; //finalDOMStr has HTML
}
getGui() {
return this.eGui;
}
refresh() {
return false;
}
}
My question is inside the CustomPinnedRowRenderer (on row select), I want to check the param.api.data (so that I can accordingly render enabled/disabled buttons)
But param.api.data seems to be empty object for some reason ?
UPDATED
I tried adding the property "checked" to my data model and mapped to checked state as below
let gridData = [{
checked: true,
fmIdentifier: 'Test data 1',
category: 'Test',
comments: 'Test',
fm: 'Test',
gti: 'Test data',
wins: 'Test',
identifier: 'Test',
status: 'Test data',
}, {
checked: false,
fmIdentifier: 'Test data 2',
category: 'Test',
comments: 'Test',
fm: 'Test',
gti: 'Test data',
wins: 'Test',
identifier: 'Test',
status: 'Test data X',
rowPinned: 'bottom'
}]
However, any checked data stays as checked i.e. I cannot uncheck
My checkboxColRenderer looks as below
import React from 'react';
export default (props) => {
return (
<span>
<input type="checkbox" checked={props.data.checked} />
</span>
);
};

How to find just first child element in array? Javascript [duplicate]

This question already has answers here:
How to map more than one property from an array of objects [duplicate]
(7 answers)
Closed last year.
I need to find first child element in array and just return it.
Here is problem because here is few children elements and i need loop thought each and return every first children element.
Example of array:
let allItems =
[{ id: 1 ,
name: 'Test 1' ,
children: [
id: 12,
title: 'Child element'
]
},
{
id: 2 ,
name: 'Test 2'
},
{
id: 3 ,
name: 'Test 3',
children: [
id: 12,
title: 'Child element',
children: [
id: 123,
title: 'GRAND Child element',
]
]
}]
What's the problem here? Since there can be many children elements, do I need to find a parent for each of those elements?
After looping i need array to be:
[{ id: 1 ,
name: 'Test 1'
},
{
id: 2 ,
name: 'Test 2'
},
{
id: 3 ,
name: 'Test 3'
}]
Wihout children elements.
What I am try:
allItems.map(item => item).filter(filteredItem => !filteredItem.children);
But this is no return me good results

Based on your expected output, here is my solution.
Also note, that you had missing curly braces with your children.
See you modified snippet below:
let allItems = [{
id: 1,
name: 'Test 1',
children: [{
id: 12,
title: 'Child element'
}]
},
{
id: 2,
name: 'Test 2'
},
{
id: 3,
name: 'Test 3',
children: [{
id: 12,
title: 'Child element',
children: [{
id: 123,
title: 'GRAND Child element',
}]
}]
}
]
console.log(allItems.map(item => {
return {
id: item.id,
name: item.name
}
}))

Using map and destructuring is a nice way to achieve what you're looking for
let allItems = [{
id: 1,
name: 'Test 1',
children: [{
id: 12,
title: 'Child element'
}]
},
{
id: 2,
name: 'Test 2'
},
{
id: 3,
name: 'Test 3',
children: [{
id: 12,
title: 'Child element',
children: [{
id: 123,
title: 'GRAND Child element',
}]
}]
}
];
const res = allItems.map(x => {
const {id, name} = x;
return {id, name};
});
console.log(res);

Use these propertys for call first child:
.firstchild==>this property calls first Node
.firstElementChild==>calls first element

I can’t get Array of Array data’ as props through map() function

I have data as Array of Array in my content.js component which should serve my parent component Catalogues.js to display the data passed as props to child component Groups.js.
content.js file is:
const content = [
[
{
id: 1,
category: 'Hymns',
track1:
[
{
title: 'Song 1',
text: 'When peace like a river attendeth my way',
},
],
track2:
[
{
title: 'Song 2',
text: 'It is well with my soul',
},
],
track3:
[
{
title: 'Song 3',
text: 'Praise the Lord, praise the Lord',
},
],
},
],
[
{
id: 2,
category: 'Rock',
track1:
[
{
title: 'Song 1',
text: 'Open the eyes of my heart',
},
],
track2:
[
{
title: 'Song 2',
text: 'Here is our god',
},
],
track3:
[
{
title: 'Song 3',
text: 'Becaue he lives',
},
],
},
],
[
{
id: 3,
category: 'High Life',
track1:
[
{
title: 'Song 1',
text: 'I will bless thye lord at all times',
},
],
track2:
[
{
title: 'Song 2',
text: 'Who is like unto thee',
},
],
track3:
[
{
title: 'Song 3',
text: 'Blesed be the name of the Lord',
},
],
},
],
];
export default content;
The child Group.js component is:
import React from 'react';
import { FaLevelDownAlt } from 'react-icons/fa';
import './groups.css';
const Groups = ({ item: { category, track1, track2, track3 } }) => (
<div className="groups-container">
<div className="category">
<p className="categoryArrows">
<FaLevelDownAlt color="#2b74b7" size={35} />
</p>
<p className="categoryTitle">{category}</p>
</div>
<div className="alltracks">
<div className="track">
<h1>{track1.title}</h1>
<p>{track1.text}</p>
</div>
<div className="tracks">
<h1>{track2.title}</h1>
<p>{track2.text}</p>
</div>
<div className="track">
<h1>{track3.title}</h1>
<p>{track3.text}</p>
</div>
</div>
</div>
);
export default Groups;
And the parent component Catalogues.js is:
import React, { useEffect } from 'react';
import Groups from '../../components/Groups';
import content from './content';
const Catalogues = () => (
<div className="catalogues-section">
<div className="catalogues-heading">
<h1 className="catalogues-text">Songs in the service</h1>
</div>
<div className="catalogues-container">
{content.map((item, index) => (
<Groups key={index} item={item} />
))}
</div>
</div>
);
export default Catalogues;
The problem is that the browser keeps showing “Cannot read property 'category' of undefined”. I have tried many possibilities found on internet but not to avail. Sometimes it says “Cannot read property 'title' of undefined”, but I’m used with passing props in React. I fail to understand what is going on in this case. Can somebody tell me how to solve this issue? I’ll really appreciate.

Your content is probably not in the format that you want it to be -- you're using a bunch of unnecessary [] which are creating extra arrays where you don't need them. If you change your content to the following, your code should work:
const content = [
{
id: 1,
category: 'Hymns',
track1:
{
title: 'Song 1',
text: 'When peace like a river attendeth my way',
},
track2:
{
title: 'Song 2',
text: 'It is well with my soul',
},
track3:
{
title: 'Song 3',
text: 'Praise the Lord, praise the Lord',
},
},
{
id: 2,
category: 'Rock',
track1:
{
title: 'Song 1',
text: 'Open the eyes of my heart',
},
track2:
{
title: 'Song 2',
text: 'Here is our god',
},
track3:
{
title: 'Song 3',
text: 'Becaue he lives',
},
},
{
id: 3,
category: 'High Life',
track1:
{
title: 'Song 1',
text: 'I will bless thye lord at all times',
},
track2:
{
title: 'Song 2',
text: 'Who is like unto thee',
},
track3:
{
title: 'Song 3',
text: 'Blesed be the name of the Lord',
},
},
];
Note how now, for example, each track1 is just an object ({}) and not an array of objects ([{}]).

I reproduced your codes and got the items displayed properly. Every time you face "undefined" you need to console log the content and see whether or not it is found by parent component. Your content format is not relevant for the map() function to map through it since it will map through array of object, just like #jnpdx mentioned earlier. So take advantage on his format and do document.write(content) to see whether you get [object object]. If you get that then you can continue with this answer. Otherwise your import of 'content' may be also wrong.
this is the right content format:
const content = [
{
id: 1,
category: 'Hymns',
track1:
{
title: 'Song 1',
text: 'When peace like a river attendeth my way',
},
track2:
{
title: 'Song 2',
text: 'It is well with my soul',
},
track3:
{
title: 'Song 3',
text: 'Praise the Lord, praise the Lord',
},
},
{
id: 2,
category: 'Rock',
track1:
{
title: 'Song 1',
text: 'Open the eyes of my heart',
},
track2:
{
title: 'Song 2',
text: 'Here is our god',
},
track3:
{
title: 'Song 3',
text: 'Because he lives',
},
},
{
id: 3,
category: 'High Life',
track1:
{
title: 'Song 1',
text: 'I will bless the lord at all times',
},
track2:
{
title: 'Song 2',
text: 'Who is like unto thee',
},
track3:
{
title: 'Song 3',
text: 'Blessed be the name of the Lord',
},
},
];
Then assuming that you get [object object] by document.write(content), in the Catalogues.js change yours by this:
import React, { useEffect } from 'react';
import Groups from '../../components/Groups';
import content from './content';
const Catalogues = () => (
<div className="catalogues-section">
<div className="catalogues-heading">
<h1 className="catalogues-text">Songs in the service</h1>
</div>
<div className="catalogues-container">
{content.map((item, index) => (
<Groups key={index} category={item.category} title1={item.track1.title} text1={item.track1.text} title2={item.track2.title} text2={item.track2.text} title3={item.track3.title} text3={item.track3.text}/>
))}
</div>
</div>
);
export default Catalogues;
Because you have nested objects inside your objects.
Then change your Groups.js by:
import React from 'react';
import { FaLevelDownAlt } from 'react-icons/fa';
import './groups.css';
const Groups = ({ category, title1, text1, title2, text2, title3, text3 }) => (
<div className="groups-container">
<div className="category">
<p className="categoryArrows">
<FaLevelDownAlt color="#2b74b7" size={35} />
</p>
<p className="categoryTitle">{category}</p>
</div>
<div className="alltracks">
<div className="track">
<h1>{title1}</h1>
<p>{text1}</p>
</div>
<div className="tracks">
<h1>{title2}</h1>
<p>{text2}</p>
</div>
<div className="track">
<h1>{title3}</h1>
<p>{text3}</p>
</div>
</div>
</div>
);
It's more about iteration sake. Because doing what you did like
<Groups key={index} item={item} /> and
const Groups = ({ item: { category, track1, track2, track3 } }) => (...)
I gets the 'category' props, but it didn't map through the tracks nested object to pick 'title' and 'text' for each.

first you need convert string to array
just do JSON.parse( your props)

*ngFor not looping correctly through items

I cant seem to figure out whats wrong here..
my *ngFor isnt working
my html
<ul class="list">
<li class="list__seperator">This is some text</li>
<li *ngFor="let feed of feeds" (click)="selectItem('.tick-' + feed.id)" class="item-{{feed.id}}"><img class="list__tick tick-{{feed.id}}" src="../../../assets/img/svg/icon-tick.svg">{{feed.text}}</li>
</ul>
my component.ts
export class FileComponent implements OnInit {
feeds: [
{ id: 1, text: 'Example 1' },
{ id: 2, text: 'Example 2' },
{ id: 3, text: 'Example 3' },
{ id: 4, text: 'Example 4' }
];
I look at the rendered html where the list items should be there is.. <!--bindings={}-->
to me this should be working? what am I doing wrong?
any help would be appreciated and let me know if you need more information

You need to assign the array to the feeds as
feeds = [
{ id: 1, text: 'Example 1' },
{ id: 2, text: 'Example 2'},
{ id: 3, text: 'Example 3'},
{ id: 4, text: 'Example 4'}
];
STACKBLITZ DEMO

EmberJS Binding Content Between Controllers

I'm currently working with two data models, where Foo has a "toMany" property of type Bars. I'm now trying to create two select boxes where when the first populated with Foo's is picked, it refines the second listing only the Bars associated with that foo.
JSFiddle Here: http://jsfiddle.net/drew/6jLCy/
Code below, but it certainly doesn't work. It does go as far as setting the SelectBox values for the first, but doesn't populate the second with the corresponding bar value titles.
App = Em.Application.create();
App.store = DS.Store.create({
revision: 7,
adapter: DS.fixtureAdapter
});
/**************************
* Models
**************************/
App.Foo = DS.Model.extend({
bars: DS.hasMany('App.Bar'),
title: DS.attr('string')
});
App.Bar = DS.Model.extend({
foos: DS.hasMany('App.Foo'),
title: DS.attr('string')
});
/**************************
* Fixtures
**************************/
App.Foo.FIXTURES = [
{
id: 0,
title: 'Footitle 1',
bars: [0,1]
},
{
id: 1,
title: 'Footitle 2',
bars: [0,1,2]
}
];
App.Bar.FIXTURES = [
{
id: 0,
title: 'Bartitle 1',
},{
id: 1,
title: 'Bartitle 2'
},{
id: 2,
title: 'Bartitle 3'
}
];
/**************************
* Views
**************************/
App.SetFooField = Em.Select.extend({
contentBinding: 'App.fooController',
valueBinding: 'content.selected',
optionLabelPath: 'content.title'
});
App.SetBarField = Em.Select.extend({
contentBinding: 'App.barController',
valueBinding: 'content.selected',
optionLabelPath: 'content.title'
});
/**************************
* Controllers
**************************/
App.fooController = Em.ArrayController.create({
content: App.store.findAll(App.Foo)
});
App.barController = Em.ArrayController.create({
contentBinding: 'App.fooController.selected.bars'
});​
Markup for the html:
<script type="text/x-handlebars">
{{view App.SetFooField}}
{{view App.SetBarField}}
</script>​

holy cow. after many days of going nearly nuts, it turns out this is entirely a bug in the latest ember-data. in fixtures, all ids need to be strings. just. plain. nuts.
/**************************
* Fixtures
**************************/
App.Foo.FIXTURES = [
{
id: '0',
title: 'Footitle 1',
bars: ['0','1']
},
{
id: '1',
title: 'Footitle 2',
bars: ['0','1','2']
}
];
App.Bar.FIXTURES = [
{
id: '0',
title: 'Bartitle 1',
},{
id: '1',
title: 'Bartitle 2'
},{
id: '2',
title: 'Bartitle 3'
}
];
failed to get embedded's object property using ember.js with ember-data
huge thanks to #dgeb for answering that question.
jsfiddle updated accordingly.
http://jsfiddle.net/drew/6jLCy/