使用嵌套 JSON 反应本机可搜索平面列表

Question

I am trying to make a searchable flatlist for skills using the below JSON file:

const employeeList = [
  {
    id: "1",
    name: "John",
    image: require("../images/John.png"),
    skills: [
      { id: 1, name: "Cooking" },
      { id: 2, name: "Climbing" },
    ],
  },
  {
    id: "2",
    name: "Pat",
    image: require("../images/Pat.png"),
    skills: [
      { id: 1, name: "Cooking" },
      { id: 2, name: "Rowing" },
    ],
  },
];

export default employeeList;

I was successful in making a screen that will display and allow me to search for employee names but I would like to make a searchable flatlist with all the skills while also displaying the employee name who has that skill. I don't need them to be unique. In my code below I have managed to display all employees and their skills however my search feature only filters for the employee name.

// Searching using Search Bar Filter in React Native List View
// https://aboutreact.com/react-native-search-bar-filter-on-listview/

// import React in our code
import React, { useState, useEffect } from "react";

// import all the components we are going to use
import {
  SafeAreaView,
  Text,
  StyleSheet,
  View,
  FlatList,
  TextInput,
  Image,
  TouchableOpacity,
} from "react-native";

// import employee json
import employeeList from "../json/employee";


const AllListScreen = ({ navigation, route }) => {
  const [search, setSearch] = useState("");
  const [filteredDataSource, setFilteredDataSource] = useState([]);
  const [masterDataSource, setMasterDataSource] = useState([]);

  // set employee json as filter source
  useEffect(() => {
    setFilteredDataSource(employeeList);
    setMasterDataSource(employeeList);
    // skills show as undefined unless index is specified
    console.log(JSON.stringify(employeeList[0].skills));
  }, []);

  
  const searchFilterFunction = (text) => {
    // Check if searched text is not blank
    if (text) {
      // Inserted text is not blank
      // Filter the masterDataSource
      // Update FilteredDataSource
      const newData = masterDataSource.filter(function (item) {
        const itemData = item.name ? item.name.toUpperCase() : "".toUpperCase();
        const textData = text.toUpperCase();
        return itemData.indexOf(textData) > -1;
      });
      setFilteredDataSource(newData);
      setSearch(text);
    } else {
      // Inserted text is blank
      // Update FilteredDataSource with masterDataSource
      setFilteredDataSource(masterDataSource);
      setSearch(text);
    }
  };

  const ItemView = ({ item, index }) => {
    return (
      // Flat List Item
      <View>
        // use map to display all skills under employee
        {item.skills.map((v, i) => (
          <>
            <TouchableOpacity
              onPress={() => console.log(v.name)}
              style={styles.itemStyle}
              key={item.id}
            >
              <Image
                source={{ uri: "https://source.unsplash.com/random" }}
                style={{ height: 50, width: 50 }}
              />
              <View style={styles.textPortion}>
                <Text>{item.name}</Text>
                <Text>{v.name.toUpperCase()}</Text>
              </View>
            </TouchableOpacity>
            <ItemSeparatorView />
          </>
        ))}
      </View>
    );
  };

  const ItemSeparatorView = () => {
    return (
      // Flat List Item Separator
      <View
        style={{
          height: 0.5,
          width: "100%",
          backgroundColor: "#C8C8C8",
        }}
      />
    );
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <TextInput
          style={styles.textInputStyle}
          onChangeText={(text) => searchFilterFunction(text)}
          value={search}
          underlineColorAndroid="transparent"
          placeholder="Search Here"
        />
        <FlatList
          data={filteredDataSource}
          keyExtractor={(item, index) => index.toString()}
          renderItem={ItemView}
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#FFFFFF",
  },
  itemStyle: {
    flex: 1,
    padding: 8,
    flexDirection: "row",
  },
  textInputStyle: {
    height: 50,
    borderWidth: 1,
    paddingLeft: 20,
    margin: 6,
    borderColor: "#009688",
    backgroundColor: "#FFFFFF",
    borderRadius: 5,
  },
  textPortion: {
    flexWrap: "wrap",
    flexShrink: 1,
    marginLeft: 6,
  },
});

export default AllListScreen;

Here is an image of how it is displayed but as stated the search only works on the employee name while I want it to work on the skill:

Any help is much appreciated. Thanks.

Answer 1

I managed to get this working by restructuring the JSON in an array:

skillArray = [];

for (var key in employeeList) {
  if (employeeList.hasOwnProperty(key)) {
    for (item in employeeList[key].skills) {
      skillArray.push({
        name: employeeList[key].name,
        skill: employeeList[key].skills[item].name,
      });
    }
  }
}

Then I changed my search filter to target the skill instead of the name:

 // set employee json as filter source
  useEffect(() => {
    setFilteredDataSource(skillArray);
    setMasterDataSource(skillArray);
    // skills show as undefined unless index is specified
    console.log(JSON.stringify(employeeList[0].skills));
  }, []);

  
  const searchFilterFunction = (text) => {
    // Check if searched text is not blank
    if (text) {
      // Inserted text is not blank
      // Filter the masterDataSource
      // Update FilteredDataSource
      const newData = masterDataSource.filter(function (item) {
        const itemData = item.skill ? item.skill.toUpperCase() : "".toUpperCase();
        const textData = text.toUpperCase();
        return itemData.indexOf(textData) > -1;
      });
      setFilteredDataSource(newData);
      setSearch(text);
    } else {
      // Inserted text is blank
      // Update FilteredDataSource with masterDataSource
      setFilteredDataSource(masterDataSource);
      setSearch(text);
    }
  };

And my updated ItemView:

  const ItemView = ({ item }) => {
    return (
      // Flat List Item
        <View style={styles.itemStyle}>
          <Image
            source={{ uri: "https://source.unsplash.com/random" }}
            style={{ height: 50, width: 50 }}
          />
          <Text style={styles.textPortion}>
            {item.name.toUpperCase()}
            {"\n"}
            {item.skill.toUpperCase()}
          </Text>
        </View>
    );
  };

I'm not sure if this is the optimal approach but hopefully it helps someone.