Как отобразить мою консоль.введите результат в текст ввода?

#javascript

Вопрос:

У меня есть функция, в которой будут объединены 2 данных, если они имеют одинаковый уровень. Моя цель-как я могу показать свою консоль.занесите результат в мой HTML-код? Я хочу показать его в форме ввода типа=» текст». Это моя нынешняя работа. Это видно только в » Любая помощь будет оценена по достоинству. Спасибо.

 const source = [
    {id: 1, name: 'player1', level: 2},
    {id: 3, name: 'player2', level: 2},


]

//this function is for combining 2 arrays in 1 if they have the same level
const combine = (source) => {
    return source.reduce((acc,curr) => {
        if(acc[curr.level]) 
            acc[curr.level].push(curr);
        else
            acc[curr.level] = [curr];   
        return acc;
    },{})
}

//this function is for displaying console.log result to my html. But the thing is it is not in input type, it's only in the span 
(function (logger) {
    console.old = console.log;
    console.log = function () {
        var output = "", arg, i;

        for (i = 0; i < arguments.length; i  ) {
            arg = arguments[i];
            output  = "<span class="log-"   (typeof arg)   "">";

            if (
                typeof arg === "object" amp;amp;
                typeof JSON === "object" amp;amp;
                typeof JSON.stringify === "function"
            ) {
                output  = JSON.stringify(arg);   
            } else {
                output  = arg;   
            }

            output  = "</span>amp;nbsp;";
        }

        logger.innerHTML  = output   "<br>";
        console.old.apply(undefined, arguments);
    };
})(document.getElementById("logger"));

// Testing
console.log('Result', combine(source));

 <pre id="logger"></pre> // display the result here

Ответ №1:

Вы можете перебирать значения массива с помощью forEach цикла, затем внутри него добавлять новые входные данные со значениями внутри некоторой переменной = , а затем, наконец, добавлять это в свой DOM.

Демонстрационный код :

 const source = [{
    id: 1,
    name: 'player1',
    level: 2
  },
  {
    id: 3,
    name: 'player2',
    level: 2
  },


]
const combine = (source) => {
  return source.reduce((acc, curr) => {
    if (acc[curr.level])
      acc[curr.level].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}">`
  })
}
document.getElementById("result").innerHTML = html //add html to div

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

1. Вау, работает как по волшебству. Кроме того, можно ли мне задать еще один вопрос? Моя дополнительная цель состоит в том, чтобы хранить 2-е данные в поле другого типа ввода с разными именами, предоставленное вами идеально подходит для моих 1-х данных, но для 2-х данных я хочу сохранить их с другим именем=»». Пожалуйста, посмотрите это. prnt.sc/16lnbnz

2. Итак, в одном массиве json всегда будет 2 данных ? 🙂

3. Да, это так. Это происходит потому, что я использую систему подбора игроков, в которой будут подобраны игроки с одинаковым уровнем, например, игрок 1 имеет уровень 1, а игрок 2 имеет уровень 2. Они будут автоматически сопоставлены. Вот почему в одном массиве json всегда будет 2 данных. Спасибо. И извини, что слишком все усложняю.

4. УОУУУУУУУУУУУУУУУУУУУУУУ. Я просто очень благодарна. Надеюсь, у вас каждый день будет отличный день. Еще раз большое вам спасибо

5. Рад помочь 🙂

Ответ №2:

Чтобы задать текст внутри элемента ввода, вам необходимо использовать свойство value.

 const input = document.getElementById("input")
function showData() {
  input.value = "Any String value here"
}

 <input type="text" id="input">
<button onclick="showData()">Show Data</button>