130
rated 0 times
[
137]
[
7]
/ answers: 1 / hits: 18474
/ 8 Years ago, thu, september 22, 2016, 12:00:00
I'm loading some JSON data using FETCH. I'm trying to add/create a simple filtering functionality on the content displayed.
I'm getting this error:
Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
Any idea what could be causing this error?
This my code so far:
let Table = React.createClass({
getInitialState: function(){
return {
accounts: [{
product: Fixed Saver,
interestRate: 2.20,
minimumDeposit: 500,
interestType: Fixed
}],
searchString: ''
}
},
componentDidMount: function(){
fetch('http://localhost:8888/table/json/accounts.json')
.then(response => {
return response.json()
})
.then(json => {
this.setState({accounts: json})
});
},
handleChange: function(e){
this.setState({searchString:e.target.value});
},
render: function(){
var libraries,
libraries = this.state.accounts,
searchString = this.state.searchString.trim().toLowerCase();
if(searchString.length > 0){
libraries = libraries.filter(l => {
return l.name.toLowerCase().match( searchString );
});
}
return (
<div className=container>
<input type=text value={this.state.searchString} onChange={this.handleChange} placeholder=Type here />
<ul className=header clearfix>
<li>Product</li>
<li>Interest rate</li>
<li>Minimum deposit</li>
<li>Interest type</li>
</ul>
{libraries.map(l => {
return (
<div className=account clearfix key={l.id}>
<div className=product>{l.product}</div>
<div>{l.interestRate} %</div>
<div>£ {l.minimumDeposit}</div>
<div>{l.interestType}</div>
</div>
)
})}
</div>
)
}
});
let App = React.createClass({
render: function(){
return(
<Table />
);
}
});
ReactDOM.render( <App />, document.getElementById('table') );
JSON
[
{
id: 1,
product: Fixed Saver,
interestRate: 2.20,
minimumDeposit: 500,
interestType: Fixed
},
{
id: 2,
product: Fixed Saver,
interestRate: 1.50,
minimumDeposit: 0,
interestType: Tracker
},
{
id: 3,
product: Offset Saver,
interestRate: 1.8,
minimumDeposit: 1000,
interestType: Fixed
}
]
More From » json
