如何显示React天然中两个不同钥匙值的过滤JSON数据

Question

这是我的JSON数据

{
  "profile": [
    {
      "proid": {
        "user": "kohinoor"
      },
      "image": "/media/profiles/DSCN3253.JPG",
      "shoptype": "Clothes",
      "city": "Ahemednagar"
    },
    {
      "proid": {
        "user": "shrawani"
      },
      "image": "/media/profiles/PicsArt_08-17-09.24.48_qA94ILU.jpg",
      "shoptype": "Cat Shop",
      "city": "Kopargaon"
    },
    {
      "proid": {
        "user": "rajpal"
      },
      "image": "/media/profiles/PicsArt_08-17-09.24.48_T3birjf.jpg",
      "shoptype": "Clothings",
      "city": "Sangamner"
    },
  ],
  "post": [
    {
      "id": 120,
      "content": "Old Mi Stocks or Sell !!!",
      "url": null,
      "shareproductdealer": "kohinoor",
      "shareproducttype": "Xiaomi Mi",
      "shareproductid": "68",
      "username": "kohinoor",
      "updated": "2017-09-08T10:49:11Z",
      "timestamp": "2017-09-08T10:49:11Z"
    },
    {
      "id": 119,
      "content": "Hello... Miahe...",
      "url": null,
      "shareproductdealer": null,
      "shareproducttype": null,
      "shareproductid": null,
      "username": "shrawani",
      "updated": "2017-09-08T10:38:14Z",
      "timestamp": "2017-09-08T10:38:14Z"
    },
    {
      "id": 115,
      "content": "hello jockey",
      "url": null,
      "shareproductdealer": "rajpal",
      "shareproducttype": "jockey",
      "shareproductid": "65",
      "username": "rajpal",
      "updated": "2017-08-16T11:22:32Z",
      "timestamp": "2017-08-16T11:22:32Z"
    }
  ]
}

在此数据中，有两个键值profile和post。

我想通过从配置文件中检查user的profile和username的post数据。意味着我要添加来自配置文件的数据。

的各自数据。

这是我的反应本机代码

constructor(props) {
    super(props);
    this.state = {
      results: {
        isLoading: true,
        profile: [],
          user:'',
            proid: '',
            image: '',
            shoptype: '',
            city: '',
        post: [],
          username: '',
            content: '',
            url: '',
            timestamp: '',
            id: '',
      }
    };
    this.fetchData = this.fetchData.bind(this);
  }

渲染方法

render() {
    contents = this.state.results.post.map((item) => {
      return (
          <View key={item.id}>
            <Text>
              {item.id}
            </Text>
            <Text>
              {item.username}
            </Text>
            <Text>
              {item.timestamp}
            </Text>
            <Text>
              {item.content}
            </Text>
          </View>
        );
     });
    return (
      <ScrollView>
        {contents}
      </ScrollView>
    );
  }

这仅在POST上打印所有数据。不按照我的需要集成相应的数据。

那么，如何通过检查这两个值来实现相应数据的过滤？请帮助...

Answer 1

尝试此解决方案。用数组＃映射迭代配置文件，并为每个项目创建一个新对象，该对象由配置文件本身和帖子组成，并在帖子上使用 array＃filter＃filter 过滤适当的帖子。然后在您的React代码中显示此数据。

JavaScript示例。

const data = {
  "profile": [
    {
      "proid": {
        "user": "kohinoor"
      },
      "image": "/media/profiles/DSCN3253.JPG",
      "shoptype": "Clothes",
      "city": "Ahemednagar"
    },
    {
      "proid": {
        "user": "shrawani"
      },
      "image": "/media/profiles/PicsArt_08-17-09.24.48_qA94ILU.jpg",
      "shoptype": "Cat Shop",
      "city": "Kopargaon"
    },
    {
      "proid": {
        "user": "rajpal"
      },
      "image": "/media/profiles/PicsArt_08-17-09.24.48_T3birjf.jpg",
      "shoptype": "Clothings",
      "city": "Sangamner"
    },
  ],
  "post": [
    {
      "id": 120,
      "content": "Old Mi Stocks or Sell !!!",
      "url": null,
      "shareproductdealer": "kohinoor",
      "shareproducttype": "Xiaomi Mi",
      "shareproductid": "68",
      "username": "kohinoor",
      "updated": "2017-09-08T10:49:11Z",
      "timestamp": "2017-09-08T10:49:11Z"
    },
    {
      "id": 119,
      "content": "Hello... Miahe...",
      "url": null,
      "shareproductdealer": null,
      "shareproducttype": null,
      "shareproductid": null,
      "username": "shrawani",
      "updated": "2017-09-08T10:38:14Z",
      "timestamp": "2017-09-08T10:38:14Z"
    },
    {
      "id": 115,
      "content": "hello jockey",
      "url": null,
      "shareproductdealer": "rajpal",
      "shareproducttype": "jockey",
      "shareproductid": "65",
      "username": "rajpal",
      "updated": "2017-08-16T11:22:32Z",
      "timestamp": "2017-08-16T11:22:32Z"
    }
  ]
};
const profiles = data.profile;
const posts = data.post;
const profilePosts = profiles.map(item => ({
  profile: item,
  post: posts.filter(post => post.username === item.proid.user)
}));
console.log(profilePosts);