Object array mapping in Javascript

Question

i want to map and disply data like below how to achieve this in react ,javascipt

   ................,

   "report": Object {
    "Title 1": Array [
      Object {

        "result": "121",
        "title": "QWERTY",
      },
      Object {
        "result": "21",
        "title": "YUIO",
      },
    ],
    "Title 2": Array [
      Object {
        "result": "12",
        "title": "ERTY",
      },
      Object {
        "result": "121",
        "title": "ABCD",
      },
    ],
    "Title 3": Array [
      Object {
        "result": "2121",
        "title": "XYZ",
      },
    ],
  },
  ".......",

How to map this data like this

Title 1
QWERTY	121
YUIO	21

Title 2
ERTY	12
ABCD	121

Title 3
ERTY	12
ABCD	121

..etc

{Object.keys(report.report.report)} gives only object titles

Try reading documentation or looking for existing examples first. If you still face any issue you can edit this question with a sample example or with what you have tried so far. — wahab memon, Aug 18 '21 at 05:07
You dont show any attempts you've done to solve this. You might as well take a look at the tour: https://stackoverflow.com/tour. — Luis Cárcamo, Aug 18 '21 at 05:08
`{Object.keys(report.report.report)} ` i only get obect titles here, dont know how to map after that :( — david, Aug 18 '21 at 05:11
check this post https://stackoverflow.com/a/14810722/7261127 — Kathirpandian K, Aug 18 '21 at 05:22

score 1 · Answer 1 · answered Aug 18 '21 at 05:28

You iterate through the keys and render dynamic tables.

Working solution here:

const data = {
    report: {
      "Title 1": [
        {
          result: "121",
          title: "QWERTY"
        },
        {
          result: "21",
          title: "YUIO"
        }
      ],
      "Title 2": [
        {
          result: "12",
          title: "ERTY"
        },
        {
          result: "121",
          title: "ABCD"
        }
      ],
      "Title 3": [
        {
          result: "2121",
          title: "XYZ"
        }
      ]
    }
  };

  const tableList = data.report;

  const getTable = (title, tableData) => {
    return (
      <table border="1" width="100%">
        <tr>
          <td width="50%">{title}</td>
          <td width="50%"></td>
        </tr>
        {tableData.map((item) => {
          return (
            <tr>
              <td>{item.title}</td>
              <td>{item.result}</td>
            </tr>
          );
        })}
      </table>
    );
  };

  const renderTables = () => {
    return Object.keys(tableList).map((key) => {
      return (
        <div
          style={{
            marginBottom: "20px"
          }}
        >
          {getTable(key, tableList[key])}
        </div>
      );
    });
  };

@david is there anything else missing to accept this answer? — Prakash S, Aug 18 '21 at 07:21

Object array mapping in Javascript

1 Answers1