循环遍历数据 object 并将 Header 映射到 React 中的值

Question

I have a question on how to use this data to map the headers to it's corresponding values and put that on the UI

This is how the data is structured:

 { "data": { "details": [ { "address_line_1": "CO Cwtsatotravel", "address_line_2": "Not Available", "city_name": "Arlington", "state_name": "-", "country_name": "Japan", "postal_code": "22203", "phone_number": "7638527755", } ] } }

This is what I am trying to do in react

 const profile_info = data?.details; const profileHeaders = [ 'Address1', 'Address2' 'City', 'State', 'Postal Code', 'Country', 'Phone', ]; return ( <Grid id="top-card" className={classes.mainContainer} container style={{ marginBottom: '4px', }} > {/* <Grid item md={11} lg={11} id="item-card"> */} <Grid container item> <Typography variant="subtitle1"> {profile_info.agency_name} </Typography> </Grid> <Grid container style={{ backgroundColor: '#f9f9f9', }} > {profileHeaders.map((v) => ( <Grid item style={{ padding: '0px 4px', }} > <Typography className={classes.profileData} gutterBottom={true}> {v} </Typography> <Typography className={classes.profileData}> {' '} {profile_info[v]} </Typography> </Grid> ))} </Grid> </Grid> );

When I do this, it's getting me all blank values on the UI for the headers

Please help, thank you !

Answer 1

There is some crucial erros on your code:

1. const profile_info = data?.details;

Your details are stored on property data.data.details , not data.details So fix this, first:

const profile_info = data?.data.details;

2. The items in ProfileHeaders are not mapped like properties in profile_info: you have a profile_info['address_line_1'] , but not profile_info['Address1'] , wich is what you are trying to do in your component.

To make this work the way you want, you should map title and property correctly.

const profileHeaders = [
    {
        title: "Address1",
        property:  "address_line_1"
    },
    {
        title: "Address2",
        property:  "address_line_2"
    },
    // map all other properties like above.
]

then you can go for that:

   {profileHeaders.map((v) => (
      <Grid
        item
        style={{
          padding: '0px 4px',
        }}
      >
        <Typography className={classes.profileData} gutterBottom={true}>
          {v.title}
        </Typography>
        <Typography className={classes.profileData}>
          {' '}
          {profile_info[v.property]}
        </Typography>
      </Grid>
    ))}

I am not checking if profile_info is undefined, but you must do it in your component to avoid errors.

Answer 2

Encode your headers using the same [as in data] keys :

const headers = {
    "address_line_1": "Address1",
    "address_line_2": "Address2",
    "city_name": "City",

later, you can list it

Object.entries(headers).forEach(([key, value]) => console.log(`${key}: ${value}`));

console.log(data) to see its structure and use const to 'alias' iterable (object with props or array) element:

// choose the right data source - depends on what logged out
// console.log(data);
// if(data) console.log(data.details); //... step by step

// const profile_info = data?.details;
// const profile_info = data?.data.details;
const profile_info = data?.details[0]; // object in array here

render values from both headers and profile_info

Object.entries(headers).forEach(([key, value]) => (
 <Grid
    key={key}
    item
    style={{
      padding: '0px 4px',
    }}
  >
    <Typography className={classes.profileData} gutterBottom={true}>
      {value}
    </Typography>
    <Typography className={classes.profileData}>
      {' ??? use css instead! '}
      {profile_info[key]}
    </Typography>
  </Grid>

or you can do the same using .map (you can use index if required)

  Object.keys(headers).map((key, idx) => (
    <Element key={key}>
       <Name title={headers[key]} />
       <Value data={profile_info[key]} />