JSFiddle - React, Tailwind, and code Playground

by dying_sakura

HTML

<div id="result">
</div>

JavaScript

const source = [{
            id: 1,
            name: 'player1',
            level: 1
        },
        {
            id: 2,
            name: 'player2',
            level: 1
        },
        {
            id: 3,
            name: 'player3',
            level: 2
        },
        {
            id: 4,
            name: 'player4',
            level: 2
        },
        {
            id: 5,
            name: 'player5',
            level: 3
        },
        {
            id: 6,
            name: 'player6',
            level: 3
        },
        { // this data is missing
            id: 7,
            name: 'player7',
            level: 1 
        },
        {  // this data is missing
            id: 8,
            name: 'player8',
            level: 1
        },



        ]
        const combine = (source) => {
  return source.reduce((acc, curr) => {
    if (acc[curr.level]) {
      const levelArr = acc[curr.level];
      const last = levelArr[levelArr.length - 1];
      if (last.length === 2) {
        levelArr.push([curr])
      } else {
        last.push(curr);
      }
    }
    else {
      acc[curr.level] = [[curr]];
    }
    return acc;
  }, {})
};
        var result = combine(source)
        var html = ""
        var keys = Object.keys(result) //if there more then one keys i.e : 2..

        for (var i = 0; i < keys.length; i++) {
            console.log("Keys " + keys[i])
            //loop through json array
            result[keys[i]].forEach(function (val, index) {
                //check if index value is `0`..change name.
                var ids = index == 0 ? "id[]" : "idside[]"
                var name = index == 0 ? "name[]" : "nameside[]"
                var levels = index == 0 ? "level[]" : "levelside[]"
                html += `<input type="text" name="${ids}" value="${val.id}">
            <input type="text" name="${name}" value="${val.name}">
            <input type="text" name="${levels}" value="${val.level}">`
            })
       ...