How to make keys for my console.log data and append it to html (Console log result to textboxes)

Question

I am making matching system (Player vs Player) my target is. How can I make sure that the keys are then appended to my div?

I have already made a key with append before. Here's the snippet

const source = [{
    entryID: 1,
    entryName: 'player1',
    weight: 1900,
    
  },
  {
    entryID: 2,
    entryName: 'player2',
    weight: 1900,
   
  },
  {
    entryID: 3,
    entryName: 'player3',
    weight: 1910,
  
  },
  {
    entryID: 4,
    entryName: 'player4',
    weight: 1910,
  
  },
  {
    entryID: 5,
    entryName: 'player5',
    weight: 1915,
    
  },
  {
    entryID: 6,
    entryName: 'player6',
    weight: 1915,
   
  },
  { 
    entryID: 7,
    entryName: 'player7',
    weight: 1920,
  
  },
  { 
    entryID: 8,
    entryName: 'player8',
    weight: 1920,
  
  },
  {
    entryID: 9,
    entryName: 'player9',
    weight: 1930,
    
  },
  {
    entryID: 10,
    entryName: 'player10',
    weight: 1930,

  },



  ]


  const combine = (source) => {
    return source.reduce((acc, curr) => {
      if (acc[curr.weight]) {
        const levelArr = acc[curr.weight];
        const last = levelArr[levelArr.length - 1];
        if (last.length === 2) {
          levelArr.push([curr])
        } else {
          last.push(curr)
        }
      } else {
        acc[curr.weight] = [
          [curr]
        ];
      }
      return acc;
    }, {})
  };


  var result = combine(source)
  var html = ""
  var keys = Object.keys(result) //if there are more than one keys i.e : 2..

  for (var i = 0; i < keys.length; i++) {
  result[keys[i]].forEach(function(val) {

    val.forEach(function(value, index) {

     
        var entryIDs = index == 0 ? "entryIDM[]" : "entryIDW[]"
        var handlers = index == 0 ? "handlerM[]" : "handlerW[]"
        var weights = index == 0 ? "weightM[]" : "weightW[]"
        html += `<input type="text" name="${entryIDs}" value="${value.entryID}"> 
                 <input type="text" name="${handlers}" value="${value.entryName}">
                 <input type="text" name="${weights}" value="${value.weight}">
                 `
    })
    })
  }
  document.getElementById("result").innerHTML = html //add html to div

console.log(result);

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

These are my data after doing the function newCombine... Now my target is how can i make keys and append these result as textbox?

The snippet I provided works when 2 data with the same weight. They are combined in 1 array. Going to my target, Now, I'm having a hard time applying that in my current function which works when 2 data with less than or greater than equal 15 weight difference. Please, help me. Thank you very much.

html

<div id="appendhere"> </div>

ajax

  function newCombine(data, difference) {
  let nonMatched = [...data]
  const groups = {}

  for (let i = 0; i < nonMatched.length - 1; i++) {
    const first = nonMatched[i]

    inner: for (let j = nonMatched.length - 1; j > i; j--) {
      const second = nonMatched[j]
      const delta = Math.abs(first.weight - second.weight)

      if (delta <= difference && first.entryName !== second.entryName) {
        const groupKey = `${first.weight}_${second.weight}`
        groups[groupKey] = [first, second]
        nonMatched = nonMatched.filter(
          obj => obj.entryID != first.entryID && obj.entryID != second.entryID
        )
        i = -1
        break inner
      }
    }
  }
  return { ...groups, ...nonMatched }
}    



$(document).ready(function() {


var entry_list =$('#entry_list1').DataTable({ 
      
 
        "ajax": {
              "url": "<?php echo site_url('report/controlget')?>",
            "type": "get",
            
           success: function(data) {
                
            const source = data;
             const a = newCombine(source, 15);
            
            console.log(a);
            
            
        //How can i append my key here?
            
            
            },
            }
    
 
    });
    
 });

Answer 1

Introduction

I will avoid console and div-related stuff here to make sure that the solution is reusable in any manner. You can do with the result whatever you want, including adding it to a div or displaying it on the console.

Problem statement

We need to group items using the criteria, according to which weight difference is smaller than a given value, eg. 15.

Perfection is unachievable

Let's consider the example when we have weights such as 1900, 1910 and 1920. We cannot have a weight group of (1900, 1910 and 1920) because 1920 - 1900 = 20 > 15.

We could have weight groups of the like of (1900, 1910), (1920) or (1900), (1910, 1920)

An imperfect, but probably good-enough solution

const source = [{
    entryID: 1,
    entryName: 'player1',
    weight: 1900,
    
  },
  {
    entryID: 2,
    entryName: 'player2',
    weight: 1900,
   
  },
  {
    entryID: 3,
    entryName: 'player3',
    weight: 1910,
  
  },
  {
    entryID: 4,
    entryName: 'player4',
    weight: 1910,
  
  },
  {
    entryID: 5,
    entryName: 'player5',
    weight: 1915,
    
  },
  {
    entryID: 6,
    entryName: 'player6',
    weight: 1915,
   
  },
  { 
    entryID: 7,
    entryName: 'player7',
    weight: 1920,
  
  },
  { 
    entryID: 8,
    entryName: 'player8',
    weight: 1920,
  
  },
  {
    entryID: 9,
    entryName: 'player9',
    weight: 1930,
    
  },
  {
    entryID: 10,
    entryName: 'player10',
    weight: 1930,

  },
];

let groups = [];

for (let item of source) {
    let found = false;
    for (let group of groups) {
        if (!found) {
            let isFit = true;
            for (let element of group) {
                if (Math.abs(element.weight - item.weight) > 15) isFit = false;
            }
            if (isFit) {
                group.push(item);
                found = true;
            }
        }
    }
    if (!found) groups.push([item]);
}

document.getElementById("foo").innerText = JSON.stringify(groups);

<div id="foo"></div>

We loop the elements and iterate each one into the first group that would match. If none of the groups are matching, we create a new group.