javascript - 如何为我的 console.log 数据制作 key 并将其附加到 html(控制台日志结果到文本框)

Question

我正在制作匹配系统(玩家对玩家)我的目标是。如何确保将 key 附加到我的 div 中？
我之前已经用 append 制作了一个 key 。这是片段

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>

这些是执行 newCombine 函数后的数据...现在我的目标是如何制作键并将这些结果附加为文本框？

我提供的片段在 2 个具有相同权重的数据时有效。它们组合在 1 个数组中。达到我的目标，现在，我很难将它应用到我当前的函数中，当 2 个数据小于或大于等于 15 的重量差时有效。请帮我。非常感谢。
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

介绍
我将在这里避免与控制台和 div 相关的东西，以确保解决方案可以以任何方式重用。您可以随心所欲地处理结果，包括将其添加到 div 或在控制台上显示。
问题陈述
我们需要使用标准对项目进行分组，根据该标准，重量差异小于给定值，例如。 15.
完美是无法实现的
让我们考虑具有 1900、1910 和 1920 等权重的示例。我们不能有一个权重组(1900、1910 和 1920)，因为 1920 - 1900 = 20 > 15。
我们可以有 (1900, 1910), (1920) 或 (1900), (1910, 1920) 之类的权重组
一个不完美但可能足够好的解决方案

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>

我们循环元素并将每个元素迭代到第一个匹配的组中。如果没有任何组匹配，我们创建一个新组。