map array of objects to table in react without using name of the key names

Question

I have an array and I would like to render this array with without using keys because keys will not be the same every time. Even the number of keys in the next array will not be same. I have tried using map function but could not achieve success with key names.

const array1 = [{"BRANCH":"84","NUM":"1356","COST":"25","METHOD":"15"},
{"BRANCH":"3","NUM":"2134", "COST":"425","METHOD":"5"},
{"BRANCH":"4","NUM":"1905","COST":"325","METHOD":"1"},
{"BRANCH":"56","NUM":"2350","COST":"14", "METHOD":"9"}] 

const array2 = [{"UNIT":"84", "COST":"25"},
{"UNIT":"3","COST":"425"},
{"UNIT":"4","COST":"325"},
{"UNIT":"56","COST":"14"}]

Please suggest me map function to iterate over this array to render into Table. Thanks

Answer 1

You can do something like this:

NOTE: this is just a sample code please try to create your own logic for better results:

const array1 = [
  { BRANCH: "84", NUM: "1356", COST: "25", METHOD: "15" },
  { BRANCH: "3", NUM: "2134", COST: "425", METHOD: "5" },
  { BRANCH: "4", NUM: "1905", COST: "325", METHOD: "1" },
  { BRANCH: "56", NUM: "2350", COST: "14", METHOD: "9" }
];

const array2 = [{"UNIT":"84", "COST":"25"},
{"UNIT":"3","COST":"425"},
{"UNIT":"4","COST":"325"},
{"UNIT":"56","COST":"14"}]

const Table = ({item}) => {
    const items = Object.entries(item);
    return (
      <td>
        {
          items.map(([key,value]) => {
           return (
              <tr key={value}>{value}</tr>
             )
          })
        }
       </td>
    )
}

const createTable = ({arr}) => {
  return (
    arr.map(item => {
      return <Table {...item} />
    })
  )
};


<CreateTable arr={array1} />
<CreateTable arr={array2} />

Answer 2

I'm not very sure what do you want. I'm guessing you want to use index as keys while using the map method?

 const arr = [{"BRANCH":"3","NUM":"2134", "COST":"425","METHOD":"5"}, {"BRANCH":"4","NUM":"1905","COST":"325","METHOD":"1"}, {"BRANCH":"56","NUM":"2350","COST":"14", "METHOD":"9"}] const arrMap = arr.map((el,index) => { return [{key:index, ...el}] }) console.log(arrMap) // [ // [ { key: 0, BRANCH: '3', NUM: '2134', COST: '425', METHOD: '5' } ], // [ { key: 1, BRANCH: '4', NUM: '1905', COST: '325', METHOD: '1' } ], // [ { key: 2, BRANCH: '56', NUM: '2350', COST: '14', METHOD: '9' } ] // ]

Answer 3

Something like this?

  const array1 = [
    { BRANCH: "3", NUM: "2134", COST: "425", METHOD: "5" },
    { BRANCH: "4", NUM: "1905", COST: "325", METHOD: "1" },
    { BRANCH: "56", NUM: "2350", COST: "14", METHOD: "9" }
  ];

  const array2 = [
    { UNIT: "84", COST: "25" },
    { UNIT: "3", COST: "425" },
    { UNIT: "4", COST: "325" },
    { UNIT: "56", COST: "14" }
  ];

  const tempFunc = (arrayItem) => {
    const obj = Object.keys(arrayItem);
    for (let i = 0; i < obj.length; i++) {
      const name = obj[i];
      const value = arrayItem[name];

      console.log("name:", name, " value:", value);
    }
  };

  array1.map((item) => tempFunc(item));
  array2.map((item) => tempFunc(item));