0

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>
1
  • You'll need to group the articleName by time, and then display each articleName for the same time. Commented Nov 8, 2018 at 14:29

1 Answer 1

1

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>).

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.