How to render React Native flat-list with object of objects?

Question

I have React Native flat-list component. My output data is an object with keys and objects. And i need to render keys and values from objects. Can you tell me please witch will be the best way to implement it?

Output object data:

{"BTC_BCN":{"id":7,"last":"0.00000006",
"highestBid":"0.00000005","percentChange":"0.20000000"},
"BTC_BTS":{"id":14,"last":"0.00000374",
"highestBid":"0.00000376","percentChange":"-0.02857142"},
"BTC_CLAM":{"id":20,"last":"0.00029000",
"highestBid":"0.00028119","percentChange":"-0.01854609"}}

Wish result:

      <FlatList
        data={}
        keyExtractor={}
        renderItem={() => (
          <CryptoItem
            name={key}
            highBid={data.id}
            lastBid={data.last}
            percent={data.percentChange}
          />
        )}
      />

You mean ,you want to show id, last, highestBid and percentChange in flatList? — Kabir
– Kabir, Commented Aug 17, 2019 at 10:22

Mehran Khan · Accepted Answer · 2019-08-17 11:49:43Z

Covert object to array

const test = {
  BTC_BCN: {
  id: 7,
  last: "0.00000006",
  highestBid: "0.00000005",
  percentChange: "0.20000000"
  },
  BTC_BTS: {
  id: 14,
  last: "0.00000374",
  highestBid: "0.00000376",
  percentChange: "-0.02857142"
  },
  BTC_CLAM: {
  id: 20,
  last: "0.00029000",
  highestBid: "0.00028119",
  percentChange: "-0.01854609"
  }
};

const arr = Object.keys(test).map(function(key) {
  return { key: key, ...test[key] };
});

Result Array

[ { key: 'BTC_BCN',
    id: 7,
    last: '0.00000006',
    highestBid: '0.00000005',
    percentChange: '0.20000000' },
  { key: 'BTC_BTS',
    id: 14,
    last: '0.00000374',
    highestBid: '0.00000376',
    percentChange: '-0.02857142' },
  { key: 'BTC_CLAM',
    id: 20,
    last: '0.00029000',
    highestBid: '0.00028119',
    percentChange: '-0.01854609' } ]

Then use array in flatlist

Yossi · Accepted Answer · 2019-08-17 08:17:24Z

1

I would convert the object of objects to an array of objects, adding the key (e.g. BTC_BCN) as a value in the array's objects (with a key that you will specify).

For example:

[{ key: "BTC_BCN", "id":7,"last":"0.00000006", "highestBid":"0.00000005","percentChange":"0.20000000"}, 
{ key: "BTC_BTS", "id":14,"last":"0.00000374", "highestBid":"0.00000376","percentChange":"-0.02857142"}]

You can find examples on how to convert in stack overflow.

answered Aug 17, 2019 at 8:17

Yossi

6,0877 gold badges50 silver badges83 bronze badges

Comments

jc28 · Accepted Answer · 2019-08-17 09:53:26Z

0

I have found one decision, checked it here: http://pythontutor.com/javascript.html#mode=display, but it React Native this function has a different behavior:

let newArr = Object.keys(obj).map(key => {
   let ar = obj[key]

   // Apppend key if one exists (optional)
   ar.key = key

   return ar
})

answered Aug 17, 2019 at 9:53

jc28

1,9024 gold badges29 silver badges63 bronze badges

Collectives™ on Stack Overflow

How to render React Native flat-list with object of objects?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related