Currently, I am working on a JSON/HTML generator project aimed at displaying JSON data along with the associated HTML elements for users once they input the required data into the input fields. Despite identifying the issue, I am struggling to come up with a solution. The problem stems from the fact that when attempting to generate the JSON, the values from the initial level_2_objName set are being stored and transferred to the subsequent set of level_2_objName because the ID name of that specific input is reset to level_2_objName + j. For a closer look at the console output, you can visit this link: https://i.sstatic.net/5WJdL.png. Any thoughts or suggestions on how to rectify this? I believe the fix should be implemented within the for loop inside the parseData() function.
var categoryAmount = document.getElementById('category_amount');
var generateBtn = document.getElementById('generate_btn');
var parseBtn = document.getElementById('parse_btn');
var generatedInputs = document.getElementById('generated_inputs');
var generatedJson = document.getElementById('generated_json');
var parsedContainer = document.getElementById('container_parsed-html');
var totalCategoryAmount = parseInt(categoryAmount.value);
// Arrays and objects created to store JSON data
var AllLevelsArray = [];
var level_1_name_array = [];
// Function to create input elements
function createInputs() {
var listContainer = document.createElement('div');
listContainer.className = 'list_container';
var level_1_label = document.createElement('h3');
level_1_label.textContent = 'Name of level-1 category #' + (i + 1);
var level_1_name = document.createElement('input');
level_1_name.className = 'form-control ' + 'level_1-name' + [i] + ' level_1';
level_1_name.setAttribute('placeholder', 'Level-1 name');
var level_2_list_label = document.createElement('h3');
level_2_list_label.textContent = 'How many level 2 categories for #' + (i + 1);
var level_2_list_amount = document.createElement('input');
level_2_list_amount.className = 'form-control ' + 'level_2_list_amount' + [i] + ' level_2';
level_2_list_amount.setAttribute('placeholder', 'How many level 2 categories?');
level_2_list_amount.setAttribute('id', 'level_2_list_amount' + [i])
var level_2_gen_btn = document.createElement('button');
level_2_gen_btn.className = 'btn btn-default level_2-btn';
level_2_gen_btn.textContent = 'Generate level 2';
listContainer.appendChild(level_1_label);
listContainer.appendChild(level_1_name);
listContainer.appendChild(level_2_list_label);
listContainer.appendChild(level_2_list_amount);
listContainer.appendChild(level_2_gen_btn);
generatedInputs.appendChild(listContainer);
level_1_name_array.push(level_1_name);
level_2_gen_btn.addEventListener('click', function() {
for(i = 0; i < level_2_list_amount.value; i++) {
var level_2_label = document.createElement('h4');
level_2_label.textContent = 'Info for level 2 category #' + (i + 1);
var level_2_name = document.createElement('input');
level_2_name.className = 'form-control';
level_2_name.setAttribute('id', 'level_2_name' + [i]);
level_2_name.setAttribute('placeholder', 'level 2 name');
var level_2_url = document.createElement('input');
level_2_url.className = 'form-control';
level_2_url.setAttribute('id', 'level_2_url' + [i]);
level_2_url.setAttribute('placeholder', 'level 2 url');
// var level_3 = document.createElement('input');
listContainer.appendChild(level_2_label);
listContainer.appendChild(level_2_name);
listContainer.appendChild(level_2_url);
}
this.setAttribute('disabled', 'true');
}, false)
}
function appendInputs() {
totalCategoryAmount = parseInt(categoryAmount.value)
console.log(totalCategoryAmount);
generateBtn.setAttribute('disabled', 'true');
for(i = 0; i < totalCategoryAmount; i++) {
createInputs();
}
}
function parseData() {
for(var i = 0; i < totalCategoryAmount; i++) {
var level_1_object = {};
var level_2_list = [];
var level_2_list_amount = document.getElementById('level_2_list_amount' + i);
console.log(level_2_list_amount.value);
level_1_object['level-1'] = level_1_name_array[i].value;
for(var j = 0; j < level_2_list_amount.value; j++) {
var level_2_objects = {};
var level_2_objName = document.getElementById('level_2_name' + j);
console.log(level_2_objName);
console.log(level_2_objName.value);
level_2_objects['L2-name'] = level_2_objName.value;
level_2_list.push(level_2_objects);
level_1_object['level-2-list'] = level_2_list;
}
AllLevelsArray.push(level_1_object);
}
console.log(AllLevelsArray);
generated_json.textContent = JSON.stringify(AllLevelsArray, null, 4);
}
generateBtn.addEventListener('click', appendInputs, false);
parseBtn.addEventListener('click', parseData, false);<div class="container header">
<div class="row">
<div class="col-xs-12">
<img class="logo" src="img/nav-logo.png">
<h1>Nav Generator</h1>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<h2>How it works</h2>
<ol>
<li>Enter the number of level-1 categories you will need</li>
<li>Enter the number of respective you will need for level-2 and/or level-3 categories</li>
</ol>
</div>
<div class="row">
<div class="col-xs-6 generate_container">
<form class="form-group">
<label>How many Level-1 Categories do you need?</label>
<input type="text" class="form-control" id="category_amount" placeholder="Category Amount">
<button type="button" class="btn btn-default" id="generate_btn">Generate</button>
<button type="button" class="btn btn-primary" id="parse_btn">Parse HTML</button>
</form>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-7" id="generated_inputs">
</div>
<div class="col-xs-5" id="generated_json">
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" id="container_parsed-html">
</div>
</div>
</div>