如果我有这样的json
{
title: "The Basics - Networking",
description: "Your app fetched this from a remote endpoint!",
movies: [
{
title: "Star Wars",
category: "space",
releaseYear: "1977"
},
{
title: "Back to the Future",
category: "time"
releaseYear: "1985"
},
{
title: "The Matrix",
category: "scifi",
releaseYear: "1999"
},
{
title: "Inception",
category: "fantasy",
releaseYear: "2010"
},
{
title: "Interstellar",
category: "space"
releaseYear: "2014"
}
]
}
我需要过滤 category = space 的一些数据 但我不知道如何在获取json表单webservice
后过滤数据我只想要数据形式category = space (这意味着我希望得到星际战争和星球大战)
并设置为datasource 像“dataSource:ds.cloneWithRows(responseJson.movies)”但这个方法得到的所有行都没有过滤器
componentDidMount() {
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({
isLoading: false,
dataSource: ds.cloneWithRows(responseJson.movies),
}, function() {
// do something with new state
});
})
.catch((error) => {
console.error(error);
});
}
答案 0 :(得分:7)
像这样使用Array#Filter
:
const movies = [{
title: "Star Wars",
category: "space",
releaseYear: "1977",
},
{
title: "Back to the Future",
category: "time",
releaseYear: "1985",
},
{
title: "The Matrix",
category: "scifi",
releaseYear: "1999",
},
{
title: "Inception",
category: "fantasy",
releaseYear: "2010",
},
{
title: "Interstellar",
category: "space",
releaseYear: "2014",
}
];
const space = movies.filter(x => x.category === 'space');
console.log(space);
此处您是另一个Array#Filter
示例,
过滤userId
为1的帖子。
https://jsonplaceholder.typicode.com/posts:
class Data extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentDidMount() {
return fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => {
this.setState({ data: data.filter(d => d.userId === 1) })
})
.catch(error => {
console.error(error);
});
}
render() {
return (
<div>
<h1>Posts JSON:</h1>
<pre>
{JSON.stringify(this.state.data, null, 2)}
</pre>
</div>
);
}
}
ReactDOM.render(
<Data />,
document.getElementById('container')
);
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>