如何在React Native中显示来自两个不同键值的过滤后的JSON数据 [英] how to show filtered JSON data from two different key values in react native

问题描述

这是我的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.

In this data there are two key values profile and post.

我想通过检查配置文件中的user和帖子中的username来显示profile中的数据和post中的相应数据.意味着我要从个人资料中添加数据以及帖子的相应数据.

I want to show data from profile with respective data from post by checking user from profile and username from post. Means i want add data from profile with the respective data of 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>
    );
  }

这仅打印帖子中的所有数据.没有根据需要整合相应的数据.

This only prints all data from post. Not integrating the respective data as i need.

那么我如何通过检查这两个值来实现对相应数据的过滤呢?请帮忙...

So how can i achieve that filteration of respective data by checking those two values? Please help...

推荐答案

尝试此解决方案.使用 Array#map ，然后为每个项目创建一个新对象，该对象由配置文件本身组成，并且在帖子上使用

Try this solution. Iterate over profiles with Array#map and for each item create a new object, which is consisted from the profile itself and on the posts filter the appropriate posts using Array#filter. And then show this data in your React code.

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

这篇关于如何在React Native中显示来自两个不同键值的过滤后的JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！