3
Hello, I created a simple page where the user can define some fields. I need to implement the following function: When you click the 'Create' button, the application should generate a JSON file with all the fields that have been created. As I know almost nothing of JSON wanted a help to know if it is possible to do this and if possible an orientation of how to do.
$(document).ready(function(){
var num = 0
$('#FieldCount').on('change', function() {
$('#Home').empty()
num = $(this).val()
$("#Home").append(`
<br>
<br>
<div class="row changer" style="">
<div class ='col-xs-3'>
<label>Tipo</label>
</div>
<div class ='col-xs-3'>
<label>Nome</label>
</div>
<div class ='col-xs-6'>
<label>Campo</label>
</div>
</div>
`)
for (var x = 0; x < num; x++) {
$(`
<div class="row" >
<label id="Count" >${x+1}</label>
<div class="col-xs-3">
<select name="${x}" class='fieldtype' style='border: none; outline: none; height: 20px;width: 100%;'>
<option>Input</option>
<option>Combo Box</option>
</select>
</div>
<div class="col-xs-3">
<input class="${x} in" type="text" value="Campo" style="border-radius: 3px; background-color: grey; border: none; outline: none;/>
</div>
<div class="col-xs-2" class="OpCom${x}">
<select style="display: none;border: none; height: 25px; border-radius: 3px;" name=${x} class="OpCom">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<div class='morein' name=${x}>
</div>
</div>
</div>
`).appendTo('#Home')
}
$('.fieldtype').on('change', function() {
temp_index = $(this).attr('name')
if($(this).val() == 'Input') {
console.log('input')
$(`.${temp_index}`).addClass('in')
$(`.OpCom[name=${temp_index}]`).removeClass('Ready')
$(`.OpCom[name=${temp_index}]`).css('background-color', 'rgba(0,0,0,0)')
$(`.OpCom[name=${temp_index}]`).css('color', 'rgba(0,0,0,0)')
$(`.OpCom${temp_index}`).hide()
$(`.morein[name=${temp_index}]`).hide()
} else {
$(`.OpCom[name=${temp_index}]`).css('background-color', 'buttonface')
$(`.OpCom[name=${temp_index}]`).css('color', 'black')
$(`.OpCom${temp_index}`).append(`
<select style="border: none; height: 25px; border-radius: 3px;" name=${temp_index} class="OpCom">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
`)
console.log('combo')
$(`.${temp_index}`).removeClass('in')
$(`.${temp_index}`).addClass('on')
console.log($(`.${temp_index}`).val())
$(`.OpCom[name=${temp_index}]`).addClass('Ready')
$(`.morein[name=${temp_index}]`).show()
$(`.OpCom${temp_index}`).append(`
<select style="border: none; height: 25px; border-radius: 3px;" name=${temp_index} class="OpCom">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
`)
}
var a = $(this).attr('name')
$(`.OpCom[name=${a}]`).show()
$(`.OpCom[name=${a}]`).change(function() {
$(`.morein[name=${a}]`).empty()
for (var z = 0; z < $(`.OpCom[name=${a}]`).val(); z++) {
$(`.morein[name=${a}]`).append(`<input name='${a}i' type=text value="item" style="border: none; border-bottom: 1px solid black; broder-radius: 3px; background-color: grey;" />`)
}
})
})
})
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body style="background-color: #cccccc;">
<div style="text-align: center;"class="container-fluid">
<h2 style="text-align: center;">Gerador de App</h2>
<h4 style="text-align: center;">Quantos campos deseja criar?</h4>
<select id="FieldCount" style="width: 100px; border: none; width: 150px;height: 30px; border-radius: 3px; outline: none;">
<option name="one">1</option>
<option name="one">2</option>
<option name="one">3</option>
<option name="one">4</option>
<option name="one">5</option>
<option name="one">6</option>
<option name="one">7</option>
<option name="one">8</option>
<option name="one">9</option>
<option name="one">10</option>
</select>
<div id="Home">
</div>
<a href=""><button id="Create" style=" margin-top: 100px;bottom: 0; border: none; font-size: 25px; border-radius: 3px;">Criar</button></a>
</div>
</body>
</html>
From an array object only use JSON.parse(variableArray);
– Rodrigo Bezerra Rodrigues