reactjs - Get related ID collections from a json array react native

Question

I have a array of objects as a json file, I used the objects to display them on the list, When getting to details of that item it has a related items also. I want to show related items for this item Heres the json file

[
{
    "id": 1,
    "name": "Kling-Spencer",
    "description": "sed justo pellentesque viverra pede ac diam cras pellentesque volutpat dui maecenas tristique est et tempus semper est quam pharetra magna",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.bmp/cc0000/ffffff&text=Kling-Spencer",
    "related": [
        2,
        3,
        6,
        8,
        23
    ]
},
{
    "id": 2,
    "name": "Donnelly, Lockman and Dare",
    "description": "in felis donec semper sapien a libero nam dui proin leo odio porttitor id consequat in consequat ut nulla sed accumsan felis ut at dolor quis odio consequat varius integer",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.png/5fa2dd/ffffff&text=Donnelly",
    "related": null
},
{
    "id": 3,
    "name": "Klein LLC",
    "description": "dictumst aliquam augue quam sollicitudin vitae consectetuer eget rutrum at lorem integer tincidunt ante vel ipsum praesent blandit lacinia erat",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.jpg/cc0000/ffffff&text=Klein%20LLC",
    "related": [
        15,
        13,
        1,
        5,
        4
    ]
},
{
    "id": 4,
    "name": "Aufderhar Group",
    "description": "id justo sit amet sapien dignissim vestibulum vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae nulla dapibus dolor",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.bmp/dddddd/000000&text=Aufderhar%20Group",
    "related": null
},
{
    "id": 5,
    "name": "Lynch, Raynor and Mayer",
    "description": "ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae nulla dapibus dolor vel est donec odio justo sollicitudin ut suscipit a feugiat et eros vestibulum",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.jpg/dddddd/000000",
    "related": null
},
{
    "id": 6,
    "name": "Kuhn, Miller and Carroll",
    "description": "in felis eu sapien cursus vestibulum proin eu mi nulla ac enim in tempor turpis nec euismod scelerisque quam turpis adipiscing",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.png/5fa2dd/ffffff&text=Kuhn,%20Miller%20and%20Carroll",
    "related": [
        1,
        29,
        15
    ]
},
{
    "id": 7,
    "name": "Feest-Brown",
    "description": "ac enim in tempor turpis nec euismod scelerisque quam turpis adipiscing lorem vitae mattis nibh ligula nec sem duis aliquam convallis",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.bmp/dddddd/000000&text=Feest-Brown",
    "related": null
},
{
    "id": 8,
    "name": "Gutmann, Buckridge and Kris",
    "description": "quis lectus suspendisse potenti in eleifend quam a odio in hac habitasse platea dictumst maecenas ut massa quis augue luctus tincidunt nulla mollis molestie lorem",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.bmp/ff4444/ffffff&text=Gutmann",
    "related": [
        14,
        20,
        23,
        27
    ]
},
{
    "id": 9,
    "name": "McLaughlin-Bogan",
    "description": "morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus nec molestie sed justo pellentesque viverra pede ac diam cras pellentesque",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.jpg/dddddd/000000&text=McLaughlin-Bogan",
    "related": [
        6,
        9,
        12,
        30
    ]
},
{
    "id": 10,
    "name": "Kilback-Padberg",
    "description": "leo odio condimentum id luctus nec molestie sed justo pellentesque viverra pede ac diam cras pellentesque volutpat dui maecenas tristique est et tempus semper est quam pharetra magna ac",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.png/ff4444/ffffff&text=Kilback-Padberg",
    "related": null
},
{
    "id": 11,
    "name": "Skiles LLC",
    "description": "rutrum at lorem integer tincidunt ante vel ipsum praesent blandit lacinia erat vestibulum sed magna at nunc commodo placerat praesent blandit nam nulla integer pede justo lacinia eget tincidunt eget",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.bmp/dddddd/000000&text=Skiles%20LLC",
    "related": [
        21,
        27,
        28,
        5
    ]
},
{
    "id": 12,
    "name": "McGlynn Group",
    "description": "nulla integer pede justo lacinia eget tincidunt eget tempus vel pede morbi porttitor lorem id ligula suspendisse ornare consequat lectus in est risus",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.bmp/cc0000/ffffff&text=McGlynn%20Group",
    "related": [
        10,
        18,
        26
    ]
},
{
    "id": 13,
    "name": "Cassin-Kling",
    "description": "ac enim in tempor turpis nec euismod scelerisque quam turpis adipiscing lorem vitae mattis nibh ligula nec sem duis aliquam convallis",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.jpg/cc0000/ffffff&text=Cassin-Kling",
    "related": [
        17,
        29,
        1,
        3,
        8
    ]
},
{
    "id": 14,
    "name": "Greenfelder, Conroy and Schinner",
    "description": "imperdiet nullam orci pede venenatis non sodales sed tincidunt eu felis fusce posuere felis sed lacus morbi sem mauris laoreet ut rhoncus aliquet pulvinar sed nisl nunc rhoncus",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.bmp/dddddd/000000&text=Greenfelder",
    "related": [
        18,
        21,
        27
    ]
},
{
    "id": 15,
    "name": "MacGyver, Huel and Lind",
    "description": "cubilia curae duis faucibus accumsan odio curabitur convallis duis consequat dui nec nisi volutpat eleifend donec ut dolor morbi vel lectus in",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.bmp/ff4444/ffffff&text=MacGyver",
    "related": null
},
{
    "id": 16,
    "name": "Aufderhar-Little",
    "description": "nisl aenean lectus pellentesque eget nunc donec quis orci eget orci vehicula condimentum curabitur in libero ut massa volutpat convallis morbi odio odio elementum eu",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.png/dddddd/000000&text=Aufderhar-Little",
    "related": null
},
{
    "id": 17,
    "name": "Graham-Berge",
    "description": "non ligula pellentesque ultrices phasellus id sapien in sapien iaculis congue vivamus metus arcu adipiscing molestie hendrerit at vulputate vitae nisl aenean lectus pellentesque eget nunc donec quis orci",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.bmp/ff4444/ffffff&text=Graham-Berge",
    "related": [
        12,
        16,
        29,
        30
    ]
},
{
    "id": 18,
    "name": "Gaylord, Klein and Donnelly",
    "description": "ac est lacinia nisi venenatis tristique fusce congue diam id ornare imperdiet sapien urna pretium nisl ut volutpat sapien arcu sed augue",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.jpg/cc0000/ffffff&text=Klein%20and%20Donnelly",
    "related": [
        6,
        7,
        9,
        18,
        21
    ]
},
{
    "id": 19,
    "name": "Gusikowski Group",
    "description": "lacus morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus nec molestie sed justo pellentesque viverra pede ac diam cras pellentesque volutpat dui maecenas tristique",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.jpg/ff4444/ffffff&text=Gusikowski",
    "related": [
        16,
        29,
        3
    ]
},
{
    "id": 20,
    "name": "Jaskolski-McKenzie",
    "description": "a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices aliquet maecenas leo odio condimentum id luctus nec",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.bmp/cc0000/ffffff&text=Jaskolski-McKenzie",
    "related": [
        12,
        14,
        18
    ]
},
{
    "id": 21,
    "name": "Kautzer, Dooley and Kuhic",
    "description": "hac habitasse platea dictumst maecenas ut massa quis augue luctus tincidunt nulla mollis molestie lorem quisque ut erat curabitur gravida nisi at nibh in",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.jpg/dddddd/000000&text=Kautzer",
    "related": [
        3,
        5,
        17,
        29,
        30
    ]
},
{
    "id": 22,
    "name": "Kohler, Tremblay and Bernier",
    "description": "in lacus curabitur at ipsum ac tellus semper interdum mauris ullamcorper purus sit amet nulla quisque arcu libero rutrum ac lobortis vel dapibus at",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.png/ff4444/ffffff&text=Kohler",
    "related": null
},
{
    "id": 23,
    "name": "Cummerata, Trantow and Huels",
    "description": "potenti nullam porttitor lacus at turpis donec posuere metus vitae ipsum aliquam non mauris morbi non lectus aliquam sit amet diam in magna bibendum imperdiet nullam orci pede venenatis non",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.jpg/dddddd/000000&text=Cummerata",
    "related": [
        5,
        4,
        13,
        23,
        27
    ]
},
{
    "id": 24,
    "name": "O'Reilly LLC",
    "description": "eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.png/5fa2dd/ffffff&text=O'Reilly%20LLC",
    "related": [
        4,
        5,
        6,
        10
    ]
},
{
    "id": 25,
    "name": "Grant-Spencer",
    "description": "augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero nullam sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.png/ff4444/ffffff&text=Grant-Spencer",
    "related": null
},
{
    "id": 26,
    "name": "Jacobi-Jaskolski",
    "description": "orci nullam molestie nibh in lectus pellentesque at nulla suspendisse potenti cras in purus eu magna vulputate luctus cum sociis natoque penatibus et magnis dis parturient montes",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.bmp/5fa2dd/ffffff&text=Jacobi-Jaskolski",
    "related": null
},
{
    "id": 27,
    "name": "Heathcote LLC",
    "description": "curabitur in libero ut massa volutpat convallis morbi odio odio elementum eu interdum eu tincidunt in leo maecenas pulvinar lobortis est phasellus",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.bmp/5fa2dd/ffffff&text=Heathcote%20LLC",
    "related": [
        15,
        20,
        1,
        3
    ]
},
{
    "id": 28,
    "name": "Towne, Schaefer and Reichert",
    "description": "congue elementum in hac habitasse platea dictumst morbi vestibulum velit id pretium iaculis diam erat fermentum justo nec condimentum neque sapien placerat ante nulla justo aliquam quis",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.jpg/ff4444/ffffff&text=Towne",
    "related": null
},
{
    "id": 29,
    "name": "Graham, Green and Roberts",
    "description": "vestibulum sagittis sapien cum sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus etiam vel augue vestibulum rutrum rutrum neque aenean auctor gravida",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.jpg/dddddd/000000&text=Graham",
    "related": null
},
{
    "id": 30,
    "name": "Commings Group",
    "description": "luctus tincidunt nulla mollis molestie lorem quisque ut erat curabitur gravida nisi at nibh in hac habitasse platea dictumst aliquam augue",
    "email": "[e-mail]",
    "image": "http://dummyimage.com/300x300.jpg/cc0000/ffffff&text=Commings%20Group",
    "related": null
}

]

