Заполните текстовое поле с датой базы данных с помощью JavaScript

Question

У меня есть данные о датах и ​​количестве. Я хочу заполнить эти данные до нужного ввода текста. Как вы видите в jsFiddle несколько месяцев имеют данные, а некоторые месяцы не имеют данных.

В моем примере ниже я создаю входы вручную, но мне нужно создать их с помощью for -loop, потому что я должен генерировать текстовые поля с датой первого месяца до сегодняшнего месяца.

Что такое простой способ для этого?

jsFiddle:

// Date format dd MM yyyy 
 
var salaryData = [['date':'1.1.2015','amount':'100'],['date':'5.3.2015','amount':'105'],['date':'8.4.2015','amount':'1900'],['date':'15.6.2015','amount':'1005']]

<div> 
 
    <h1>Salary days</h1> 
 
    <ul> 
 
     <li> Amount/Date </li> 
 
     <li> 
 
      January 2015 <input type="text" name="janPrice" /><input type="text" name="date" /> 
 
     </li> 
 
     <li> 
 
      February 2015 <input type="text" name="janPrice" /><input type="text" name="date" /> 
 
     </li> 
 
      <li> 
 
      March 2015 <input type="text" name="janPrice" /><input type="text" name="date" /> 
 
     </li> 
 
      <li> 
 
      April 2015 <input type="text" name="janPrice" /><input type="text" name="date" /> 
 
     </li> 
 
      <li> 
 
      Haziran 2015 <input type="text" name="janPrice" /><input type="text" name="date" /> 
 
     </li> 
 
      <li> 
 
      June 2015 <input type="text" name="janPrice" /><input type="text" name="date" /> 
 
     </li> 
 
    </ul> 
 
<div>

jsFiddle link

Answer 1

Я написал код JavaScript для вас. Я не уверен, решит ли это вашу проблему. Я надеюсь, что я правильно Вас понял,)

// Date format dd MM yyyy 
var salaryData = [ 
    { 
     'date': '1.1.2015', 
     'amount':'101' 
    }, 
    { 
     'date': '1.2.2015', 
     'amount':'102' 
    }, 
    { 
     'date': '1.3.2015', 
     'amount':'103' 
    }, 
    { 
     'date': '1.4.2015', 
     'amount':'104' 
    } 
]; 

var monthNames = ["January", "February", "March", "April", "May", "June", 
    "July", "August", "September", "October", "November", "December" 
]; 

var list = document.getElementsByTagName("ul"); 

var month = salaryData.map(function(salary) { 
    return filterMonth(salary.date); 
}); 

var year = salaryData.map(function(salary) { 
    return filterYear(salary.date); 
}); 


salaryData.forEach(function(salary, index){ 
    var listEntry = "<li>"+ month[index] +" "+ year[index] +" <input type='text' name='janPrice' value='"+ salaryData[index].amount +"' /><input type='text' name='year' value='"+ salaryData[index].date +"' />"; 
    list[0].innerHTML += listEntry; 
}); 

function filterMonth(strDate) { 
    var dateParts = strDate.split("."); 
    var d = new Date(dateParts[2], (dateParts[1] - 1), dateParts[0]); 
    return monthNames[d.getMonth()]; 
} 

function filterYear(strDate) { 
    var dateParts = strDate.split("."); 
    var d = new Date(dateParts[2], (dateParts[1] - 1), dateParts[0]); 
    return d.getFullYear(); 
} 

http://jsfiddle.net/unqq5vsk/2/

Во-первых, я исправляю свой контейнер данных. Затем я прочитал свойство month и year из вашего объекта массива и сгенерировал HTML для вывода файлов.

Answer 2

Ваш формат данных для salaryData недействителен для javascript. Вы хотите вложенные объекты внутри вашего массива обертывания, как таковые: [{id: val}, {id: val}]. Это связано с тем, что в javascript нет ассоциативного массива (все это объект).

Как только это исправлено, существует проблема, связанная с тем, что ваши данные образца не соответствуют вашему вопросу: Потому что я должен генерировать текстовые поля с датой начала месяца до сегодняшнего месяца. В настоящее время май, но ваши данные имеют 6-й месяц (при условии, что ваш месяц в ваших данных основан на 1), поэтому я удалил эту точку данных из вашего salaryData, как мы не можем видеть в будущем.

Теперь у нас есть правильный пример набора данных.

Наконец-то вы прокомментировали: Даже если дата отсутствует в данных, я хочу видеть пустой ввод. Таким образом здесь идет обновленный пример версии (в генераторном текстовое поле от января до текущего месяца и населяющих их с данными, где таковые имеются):

var salaryData = [{'date':'1.1.2015','amount':'100'},{'date':'5.3.2015','amount':'105'},{'date':'8.4.2015','amount':'1900'}]; 
 

 
console.log(
 
    demo(document.getElementsByTagName('div')[0], salaryData).innerHTML 
 
); 
 

 
function demo(par, data){ 
 
    var a = document.createElement('li') 
 
    , b = document.createElement('input') 
 
    , ul = document.createElement('ul') 
 
    , ml = [ 'January','February','March','April','May','June','July' 
 
      , 'August','September','October','November','December' 
 
      ] 
 
    , ms = [ 'jan','feb','mar','apr','may','jun','jul' 
 
      , 'aug','sep','oct','nov','dec' 
 
      ] 
 
    , t = new Date() 
 
    , y = t.getFullYear() 
 
    , m = t.getMonth()+1 
 
    , i 
 
    ; //end local vars 
 

 
    b.setAttribute('type','text'); 
 
    ul.appendChild(a.cloneNode(false)).innerHTML = 'Amount/Date'; 
 

 
    // build inputs in DOM 
 
    for(i = 0; i<m; ++i) { 
 
    t = a.cloneNode(false); 
 
    t.innerHTML = ml[i] + ' ' + y + ' '; 
 
    t.appendChild(b.cloneNode(false)).setAttribute('name', ms[i] + 'Price'); 
 
    t.appendChild(b.cloneNode(false)).setAttribute('name', ms[i] + 'Date'); 
 
    ul.appendChild(t); 
 
    } 
 

 
    // Set values 
 
    b = ul.getElementsByTagName('input'); 
 
    for(i = 0; t = data[i++];) { 
 
    a = (t.date.split('.')[1]-1)*2; 
 
    b[a].setAttribute('value', t.amount); 
 
    b[a+1].setAttribute('value', t.date); 
 
    } 
 

 
    // Output/return .. whatever floats your boat.. ARRR 
 
    return par.appendChild(ul); 
 
}

<div><h1>Salary days</h1></div>

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