関連する方法でJSONから複数のKEY：VALUEペアを抽出する方法

Question

ユーザーがテーブルの列全体で特定の入力を変更することができる、毎日のイベント用のパブリック編集可能なログを作成中です。 、Time、Checkbox、User Notesなどがありますが、最初の列「Day」はハードコードされています（「Day 1」、「Day 2」など）。

var $TABLE = $('#table'); 
    var $SAVEIT = $('#save-btn'); 

    $SAVEIT.click(function() { 

     var $rows = $TABLE.find('tr:not(:hidden)'); 
     var headers = []; 
     var data = []; 
     var VALue = []; 
     var keeey = "uSTORE-A"; 

     var SETData = function(keeey, VALue) { 
     if (!keeey || !VALue) {return;} 
     localStorage.setItem(keeey, VALue); 
     alert("DATA SAVED! \nYou may now close your browser."); 
     }; 

    // Get the headers (add special header logic here) 
    $($rows.shift()).find('th:not(:empty)').each(function() { 
     headers.push($(this).text().toLowerCase()); 
    }); 

    // Turn all existing rows into a loopable array 
    $rows.each(function() { 
     var $td = $(this).find('td'); 
     var h = {}; 

     // Use the headers from earlier to name our hash keys 
     headers.forEach(function (header, i) { 
     h[header] = $td.eq(i).text(); 
    }); 

    data.push(h); 
    }); 

    var uSAVE = JSON.stringify(data); 

    SETData("uSTORE-B", uSAVE); 

    }); 

をその後、そのようなより多くのロギングのための次の日のよう：

 <div id="table" class="table-editable table-responsive table-bordered"> 
<span class="table-add glyphicon glyphicon-plus"></span> 
<table class="table"> 
    <tr class="warning"> 
    <th>Day</th> 
    <th>Date</th> 
    <th>Time</th> 
    <th>Yes/No</th> 
    <th>Notes</th> 
    </tr> 

    <tr class="active"> 
    <td contenteditable="true">Day 1</td> 
    <td contenteditable="true"><input id="date1" value="" type="date" name="date" onblur="dateConstruct(1)"></td> 
    <td contenteditable="true"><input id="time1" value="" type="time" name="usr_time" onblur="timeConstruct(1)"></td> 
    <td contenteditable="true">Y <input class="radioBut" type="checkbox" name="1" value="Yes">/N <input class="radioBut" type="checkbox" name="2" value="No"></td> 
    <td contenteditable="true"><input id="note1" value="" type="text" name="notes" onblur="noteConstruct(1)"></td> 
    <td> 
     <span class="table-remove glyphicon glyphicon-remove"></span> 
    </td> 
    </tr> 

    <tr class="active"> 
    <td contenteditable="true">Day 2</td> 
<td contenteditable="true"><input id="date2" value="" type="date" name="date" onblur="dateConstruct(2)"></td> 
    <td contenteditable="true"><input id="time2" value="" type="time" name="usr_time" onblur="timeConstruct(2)"></td> 
    <td contenteditable="true">Y <input class="radioBut" type="checkbox" name="1" value="Yes">/N <input class="radioBut" type="checkbox" name="2" value="No"></td> 
    <td contenteditable="true"><input id="note2" value="" type="text" name="notes" onblur="noteConstruct(2)"></td> 
    <td> 
     <span class="table-remove glyphicon glyphicon-remove"></span> 
    </td> 
    </tr> 
</table> 
</div> 

これは私が正常に動作し、データを保存するために使用するコードは次のとおりです。ここに私の現在のテーブルのスタイルのサンプルがありますこのコードを使用して、ローカルストレージのブラウザに保存されているJSONから以前に保存したデータを読み込むことができます。

[{"day":"Day 1","date":"2017-02-24","time":"12:01","yes/no":"Y","notes":"Some notes"},{"day":"Day 2","date":"2017-02-25","time":"06:06","yes/no":"Y","notes":"Another day's notes"},{"day":"Day 3","date":"2017-02-26","time":"","yes/no":"N","notes":""},{"day":"Day 4","date":"2017-02-27","time":"22:00","yes/no":"Y","notes":"Notes for day after no notes"}] 

このように、私のように（データを保存することができる午前：保存したJSONは（私は、ペンテストの目的のために、「警告（）」を介して自分自身に表示されていた）、このようになります。 JSON）とデータのロード（JSONとして）の両方を正しく実行できます。しかし、私は以前に保存されたユーザーのデータでテーブルを再生成する方法を見つけることができませんでした。言い換えれば、JSON Key：Valueの値をTableに入力して、ユーザーが中断したところから取り出せるようにする方法がわかりません。私はいくつかの方法を試しましたが、最初のKey：Value Pairで終わって、別々の値を循環するのではなく、列のすべての値を入力します。 JSONを別の方法で保存する必要がありますか？

ありがとうございました。提供できる可能性のあるヘルプや、正しい方向に向いている指をあり​​がとうございます。

Answer 1

forループとイテレータを使用して配列をループし、for ... inを使用してオブジェクトプロパティをループすることができます。もちろん、あなたの実際のテーブル構造なしに私が正しい方向に向かいつつあるかどうかは分かりません。ここに例があります...

あなたのテーブル構造を含めるように編集しました。それはあなたがちょうどあなたの入力...

