integrate dynamic data in react

Question

I'm making a table that has to be dynamic, they are passing me data like this

[
  {
    "store_name": "daniel",
    "store_id": "054050",
    "store_address": "av las americas",
    "store_logo": "https://centroamerica-resources.s3.amazonaws.com/walmart/express.png",
    "occupancy": {
      "recluta": 400,
      "occupancy": 0,
      "percentage": 0
    },
    "alerts": {
      "conglomerations": 0,
      "occupancy": 0
    },
    "visits": 0
  },
  {
    "store_name": "expreso polar",
    "store_id": "re485754re",
    "store_address": "boulevard california",
    "store_logo": "https://centroamerica-resources.s3.amazonaws.com/walmart/express.png",
    "occupancy": {
      "recluta": 300,
      "occupancy": 0,
      "percentage": 0
    },
    "alerts": {
      "conglomerations": 0,
      "occupancy": 0
    },
    "visits": 3836
  },
]

This is an example of the data that they have given me in a .txt what I need is to show all this data in a table, I have created one with false data but what I need is to make it dynamic that it alone adds more data without need to create more components

for the moment, each data only has to be shown in div

<div class="">
       <div class="flex">
        <div class="">Name</div>
        <div class="">Id</div>
        <div class="">Adress</div>
        <div class="">Logo</div>
        <div class="">Rcluta</div>
        <div class="">Ocupancy</div>
        <div class="">Percentage</div>
       </div>
       <div class="flex">
        <div class="">{store_name}</div>
        <div class="">{store_id}</div>
        <div class="">{store_address}</div>
        <div class="">{store_logo}</div>
        <div class="">{recluta}</div>
        <div class="">{occupancy}</div>
        <div class="">{percentage}</div>
       </div>
    </div>

Midhun G S · Accepted Answer · 2020-11-05 18:35:25Z

0

The best practice is that feed data something like this

[
   {
      data: [
        { name: 'Store Name', value: 'expreso polar'},
        { name: 'Store Id', value: 're485754re'}
      ]   
   }
]

name be the label and value be the data needs to shown in the table for corresponding label

answered Nov 5, 2020 at 18:35

Midhun G S

9959 silver badges23 bronze badges

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

4 Comments

DGomez Over a year ago

the problem is that they will pass me the api at work

Midhun G S Over a year ago

Do you mean the fields will be different?

DGomez Over a year ago

for example, the form of the data will always be the same but the data as "store_id": what will always change are the numbers or addresses, and they will send me various data, what I have to do is show as a list of all that data

Midhun G S Over a year ago

You can use data.map() function to iterate the list

Jack B · Accepted Answer · 2020-11-05 19:56:46Z

0

This is something very common that I come across while coding and here is what I do. Im not sure how you are getting your json, whether it be by a fetch or if its hard coded but store it as a json object inside a variable

    const [metadata, setMetadata] = useState([])
    const data = response.json()
    setMetadata(data);
    const Table = useMemo(() => metadata.map(
        ({name, id, tags, address, logo}) => (
            <div>
                <div>Name: {name}</div>
                <div>Id: {id}</div>                
                <div>Tags: {tags}</div>
                <div>Address: {address}</div>
                <div>: {logo}</div>
            </div>
        )
        ),
        [metadata]);

Once you get your metadata in some sort of json format you can simply use the map function to map it all into jsx. Then call it by using <Table/>.

Using useMemo is always a good idea because it will update whenever one of the dependencies changes, in this case metadata.

answered Nov 5, 2020 at 19:56

Jack B

1911 gold badge1 silver badge7 bronze badges

4 Comments

DGomez Over a year ago

for now they have only passed me a .text with enough data equal to the one I have put in the code

Jack B Over a year ago

@DanielAbrego hmmm, if there is some way you can read this into a json that would make it much easier to handle. However, im not sure what you can do with this if it is just a text file.

DGomez Over a year ago

They have told me that until later they will pass me the json that right now I will do it with the examples that they gave me that are more than 10 like the ones I put above, but I still cannot implement them, if you could help me

DGomez Over a year ago

I have created a new better asked question stackoverflow.com/questions/64723627/…

Collectives™ on Stack Overflow

integrate dynamic data in react

2 Answers 2

4 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related