How to convert dot notation string array into an object JavaScript and render to table?

Question

I have this data:

const data = [
  {
    _id: '1',
    status: 'active',
    user: {
      email: '[email protected]',
      provider: 'google',
      profile: {
        image: 'https://example.com/image1.jpg',
      },
    },
  },
    {
      _id: '2',
      status: 'inactive',
      user: {
        email: '[email protected]',
        provider: 'github',
        profile: {
          image: 'https://example.com/image2.jpg',
        },
      },
    },
]


const head = ['_id', 'status', 'email', 'image']

const body = ['_id', 'status', 'user.email', 'user.profile.image']

I want to display in the table dynamically only show the string in the body array.

I tried and it worked _id, and status but not the string which contains dot

Here is what I have tried:

data.map((item) => (
  <tr key={item._id}>
    {body.map((i, index) => (
      <td key={index}>{item[i]}</td>
    ))}
  </tr>
))

this is supported in lodash with get in case you are using it. but something like this? stackoverflow.com/questions/6491463/… — cmgchess
– cmgchess, Commented Jun 29, 2022 at 11:11

Mohit Sharma · Accepted Answer · 2022-06-29 11:47:27Z

1

here is my way to achieve your desire output.
use this function

function getDeepObjValue (item, s) {
   return s.split('.').reduce((p, c) => {
      p = p[c];
      return p;
   }, item);
};

use it like this

data.map((item) => {
    return (
       <tr key={item._id}>
          {body.map((keys, i) => {
             return <td key={i}>{getDeepObjValue(item, keys)}</td>;
          })}
       </tr>
    );
})

and if you want to check demo click here

answered Jun 29, 2022 at 11:47

Mohit Sharma

6587 silver badges14 bronze badges

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

Comments

JeanJacquesGourdin · Accepted Answer · 2022-06-29 12:22:31Z

1

If your body data is not dynamic you can do :

data.map((item) => (
  <tr key={item._id}>
      <>
      <td key={index}>{item._id}</td>
      <td key={index}>{item.status}</td>
      <td key={index}>{item.user.email}</td>
      <td key={index}>{item.user.profile.image}</td>
      <>
  </tr>
))

else you can use

const deeper = (data, array) => {
  if(array.length > 1){
    return deeper(data[array[0]], array.slice(1, array.length))
  } else {
    return data[array[0]]
  }
}

with

data.map((item) => (
  <tr key={item._id}>
    {body.map((i, index) => (
      <td key={index}>{deeper(item, i.split('.'))}</td>
    ))}
  </tr>
))

Something like that

edited Jun 29, 2022 at 12:22

answered Jun 29, 2022 at 11:28

JeanJacquesGourdin

1,87112 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to convert dot notation string array into an object JavaScript and render to table?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related