var json = [{"day":"Day 1","date":"2017-02-24","time":"12:01","yes/no":"Y","notes":"Some notes"},{"day":"Day 2","date":"2017-02-25","time":"06:06","yes/no":"Y","notes":"Another day's notes"},{"day":"Day 3","date":"2017-02-26","time":"","yes/no":"N","notes":""},{"day":"Day 4","date":"2017-02-27","time":"22:00","yes/no":"Y","notes":"Notes for day after no notes"}]; 
 

 
$(document).ready(function() { 
 
    var $table = $('table'); 
 
    
 
    // set table data 
 
    genData($table); 
 
}); 
 

 
function genData($table) { 
 
    // loop through array of rows 
 
    for(var i = 0; i < json.length; i++) { 
 
    // create a new row 
 
    var $row = createRow(); 
 

 
    // loop through cells 
 
    for(var cellName in json[i]) { 
 
     // create a new cell 
 
     var $cell = $('<td></td>'); 
 
     
 
     var $div; 
 
     var n = i + 1; 
 
     
 
     // fill appropriate input 
 
     switch(cellName) {  
 
     case "date": 
 
      $div = createDate(json[i][cellName], n); 
 
      break; 
 
     case "time": 
 
      $div = createTime(json[i][cellName], n); 
 
      break; 
 
     case "yes/no": 
 
      $div = createCheckboxes(json[i][cellName]); 
 
      break; 
 
     case "notes": 
 
      $div = createText(json[i][cellName], n); 
 
      break; 
 
     default: 
 
      $div = createStatic(json[i][cellName]); 
 
      break; 
 
     } 
 
     
 
     // append the input to the cell 
 
     $cell.append($div); 
 
     
 
     // append the cell to the row 
 
     $row.append($cell); 
 
    } 
 
    
 
    // append the row to the table 
 
    $table.append($row); 
 
    } 
 
} 
 

 
// create date input 
 
function createDate(val, n) { 
 
    var $input = $('<input type="date" name="date" onblur="dateConstruct(' + n + ')">').attr('id', "date" + n).val(val); 
 
    return $('<div></div>') 
 
    .append($input); 
 
} 
 

 
// create time input 
 
function createTime(val, n) { 
 
    var $input = $('<input type="time" name="usr_time" onblur="timeConstruct(' + n + ')">') 
 
    .attr('id', "time" + n) 
 
    .val(val); 
 
    
 
    return $('<div></div>') 
 
    .append($input); 
 
} 
 

 
// create checkbox inputs 
 
function createCheckboxes(val) { 
 
    var yesInput = $('<input class="radioBut" type="checkbox" name="1" value="Yes">'); 
 
    var noInput = $('<input class="radioBut" type="checkbox" name="2" value="No">'); 
 
    
 
    if(val == "Y") { 
 
    yesInput.attr('checked', 'checked'); 
 
    } else { 
 
    noInput.attr('checked', 'checked'); 
 
    } 
 
    
 
    return $('<div></div>') 
 
    .append($('<span>Y </span>')) 
 
    .append(yesInput) 
 
    .append($('<span>/N</span>')) 
 
    .append(noInput); 
 
} 
 

 
// create text input 
 
function createText(val, n) { 
 
    var $input = $('<input type="text" name="notes" onblur="noteConstruct(' + n + ')">') 
 
    .attr('id', "notes" + n) 
 
    .val(val); 
 
    
 
    return $('<div></div>') 
 
    .append($input); 
 
} 
 

 
// create static text 
 
function createStatic(val) { 
 
    var $div = $('<div></div>'); 
 
    $div.text(val); 
 
    return $div; 
 
} 
 

 
function createRow() { 
 
    return $('<tr class="active"></tr>'); 
 
} 
 

 
function createCell(content) { 
 
    return $('<td contenteditable="true"></td>').text(content); 
 
} 
 

 
// dummy functions to remove errors 
 
function dateConstruct(n) { 
 

 
} 
 

 
function timeConstruct(n) { 
 

 
} 
 

 
function noteConstruct(n) { 
 

 
}

table, th, tr, td { 
 
    border: 1px solid #000000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="table" class="table-editable table-responsive table-bordered"> 
 
<span class="table-add glyphicon glyphicon-plus"></span> 
 
<table class="table"> 
 
    <tr class="warning"> 
 
    <th>Day</th> 
 
    <th>Date</th> 
 
    <th>Time</th> 
 
    <th>Yes/No</th> 
 
    <th>Notes</th> 
 
    </tr> 
 
</table> 
 
</div>

Answer 2

// Parse JSON string into object. 
let data = JSON.parse(/* your data variable */); 
let table = /* select your table element's tbody */; 
updateTable(data, table); 


const updateTable = (data, table) => { 
    // Iterate over data array to output new rows. 
    let rows = data.map((entry) => { 
    // Create your element. 
    let thisRow = document.createElement('tr'); 

    // Repeat this next segment for each 'td' element you need 
    // you could loop it with a 'for in', but you can't count on loop order 
    // if you do it that way and would need to separate create and append 
    // actions 
    thisRow.appendChild(createTableCell('day', entry.day)); 
    thisRow.appendChild(createTableCell('date', entry.date)); 
    // etc... 

    return thisRow; 
    }); 

    // Append new rows 
    for (let i = 0; i < rows.length; i++) { 
    table.appendChild(rows[i]); 
    } 
}; 

const createTableCell = (key, value) => { 
    // Create td element 
    let cell = document.createElement('td'); 
    // Create textnode 
    let content = document.createTextNode(value); 
    // Add node to element. 
    cell.appendChild(content); 

    // Other common way to add options. 
    cell.className = key + ' my-awesome-cell-class'; 

    return cell; 
}; 

document.createElement()