1
このJSON/HTMLジェネレータを使用しようとすると、対応するすべてのデータを入力フィールドに入力すると、JSONデータと関連するHTML要素が表示されます。私は問題が何であるかは知っていますが、それを修正する方法を理解することはできません。 JSONを生成しようとすると、最初のセットの値がlevel_2_objName に格納され、次のセットのlevel_2_objNameに移動されます。特定の入力のID名がlevel_2_objName + jにリセットされるためです。あなたはコンソールの出力を見ることができます=>
アイデア？私は、修正プログラムが問題がレベル2の入力フィールドの選択であるparseData()配列内の値を上書きする
var categoryAmount \t \t = document.getElementById('category_amount');
var generateBtn \t \t = document.getElementById('generate_btn');
var parseBtn \t \t \t = document.getElementById('parse_btn');
var generatedInputs \t = document.getElementById('generated_inputs');
var generatedJson \t \t = document.getElementById('generated_json');
var parsedContainer \t = document.getElementById('container_parsed-html');
var totalCategoryAmount = parseInt(categoryAmount.value);
// create arrays and objects that will hold the JSON data
var AllLevelsArray = [];
var level_1_name_array = [];
function createInputs() {
\t var listContainer = document.createElement('div');
\t listContainer.className = 'list_container';
\t var level_1_label = document.createElement('h3');
\t level_1_label.textContent = 'Name of level-1 category #' + (i + 1);
\t var level_1_name = document.createElement('input');
\t level_1_name.className = 'form-control ' + 'level_1-name' + [i] + ' level_1';
\t level_1_name.setAttribute('placeholder', 'Level-1 name');
\t var level_2_list_label = document.createElement('h3');
\t level_2_list_label.textContent = 'How many level 2 categories for #' + (i + 1);
\t var level_2_list_amount = document.createElement('input');
\t level_2_list_amount.className = 'form-control ' + 'level_2_list_amount' + [i] + ' level_2';
\t level_2_list_amount.setAttribute('placeholder', 'How many level 2 categories?');
\t level_2_list_amount.setAttribute('id', 'level_2_list_amount' + [i])
\t var level_2_gen_btn = document.createElement('button');
\t level_2_gen_btn.className = 'btn btn-default level_2-btn';
\t level_2_gen_btn.textContent = 'Generate level 2';
\t listContainer.appendChild(level_1_label);
\t listContainer.appendChild(level_1_name);
\t listContainer.appendChild(level_2_list_label);
\t listContainer.appendChild(level_2_list_amount);
\t listContainer.appendChild(level_2_gen_btn);
\t generatedInputs.appendChild(listContainer);
\t level_1_name_array.push(level_1_name);
\t level_2_gen_btn.addEventListener('click', function() {
\t \t for(i = 0; i < level_2_list_amount.value; i++) {
\t \t \t var level_2_label = document.createElement('h4');
\t \t \t level_2_label.textContent = 'Info for level 2 category #' + (i + 1);
\t \t \t var level_2_name = document.createElement('input');
\t \t \t level_2_name.className = 'form-control';
\t \t \t level_2_name.setAttribute('id', 'level_2_name' + [i]);
\t \t \t level_2_name.setAttribute('placeholder', 'level 2 name');
\t \t \t var level_2_url = document.createElement('input');
\t \t \t level_2_url.className = 'form-control';
\t \t \t level_2_url.setAttribute('id', 'level_2_url' + [i]);
\t \t \t level_2_url.setAttribute('placeholder', 'level 2 url');
\t \t \t // save for after we finish storing data for level 2
\t \t \t // var level_3 = document.createElement('input');
\t \t \t
\t \t \t listContainer.appendChild(level_2_label);
\t \t \t listContainer.appendChild(level_2_name);
\t \t \t listContainer.appendChild(level_2_url);
\t \t }
\t \t // this is for each individual level 2 generator button
\t \t this.setAttribute('disabled', 'true');
\t }, false)
}
function appendInputs() {
\t totalCategoryAmount = parseInt(categoryAmount.value)
\t console.log(totalCategoryAmount);
\t generateBtn.setAttribute('disabled', 'true');
\t for(i = 0; i < totalCategoryAmount; i++) {
\t \t createInputs();
\t }
}
function parseData() {
\t for(var i = 0; i < totalCategoryAmount; i++) {
\t \t var level_1_object = {};
\t \t var level_2_list = [];
\t \t
\t \t var level_2_list_amount = document.getElementById('level_2_list_amount' + i);
\t \t console.log(level_2_list_amount.value);
\t \t level_1_object['level-1'] = level_1_name_array[i].value;
\t \t for(var j = 0; j < level_2_list_amount.value; j++) {
\t \t \t var level_2_objects = {};
\t \t \t var level_2_objName = document.getElementById('level_2_name' + j);
\t \t \t console.log(level_2_objName);
\t \t \t console.log(level_2_objName.value);
\t \t \t
\t \t \t level_2_objects['L2-name'] = level_2_objName.value;
\t \t \t level_2_list.push(level_2_objects);
\t \t \t level_1_object['level-2-list'] = level_2_list;
\t \t }
\t \t AllLevelsArray.push(level_1_object);
\t }
\t console.log(AllLevelsArray);
\t
\t generated_json.textContent = JSON.stringify(AllLevelsArray, null, 4);
}
generateBtn.addEventListener('click', appendInputs, false);
parseBtn.addEventListener('click', parseData, false);<div class="container header">
\t \t <div class="row">
\t \t \t <div class="col-xs-12">
\t \t \t \t <img class="logo" src="img/nav-logo.png">
\t \t \t \t <h1>Nav Generator</h1>
\t \t \t </div>
\t \t </div>
\t \t <div class="row">
\t \t \t <div class="col-xs-6">
\t \t \t \t <h2>How it works</h2>
\t \t \t \t <ol>
\t \t \t \t \t <li>Enter the number of level-1 categories you will need</li>
\t \t \t \t \t <li>Enter the number of respective you will need for level-2 and/or level-3 categories</li>
\t \t \t \t </ol>
\t \t \t </div>
\t \t \t <div class="row">
\t \t \t \t <div class="col-xs-6 generate_container">
\t \t \t \t \t <form class="form-group">
\t \t \t \t \t \t <label>How many Level-1 Categories do you need?</label>
\t \t \t \t \t \t <input type="text" class="form-control" id="category_amount" placeholder="Category Amount">
\t \t \t \t \t \t <button type="button" class="btn btn-default" id="generate_btn">Generate</button>
\t \t \t \t \t \t <button type="button" class="btn btn-primary" id="parse_btn">Parse HTML</button>
\t \t \t \t \t </form>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
\t <div class="container-fluid">
\t \t <div class="row">
\t \t \t <div class="col-xs-7" id="generated_inputs">
\t \t \t </div>
\t \t \t <div class="col-xs-5" id="generated_json">
\t \t \t </div>
\t \t </div>
\t </div>
\t <div class="container-fluid">
\t \t <div class="row">
\t \t \t <div class="col-xs-12" id="container_parsed-html">
\t \t \t </div>
\t \t </div>
\t </div>
誰かがこの質問であなたを助けることができるか分かりません。あなたの問題を理解し、データなしでコードに従うことは本当に難しいです。問題をテストして再現できるように、jsfiddleを提供してください。私はあなたのことを理解しているかどうか分からないので、まだあなたの問題を理解していません。 –
もちろんそうです。ここでは、https://jsfiddle.net/vb29zujr/1/のフィドルがあります。「レベル2のURL」入力フィールドの中にデータを置くことは心配しないでください。 –
かなり簡単：すべてのレベル2入力フィールドは0から番号が付けられています。 IDはユニークでなければならない！しかし、番号付きIDは使用しないでください...代わりに名前またはclassNameを使用して配列を使用してください。 –