Sometimes application user add same entries in array by mistake in application and the same entries will make our array longer in size. In react native there are many Array methods available to filter the array and choose only unique values in new array. This method properly works on array containing object items with multiple different values. We are using the JavaScript Array Some method in our tutorial. So in this tutorial we would Remove Repeated Duplicate Object Items from Array in react native android iOS application.
Contents in this project Remove Repeated Duplicate Object Items from Array in React Native:
1. Import StyleSheet, Text, View, ScrollView, TouchableOpacity & Platform component in your project’s App.js file.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, ScrollView, TouchableOpacity, Platform } from 'react-native'; |
2. Create constructor() in your project’s main class. In constructor() we would make a Array name as this.tempArray with multiple array object values. As you can see in below array there are some name entries which is repeated multiple times. So we would filter this array using some method.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
constructor() { super(); this.tempArray = [ { id: 1, name: "Pankaj" }, { id: 2, name: "Nitin" }, { id: 3, name: "Rita" }, { id: 4, name: "Nikita" }, { id: 5, name: "Pankaj" }, { id: 6, name: "Jitender" }, { id: 7, name: "Sonal" }, { id: 8, name: "Sonal" }, { id: 9, name: "Mukesh" }, { id: 10, name: "Rajender" }, { id: 11, name: "Nitin" }, { id: 12, name: "Nitin" }, { id: 13, name: "Rita" }, { id: 14, name: "Nikita" }, ]; } |
3. Create array filtering code in render’s return block to remove the duplicate name object items from array.
In below method we would first create a new constant array named as newArray. Now we would start a forEach loop and start taking each object and apply the some method on object’s name element. This would push the unique names only in newArray .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
render() { const newArray = []; this.tempArray.forEach(obj => { if (!newArray.some(o => o.name === obj.name)) { newArray.push({ ...obj }) } }); console.log(newArray); return ( ); } |
4. Create a Root View in render’s return block and make a Scroll View component there. In scroll view would use the Array’s map method to print the newArray values on screen in ListView format so you can see that all the duplicate entries is successfully removed.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
render() { const newArray = []; this.tempArray.forEach(obj => { if (!newArray.some(o => o.name === obj.name)) { newArray.push({ ...obj }) } }); console.log(newArray); return ( <View style={styles.MainContainer}> <ScrollView> { newArray.map((item, key) => ( <TouchableOpacity key={key}> <Text style={styles.text} > ID = {item.id} </Text> <Text style={styles.text} > Name = {item.name} </Text> <View style={{ width: '100%', height: 1, backgroundColor: '#000' }} /> </TouchableOpacity> )) } </ScrollView> </View> ); } |
5. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: (Platform.OS) === 'ios' ? 20 : 0, backgroundColor: '#F5FCFF', }, text: { fontSize: 25, color: '#000', textAlign: 'left', padding: 7 } }); |
6. Complete source code for App.js file class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, ScrollView, TouchableOpacity, Platform } from 'react-native'; export default class App extends Component { constructor() { super(); this.tempArray = [ { id: 1, name: "Pankaj" }, { id: 2, name: "Nitin" }, { id: 3, name: "Rita" }, { id: 4, name: "Nikita" }, { id: 5, name: "Pankaj" }, { id: 6, name: "Jitender" }, { id: 7, name: "Sonal" }, { id: 8, name: "Sonal" }, { id: 9, name: "Mukesh" }, { id: 10, name: "Rajender" }, { id: 11, name: "Nitin" }, { id: 12, name: "Nitin" }, { id: 13, name: "Rita" }, { id: 14, name: "Nikita" }, ]; } render() { const newArray = []; this.tempArray.forEach(obj => { if (!newArray.some(o => o.name === obj.name)) { newArray.push({ ...obj }) } }); console.log(newArray); return ( <View style={styles.MainContainer}> <ScrollView> { newArray.map((item, key) => ( <TouchableOpacity key={key}> <Text style={styles.text} > ID = {item.id} </Text> <Text style={styles.text} > Name = {item.name} </Text> <View style={{ width: '100%', height: 1, backgroundColor: '#000' }} /> </TouchableOpacity> )) } </ScrollView> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: (Platform.OS) === 'ios' ? 20 : 0, backgroundColor: '#F5FCFF', }, text: { fontSize: 25, color: '#000', textAlign: 'left', padding: 7 } }); |
Screenshots:
Thanks for this wonderful post.
Welcome 🙂 .
thank you you save me time