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?
},
}
});
});
from How to make keys for my console.log data and append it to html (Console log result to textboxes)

No comments:
Post a Comment