As you can see for every item has a related, but related are just ID's how can i find each related item object and show them heres what i tried

this is the item details screen

   import React from "react";
import { View, Image, StyleSheet, Text, FlatList } from "react-native";

import RelatedList from "../components/RelatedList";


import api from "../apis/stores.json";



function StoreDetails(props) {
  const { navigation } = props;
  const id = navigation.getParam("id");
  const name = navigation.getParam("name");
  const email = navigation.getParam("email");
  const description = navigation.getParam("description");
  const image = navigation.getParam("image");
  const data = [api[0]];

  data.filter(value => value.id == id)
  const related = [
    data
  ];
  return (
    <View>
      <Image style={styles.image} source={{ uri: image }} />
      <View style={styles.detailsContainer}>
        <Text style={styles.name}>{name}</Text>
        <Text>{email}</Text>
        <Text>{description}</Text>
        <FlatList
          data={related}
          keyExtractor={(related) => related.id.toString()}
          renderItem={({ item }) => (
            <RelatedList
              image={item.image}
              name={item.name}
              status={item.status}
            />
          )}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  image: {
    width: "100%",
    height: 300,
  },
  detailsContainer: {
    padding: 20,
  },
  name: {
    fontWeight: "bold",
    fontSize: 25,
  },
});

export default StoreDetails;

标签： reactjsreact-nativeexpo

Answer 1

您可以使用这样的功能来获取所有相关的元素

const getWithRelated = (data, id) => {
  const items = []
  const item = data.find(v => v.id === id) // find item itself
  if (item) {
    items.push(
      item, // ad item
      ...data.filter(v => item.related.includes(v.id)) // and all related
    )
  }
  return items
}

如果性能很关键，您可以创建一个对象，其中 id 是对象键，那么搜索会更快

const dataMap = data.reduce((agg, v) => { agg[v.id] = v; return agg }, {})

const getWithRelated = (data, id, dataMap) => {
  const items = []
  const item = dataMap[id]
  if (item) {
    items.push(
      item, // ad item
      ...item.related.map(relatedId => dataMap[relatedId]) // and all related
    )
  }
  return items
}

所以在你的情况下你可以更换

data.filter(value => value.id == id)
const related = [
  data
];

和

const related = getWithRelated(data, id)