本机如何使用json上的某个关键对象过滤数据

时间:2017-10-18 18:31:07

标签: json reactjs react-native

如果我有这样的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.movi​​es)”但这个方法得到的所有行都没有过滤器

  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);
      });
  }

1 个答案:

答案 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>