I'm trying to create a (fake) banking application for a school assignment. I'm at the stage where I need to display the transaction history of that account.

To store the history I'm using a single string (ik this will get long, but its just a demo). However the issue is that I've tried using .split() and all of that but my string is complicated.

Example string: July 6, 2022|[email protected]|description|-200~July 3, 2022|[email protected]|another description| 200~ So each individual transaction is split by '~' and each variable within each transaction (date, email, des, amount) is split by the '|'.

This needs to loop for all the transaction within the loop.

Anyone have an idea of the logic, and some syntax that I could use? Thanks in advance

What I've got so far (txnHistory is the initial string):

    txnHistory.split('~').forEach( () => {
        //console.log(items) // splits array into line. Each line is one transaction
        var eachLine = txnHistory.split('|')
        //console.log(eachLine)
        var xdate = eachLine[0]
        //setTodayDate(xdate)
        var xemail = eachLine[1]
        var xdes = eachLine[2]
        var xam = eachLine[3]
        console.log(xdate, xemail, xdes, xam)
    }, []);

            <SafeAreaView>
                <View>
                    <Text style={{fontFamily:'Ubuntu_500Medium', fontSize:25, left: Dimensions.get('window').width/5.5, 
                            marginVertical:7,}} >
                        {xdate}
                    </Text>
                    <Text style={{fontFamily:'Ubuntu_500Medium', fontSize:20, left: Dimensions.get('window').width/3.5, 
                            marginVertical:3,}}>
                        {xemail}
                    </Text>
                        
                    <Text style={{fontFamily:'Ubuntu_400Regular',fontSize:25, left: Dimensions.get('window').width/2.7, 
                            marginVertical:3,}}>
                        {xdes}
                    </Text>
                </View>

                <Text style={{fontFamily:'Ubuntu_700Bold', fontSize:25, left: Dimensions.get('window').width/1.3, 
                        marginVertical:5, bottom:35, color: '#8c8b8b', textShadowColor:'#00fa36', textShadowRadius:5, }}>
                    ${xam} 
                </Text>
            </SafeAreaView>

CodePudding user response：

You should split on the pipe for each item returned by split like s.split('|'), instead of splitting txnHistory.split('|') for every item.

Note that when using split, there might be empty entries in the resulting array.

txnHistory = `July 6, 2022|[email protected]|description|-200~July 3, 2022|[email protected]|another description| 200~`;

txnHistory.split('~').filter(Boolean).forEach(s => {
  var eachLine = s.split('|')
  var xdate = eachLine[0]
  var xemail = eachLine[1]
  var xdes = eachLine[2]
  var xam = eachLine[3]
  console.log(xdate, xemail, xdes, xam)
});