Заполнение полей ввода с помощью массива JSON

Question

После поиска около часа я не могу найти никого, кто поделился своим путем заполнения полей ввода на HTML-странице из массива JSON с соответствующими значениями.

Например, имя поля ввода - это первый элемент массива, тогда значение, которое должно войти внутрь, является вторым.

Еще пример:

форма ввода выглядит следующим образом ...

<input type="text" id="123111" data-inline="true" class="firstclass" name="xx3111" data-theme="b" style="color: red;"> 

и массив JSON является:

000001: "firstValue" 
000002: "secondValue" 
000003: "thirdValue" 
000004: "fourthValue" 
etc, etc 

То, что я хочу сделать, это заполнить соответствующее поле ввода со значением в массиве. Другой пример:

вход с идентификатором 00заполняется строкой в ​​массиве, который имеет номер 00

<input type="text" id="000001"> заполняется строкой firstValue

Answer 1

Вы должны перебрать каждое свойство объекта данных и выберите соответствующий элемент ввода, а затем установите его значение:

for (var key in data) { 
    document.getElementById(key).value = data[key]; 
} 

data является объект, который называется «JSON массив».

Answer 2

$.each(json, function(index, value) { 
    $('input#' + index).val(value); 
}); 

B/c Я ленив Я просто использовал jQuery. Концепция - это та же самая погода, в которой вы используете чистые js, или другую библиотеку, такую ​​как подчеркивание. Я предполагаю, что ваш массив JSON действителен, и вы только что отобразили его неправильно.

Answer 3

Если вы хотите, чтобы выбрать элементы DOM (в этом поле ввода случае) id и если вы не 100% уверены, что идентификатор существует вам нужно проверить null или undefined.

jsfiddle demo

var mydata ={ 
    "000001": "firstValue", 
    "000002": "secondValue", 
    "000003": "thirdValue", 
    "000000": "This id does not exist", 
    "000004": "fourthValue" 
} 


for (var k in mydata) { 
     var input = document.getElementById(k); 
     if(typeof input !== 'undefined' && input !== null) {//skip non exixting ids 
     input.value= mydata[k]; 
     } 
} 

Answer 4

// Make one input field, based on value and id 
function makeField(value, id) { 
    var input = document.createElement('input'); 
    input = document.createElement('input'); 
    input.id = id; 
    input.className = 'firstclass'; 
    input.type = 'text'; 
    input.setAttribute('data-inline', "true"); 
    input.setAttribute('data-inline', "true"); 
    input.setAttribute('data-theme', "b"); 
    input.setAttribute('style', "color:red;"); 
    input.setAttribute('value', value); 
    return input; 
} 

// Make many fields, from an object. 
function makeInputsFromObject(obj) { 
    var hasOwnProperty = Object.prototype.hasOwnProperty, 
     fragment = document.createDocumentFragment(), 
     id, 
     input; 
    for (id in obj) { 
     if (hasOwnProperty.call(obj, id)) { 
      fragment.appendChild(makeField(obj[id], id)); 
     } 
    } 
    return fragment; 
} 

// Make many fields, from an array. 
function makeInputsFromArray(arr) { 
    return arr.reduce(
     function (fragment, value, id) { 
      fragment.appendChild(makeField(value, id)); 
      return fragment; 
     }, 
     document.createDocumentFragment() 
    ); 
} 

// Test/demonstration code below. 

document.body.appendChild(
    makeInputsFromObject({ 
     "000001": "firstValue", 
     "000002": "secondValue", 
     "000003": "thirdValue", 
     "000004": "fourthValue" 
    }) 
); 

document.body.appendChild(
    makeInputsFromArray([ 
     "fifthValue", 
     "sixthValue", 
     "seventhValue", 
     "eighthValue" 
    ]) 
); 

Как тест/демо показывает код, вы кормите структуру данных для одной из функций makeInputs (в зависимости от случая), и функция возвращает узел DOM (на самом деле DocumentFragment). Добавьте это в DOM обычным способом, и он даст вам ваши поля.

В качестве основных элементов массива вы можете реализовать это как операцию reduce(), если вы действительно работаете с массивом. Объекты не имеют встроенной функции сокращения(), поэтому мы импровизируем на этом, но общий принцип тот же, и мы можем использовать одну и ту же функцию makeField().

Будьте осторожны: ни одна версия не соответствует требованиям, которые вы ищете. Версия Array не совсем соответствует идентификаторам, и ни одна версия не соответствует вашей схеме для атрибута name. Но я надеюсь, что это иллюстрирует принцип.

Answer 5

Вы ищете заполнение полей ввода на HTML-странице из массива JSON с соответствующими значениями.

1. Сначала получите выходные значения в функции javascript.
2. Затем проведите через массив json с функцией $ .each, как показано ниже.
3. Затем повторите цикл через поля ввода в вашей функции HTML.
4. Если ключ массива в вашем массиве json соответствует id, поместите значение json в качестве входного значения.

---

Я попытался проиллюстрировать это примерно следующим образом:

<?php 
      $.ajax({ 
       url : path/to/json/output/file, 
       type : 'POST', //the way you want to send data to your URL 
       dataType : 'json', 

       error: function(){ 
         $('#result_table_json').append('<p>Error Loading Data</p>'); 
         }, 

       success :function(response){ 
       //get the array element one by one in the following loop 
        $.each(row,function(key,value){ 
         //now check for the right input id that matches the key. I guess all your inputs have something in common eg. class name. So loop through the fields 
         $.each(".firstclass")function(){ 

          if($(this).attr('id') === key) 
          { //fill the input field here 
           $(this).val(value);           } 
          //Alternatively you may append the fields externally in case they dont exist without the json values like this: 
          //$('#result_table_json').append('<input type="text" id="'+key+'" data-inline="true" class="firstclass" name="'+key+'" data-theme="b" value="'+value+'" style="color: red;">'); 
         });  
        }); 


       } 

      }); 
    ?>