React - render data in a table

Question

I have an object in state as per the following:

{
"data": {
    "available": {
        "profileOne": {
            "a": 14,
            "b": 14,
            "c": 0,
            "d": 0,
            "e": 18
        },
        "profileTwo": {
            "a": 13,
            "b": 9,
            "c": 0,
            "d": 0,
            "e": 18
        },
        "profileThree": {
            "a": 12,
            "b": 12,
            "c": 0,
            "d": 0,
            "e": 14
        },
        "profileFour": {
            "a": 3,
            "b": 3,
            "c": 0,
            "d": 0,
            "e": 5
        },
        "profileFive": {
            "a": 6,
            "b": 3,
            "c": 0,
            "d": 0,
            "e": 11
        }
    },
    "isFetching": false
}

I need to use the data as per the following sample image provided below:

I understand that in order to be able to map over these I will need to convert it to an array, that's pretty much where I'm at.

Does anybody have a solution to this?

Solution 1

This is an example to get you started. Hope this helps.

const json = {
  data: {
    available: {
      profileOne: {
        a: 14,
        b: 14,
        c: 0,
        d: 0,
        e: 18
      },
      profileTwo: {
        a: 13,
        b: 9,
        c: 0,
        d: 0,
        e: 18
      }
    }
  }
};

const header = ["pro", "a", "b", "c", "d", "e"];
class App extends React.Component {
  render() {
    return (
      <table>
        <thead>
          <tr>{header.map((h, i) => <th key={i}>{h}</th>)}</tr>
        </thead>
        <tbody>
          {Object.keys(json.data.available).map((k, i) => {
            let data = json.data.available[k];
            return (
              <tr key={i}>
                <td>{k}</td>
                <td>{data.a}</td>
                <td>{data.b}</td>
                <td>{data.c}</td>
                <td>{data.d}</td>
                <td>{data.e}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    );
  }
}

Solution 2

const obj = {
"data": {
    "available": {
        "profileOne": {
            "a": 14,
            "b": 14,
            "c": 0,
            "d": 0,
            "e": 18
        },
        "profileTwo": {
            "a": 13,
            "b": 9,
            "c": 0,
            "d": 0,
            "e": 18
        },
        "profileThree": {
            "a": 12,
            "b": 12,
            "c": 0,
            "d": 0,
            "e": 14
        },
        "profileFour": {
            "a": 3,
            "b": 3,
            "c": 0,
            "d": 0,
            "e": 5
        },
        "profileFive": {
            "a": 6,
            "b": 3,
            "c": 0,
            "d": 0,
            "e": 11
        }
    },
    "isFetching": false
}}

const entries = Object.entries(obj.data.available).map(data => Object.entries(data))
console.log(entries)

Using Object.entries will give you a set of arrays and subarrays that you can map over.

Solution 3

You'll need to iterate over your data, but because its an object, you'll need to modify it to be map-able. Here is a possible render function:

render(){
    const tableData = data.available
    return 
         (<table>
              <tr>
                  <td>Profile</td>
                  <td>a</td>
                  <td>b</td>
                  <td>c</td>
                  <td>d</td>
                  <td>e</td>
              </tr>
              {(Object.keys(tableData))
                  .map(key=>({...tableData[key],title:key}))
                  .map(row=>(
                      <tr>

                          {(Object.keys(row))
                               .map(key=>
                                   <td>
                                       {row[key]}
                                   </td>
                               )
                          )}
                      </tr>
                  )
          </table>
}

Please note that this would be much simpler if you could modify your datasource to provide an array. Objects require refactoring to be map-able, so it makes the code much more complicated.

Comments

[Sam R.]

Object.values and Object.keys are your friends.

[Shubham Khatri]

Possible duplicate of stackoverflow.com/questions/43721168/…

[Daniel Abdelsamed]

The difference between my answer and @Kunukn 's answer is that this one will expand with your data by automatically adding columns.