0

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

4
  • In this example, all your keys are the same Commented Feb 11, 2021 at 13:32
  • could you please post the proper format of array object this is incomplete. Commented Feb 11, 2021 at 13:34
  • @mah111 i have added array2. each time the number of keys may not be the same. Commented Feb 11, 2021 at 13:36
  • can you post a sample table output that you would like to render? May be a sample image Commented Feb 11, 2021 at 13:42

3 Answers 3

2

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} />
Sign up to request clarification or add additional context in comments.

Comments

0

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' } ]
// ]

Comments

0

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));

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.