CODEWITHSUNDEEP
javascriptreactjsreact-native
FatBoyGebajzla
FatBoyGebajzla

Reputation: 159

Iterating through array of JavaScript objects and outputting it

I have this array of js objects. How can I output this in jsx based on time key? Like in the example below.

  [
    {
      articleName: "Burger",
      time: "11/8/2018, 2:43:30 PM"
    },
    {
      articleName: "Cheese",
      time: "11/8/2018, 2:43:30 PM"
    },
    {
      articleName: "Burger",
      time: "11/8/2018, 2:44:30 PM"
    },
    {
      articleName: "Cheese",
      time: "11/8/2018, 2:44:30 PM"
    },
    {
      articleName: "Burger",
      time: "11/8/2018, 2:45:30 PM"
    },
    {
      articleName: "Cheese",
      time: "11/8/2018, 2:45:30 PM"
    }
  ]

Based on time:

from 2:43:30 PM
<View>
  <Text>Burger</Text>
  <Text>Cheese</Text>
</View>

from 2:44:30 PM
<View>
  <Text>Burger</Text>
  <Text>Cheese</Text>
</View>

from 2:45:30 PM
<View>
  <Text>Burger</Text>
  <Text>Cheese</Text>
</View>

Upvotes: 0

Views: 62

Answers (1)

Peter Squicciarini
Peter Squicciarini

Reputation: 26

One solution would be to reduce the your array into groups based on time, and then map those into JSX. Assuming your array is called data:

const dataByTime = data.reduce((acc, el) => {
    if (Array.isArray(acc[el.time])) {
        acc[el.time].push(el.articleName)
    } else {
        acc[el.time] = [el.articleName]
    }
    return acc
}, {})

dataByTime is now of the format { [date time]: ['burger', 'cheese'], ... }

So you could map that to JSX like this:

Object.keys(dataByTime).map((time) => (
    <div>
        {time}
        <View>
        {
            dataByTime[time].map(food => (
                 <Text>{food}</Text>
            ))
        }
        </View>
    </div>
))

You could skip the map in the JSX and handle it in the original reducer too (instead of pushing el.articleName you could push <Text>{el.articleName}</Text>).

Upvotes: 1

Related Questions