How to map objects into ui?

user_16516348 0
Viewed 231

Currently I have some data in the format of

data : {
  full_name: 'John Doe',
  date_of_birth: '01-01-1990'
}

I want to render it in a table format which would sort of look like

Full Name : John Doe
Date Of Birth: 01-01-1990

If it was an array, I could just do something like

data.map((item) => <h1>item</h1>

but I also need the to print the key.

How do I achieve something like this in a single loop like function? I could have used map in case of an array, but I also need to render the key part of the object.

NOTE: Data object cannot be changed.

reactjs javascript
5 Answers

You can map the entries array, like this:

Object.entries(data).map((entry, index) => (
    <div key={index}>{entry[0]}: {entry[1]}</div>
));

the Object.entries function creates an array of [key, value] arrays from the entries of the function.

Also, you may use a function that will convert keys from snake_case to readable format. Here is a one-line function that does this conversion:

   const snakeToText = (str) => str.split('_').map((word) => word[0].toUpperCase() + word.substring(1)).join(' ');
user_158656110

Let say you have an object

const obj = {
  data: {
    full_name: "John Doe",
    date_of_birth: "01-01-1990"
  }
};

then you can use either of the following ways:

Live Demo

Codesandbox Demo

1) Using Object.keys

<div>
  {Object.keys(obj.data).map((key) => {
    return (
      <div> {key} - {obj.data[key]} </div>
    );
  })}
</div>

2) Using Object.entries

<div>
  {Object.entries(obj.data).map(([key, value]) => {
    return (
      <div>
        {key} - {value}
      </div>
    );
  })}
</div>

EDITED: If you want to convert my_name to My Name then you can create a utility function. You can use split, map, and join.

function convertString(str) {
  return str
    .split("_")
    .map((str) => str[0].toUpperCase() + str.slice(1))
    .join(" ");
}

and call this function as:

<div>
  {key.includes("_") ? convertString(key) : key} - {obj.data[key]}
</div>
user_91534480

You need to convert your data in Object.entries or Object.values.

Object.entries() and Object.values()

Example :

Object.entries()

   const object1 = {
     a: 'somestring',
     b: 42
   };
        
    for (const [key, value] of Object.entries(object1)) {
       console.log(`${key}: ${value}`);
    }
    
    // expected output:
    // "a: somestring"
    // "b: 42"

Object.values()

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1));
// expected output: Array ["somestring", 42, false]


const data = {
  full_name: 'John Doe',
  date_of_birth: '01-01-1990'
};

const values = Object.entries(data);

console.log(values)

values.map(entry => console.log(entry[0] + " " + entry[1]));

user_78330770

You can do this like ,

let data = {
  full_name: 'John Doe',
  date_of_birth: '01-01-1990'
}
Object.keys(data).map((eachKey)=>{
return `${eachKey} : ${data[eachKey]}`
})
user_115519250 
const data = {
  full_name: "John Doe",
  date_of_birth: "01-01-1990"
};
export default function App() {
  const renderableData = () =>
    Object.keys(data).map((k) => {
      const label = k
        .replaceAll("_", " ")
        .split(" ")
        .map((i) => i[0].toUpperCase() + i.slice(1))
        .join(" ");

      return (
        <div>
          <div style={{ display: "inline-block" }}>{label}: &nbsp;</div>
          <div style={{ display: "inline-block" }}>{data[k]}</div>
        </div>
      );
    });

  return <div>{renderableData()}</div>;
}

example here: https://codesandbox.io/s/crazy-hill-hfvl5?file=/src/App.tsx:0-560

user_32585440
Related