2 votes

How to use a JSON using a form, without another program or database, just JavaScript?

I've been doing this as an activity, since I'm learning JavaScript.

According to what he says the exercise is this:

The idea is that when you click on the button to Register a Student capture the following data: the code, the name, and the note code. These data have to save them as a student object in a JSON then use it.

Here is the code that I have at the moment (or jsfiddle):

function registro() {

	var infoEstudiante;

	codigoE = String(document.getElementById('codigo').value);
	nombreE = String(document.getElementById('nombre').value);
	notaE = parseFloat(document.getElementById('nota').value);

// prueba de como deberia quedar la informacion
	document.getElementById('codigo1').value = codigoE;
	document.getElementById('nombre1').value = nombreE;
	document.getElementById('nota1').value = notaE;

	 alert("El Estudiante ha sido registrado con exito");

function log(str) {
	var logEl = document.createElement("td");
	logEl.textContent = str;
	logEl.className = "logCSS"; 
	document.getElementById('otraprueba').appendChild(logEl);
	//document.body.appendChild(logEl);  prueba
}

log(codigoE); log(nombreE); log(notaE);

}
<h1>Registro de Estudiante</h1>

Codigo: 
<br><input type="text" id="codigo" value="" /><br>
Nombre: 
<br><input type="text" id="nombre" value="" /><br>
Nota: 
<br><input type="text" id="nota" value="" /><br>
<br>
<button onclick="registro()">Registrar Estudiante</button>
<button onclick="mostrar_promedio()">Mostrar Promedio</button>
<button onclick="mostrar_nota_mayor()">Mostrar Nota Mayor</button>
<button onclick="mostrar_nota_menor()">Mostrar Nota Menor</button>

<h1>Listado de Estudiantes</h1>

<table border="1" id="otraprueba">

	<td>Codigo</td><td>Nombre</td><td>Nota</td>
	<tr></tr>
    <td>
    <input type="text" id="codigo1" value="" disabled="" /></td>
    <td>
    <input type="text" id="nombre1" value="" disabled="" /></td>
    <td>
    <input type="text" id="nota1" value="" disabled="" /></td>
    <tr></tr>
	<td id="codigo12">debajo va child</td><td id="nombre12"></td><td id="nota12"></td>
	<tr></tr>
</table>
<div id="ultimaprueba"></div>

The question: How can I use a JSON using a form, without other program or database, only JavaScript? And I want to use it to get average people who are added by means of alerts and like how do you create a new node that can be divided by 3 sections, because my I get but is it all together?

IMPORTANT NOTE: I do Not know why it does not run the code in where it is, but that is what I have been doing on sublime, and DW, and it works, only use it as a reference for displaying the information.

0voto

OscarGarcia Points 15361

I don't know exactly what you are being asked because it is a little confusing, but here's an example of how to save the data in an array by using the notation of JavaScript (JSON).

At the end of each introduction adds those students whose note is valid (conversion parseFloat() has not returned a NaN) and calculated the grade point average.

I've also fixed the function log() to properly create a new row with a column for each parameter entered.

var estudiantes = [];

function log() {
  var logEl = document.createElement("tr");
  for (var i = 0; i < arguments.length; i++) {
    /* Creamos un nodo de texto HTML con escapado de etiquetas (seguro) */
    var texto = document.createTextNode(arguments[i]);
    var td = document.createElement('td');
    td.appendChild(texto);
    logEl.appendChild(td);
  }
  logEl.className = "logCSS";
  document.getElementById('otraprueba').appendChild(logEl);
}

function registro() {
  var codigoE = document.getElementById('codigo').value;
  var nombreE = document.getElementById('nombre').value;
  var notaE = parseFloat(document.getElementById('nota').value);

// prueba de como deberia quedar la informacion
  document.getElementById('codigo1').value = codigoE;
  document.getElementById('nombre1').value = nombreE;
  document.getElementById('nota1').value = notaE;
  /*alert("El Estudiante ha sido registrado con exito");*/
  log(codigoE, nombreE, notaE);
  /* Te separo la notaciĆ³n JSON para destacarla */
  estudiantes.push(
    {
      'codigo':codigoE,
      'nombre':nombreE,
      'nota':notaE
    }
  );
  console.log(estudiantes);
  var suma = 0;
  var numero = 0;
  for (var i in estudiantes) {
    if (!isNaN(estudiantes[i].nota)) {
      numero++;
      suma += estudiantes[i].nota;
    }
  }
  if (numero > 0) {
    alert("Nota media: " + (suma / numero));
  }
}
<h1>Registro de Estudiante</h1>

Codigo: 
<br><input type="text" id="codigo" value="" /><br>
Nombre: 
<br><input type="text" id="nombre" value="" /><br>
Nota: 
<br><input type="text" id="nota" value="" /><br>
<br>
<button onclick="registro()">Registrar Estudiante</button>
<button onclick="mostrar_promedio()">Mostrar Promedio</button>
<button onclick="mostrar_nota_mayor()">Mostrar Nota Mayor</button>
<button onclick="mostrar_nota_menor()">Mostrar Nota Menor</button>

<h1>Listado de Estudiantes</h1>

<table border="1" id="otraprueba">

	<td>Codigo</td><td>Nombre</td><td>Nota</td>
	<tr></tr>
    <td>
    <input type="text" id="codigo1" value="" disabled="" /></td>
    <td>
    <input type="text" id="nombre1" value="" disabled="" /></td>
    <td>
    <input type="text" id="nota1" value="" disabled="" /></td>
    <tr></tr>
	<td id="codigo12">debajo va child</td><td id="nombre12"></td><td id="nota12"></td>
	<tr></tr>
</table>
<div id="ultimaprueba"></div>

0voto

Mateo Guzmán Points 268

Capture the data and save it in a json , then go through the json and create a tr with its td depending on the data the json has, look at the example

 function registro() {

var infoEstudiante = {};

codigoE = String(document.getElementById('codigo').value);
nombreE = String(document.getElementById('nombre').value);
notaE = parseFloat(document.getElementById('nota').value);

infoEstudiante['codigo'] = codigoE;
infoEstudiante['nombre'] = nombreE;
infoEstudiante['nota']   = notaE;

function log(info) {
var logEl = document.createElement("tr");

    for (var i = 0; i < info.length; i++) {
        logEl.createElement("td");
        logEl.getElementsByTagName('td')[i].textContent = info[i];
    };
    logEl.className = "logCSS"; 
    document.getElementById('otraprueba').appendChild(logEl);

    }
}

log(infoEstudiante)
 

I hope it serves you, regards.

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X