We Keep Coding

How to print data from an object and error [object Object] does not appear?

I have this program that as soon as it starts up, it asks you to enter the number of books that you want to register in the program and the number of authors that each book will have.
The program will ask you to register a name for each author, surname, age and nationality.
Once this is done, there is a button that shows all the books registered with their authors and the data of the books, and I have the problem that I am not able to show the data of the authors since only [object Object] appears.
Edit:
I have managed to print the element.autores by console.log, without the error obejct object appearing but I am not able to get it out through a document.write or something similar, here I leave a screenshot of how it should appear:
And if I try to put elements.autores.nombre to print only the name, it appears undefined both in the console.log and in the document.write
Here my code:
javascript:
var biblioteca = new Array();
function libro(titulo, autores, anyo, editorial) {
this.titulo = titulo;
this.autores = autores;
this.anyo = anyo;
this.editorial = editorial;
}
function autor(nombre, apellidos, edad, nacionalidad) {
this.nombre = nombre;
this.aepellidos = apellidos;
this.edad = edad;
this.nacionalidad = nacionalidad;
}
window.onload = function () {
document.getElementById("mostrar").onclick = Mostrar;
document.getElementById("insertar").onclick = insertarlibro;
document.getElementById("insertar").onclick = insertarautor;
}
function insertarlibro() {
var autores = new Array();
var titulo = prompt("Insertar el nombre del titulo del libro");
var anyo = parseInt(prompt("Año"));
var editorial = prompt("Inserta su editorial");
var numautores = parseInt(prompt("Cuantos autores vas a insertar"));
for (let i = 0; i < numautores; i++) {
let autor = insertarautor();
autores.push(autor);
}
var registrohecho = new libro(titulo, autores, anyo, editorial);
return registrohecho;
}
console.log(insertarlibro);
function insertarautor() {
var nombre = prompt("Insertar el nombre del autor").toUpperCase();
var apellidos = prompt("Insertar el apellidos del autor").toUpperCase();
var edad = parseInt(prompt("Edad"));
var nacionalidad = prompt("¿De que pais es el autor?");
var registrohecho = new autor(nombre, apellidos, edad, nacionalidad);
return registrohecho;
}
console.log(insertarautor);
var numlibros = parseInt(prompt("Cuantos libros vas a insertar"));
for (let i = 0; i < numlibros; i++) {
var insertalibro = insertarlibro();
biblioteca.push(insertalibro);
}
function Mostrar() {
biblioteca.forEach(element => {
console.log("Error" + JSON.stringify(element.autores));
var muestra = "Nombre del libro:" + element.titulo + " autores: " + element.autores + " Año en el que se publico: " + element.anyo + " Editorial: " + element.editorial;
document.write(muestra);
});
}
And the html part:
<div id="insertar">
<input type="button" value="Insertar">
</div>
<div id="mostrar">
<input type="button" value="Mostrar">
</div>

You are trying to get element.autores, which is an array. To get e.g. get the nombre, you wold have to acces it with element.autores[0].nombre.
So your code to output all books (with authors) would be something like this:
biblioteca.forEach(element => {
var muestra = "Nombre del libro:" + element.titulo + " autores: ";
element.autores.forEach(author => {
muestra += `nombre: ${author.nombre}, aepellidos: ${author.aepellidos}, edad: ${author.edad}, nacionalidad: ${author.nacionalidad} `;
})
muestra += "Año en el que se publico: " + element.anyo + " Editorial: " + element.editorial;
document.write(muestra);
});

creating a class to be able to reduce my code and reuse it

I am a javascript student so there are things that are still not entirely clear in my head. I want to rearrange my code to make it reusable by passing it certain parameters
At this moment I have built this credit simulator, in a much longer code, it occurred to me to build a class, with that class to be able to feed the data it requires and return the values that I need to be shown on the screen.
The first method "creacionClientes" builds the profile of the credit applicant and saves it in an array, what I need is that the second method which returns a value of the fee that the person must pay, is added in the client's profile requesting the credit. Likewise, I can't find a way for the "calcularCuotas" method to feed on the information that the client variable receives, I'm very stuck and I'm drowning in a glass of water thks!
const datosTabla = document.querySelector("#tftable,tbody"); const tasas = cambiarValorTasas() let planesVisible = false;
class Clientes {
constructor (){
this.clients = []
}
creacionClientes(nombre, apellido, email, monto, plazo, tasas){
this.clients.push({
id: Date.now(),
nombre: nombre,
apellido: apellido,
email: email,
monto: monto,
plazo: plazo,
tasas: tasas,
});
}
calcularCuotas(monto, tasas, plazos){
let hoy = new Date()
let pagoMensual = 0;
let pagoAmortizacion = 0;
let pagosIntereses = 0;
pagoMensual = monto * (Math.pow(1+tasas/100, plazos)*tasas/100)/(Math.pow(1+tasas/100, plazos)-1);
while (datosTabla.firstChild){
datosTabla.removeChild(datosTabla.firstChild);
}
//creacion de fechas sucesivas
function formatoFecha(fecha) {
fecha = new Date(fecha);
var dia = fecha.getDate();
var mesIndex = fecha.getMonth()+1;
var año = fecha.getFullYear();
return dia + "/" + mesIndex + "/" + año;
}
for(let i = 1; i <= plazos; i++) {
pagosIntereses = parseFloat(monto*(tasas/100));
pagoAmortizacion = parseFloat(pagoMensual - pagosIntereses);
monto = parseFloat(monto-pagoAmortizacion);
var fechaX = hoy.setMonth(hoy.getMonth() + 1);
//creacion de las filas
$("#tablaPrestamos").append(`<tr><td>${formatoFecha(fechaX)}
<td class="valorCuota">${pagoMensual.toFixed(2)}</td>
<td>${pagoAmortizacion.toFixed(2)}</td>
<td>${pagosIntereses.toFixed(2)}</td>
<td>${monto.toFixed(2)}</td>`);
}
} }
function cambiarValorTasas (){
let plazosOpc = $("#menuPlazos").prop('selectedIndex');
let opciones = $("#menuPlazos").prop('options');
if (opciones[plazosOpc].value == 12){
$('#tasasSeleccion').html(3.95);
} else if (opciones[plazosOpc].value == 24){
$('#tasasSeleccion').html(4.19);
} else if (opciones[plazosOpc].value == 36){
$('#tasasSeleccion').html(4.36);;
}
return $('#tasasSeleccion').val(); } $(document).on('change', cambiarValorTasas);
function mostrarTabla(nombre, visibilidad ){
let mostrar = document.getElementById(nombre);
if (visibilidad == false){
if(mostrar.classList.contains("noMostrar")){
mostrar.classList.remove("noMostrar")
}
mostrar.className += " mostrar"
} else {
if(mostrar.classList.contains("mostrar")){
mostrar.classList.remove("mostrar")
}
mostrar.className += " noMostrar"
} } $('#botonCalc').on('click', (e) =>{
e.preventDefault();
mostrarTabla('tasasSeleccion', planesVisible);
mostrarTabla('tasasLabel', planesVisible);
mostrarTabla('botonEnviar', planesVisible);
mostrarTabla('tablaPrestamos', planesVisible);
planesVisible = !planesVisible;
})
$('#botonEnviar').on("click", (e) =>{
e.preventDefault();
let cliente = new Clientes();
cliente.creacionClientes($('#nombre').val(), $('#apellido').val(), $('#mail').val(), parseInt($('#aSolicitar').val()), parseInt($('#menuPlazos').val()), parseFloat(tasas))
console.log(cliente)
cliente.calcularCuotas(parseInt($('#aSolicitar').val()), tasas, parseInt($('#menuPlazos').val())) })

The problem is that you are saving the list of clients inside the client
I would try this:
Get the list of clients outside every client
Create the client on the constructor (instead of creacionClientes)
Add it to the clients list before creating the client
NOW you can use this inside calcularCuotas where the client information is stored (e.g. this.nombre)
It could be something like that
const datosTabla = document.querySelector("#tftable,tbody"); const tasas = cambiarValorTasas() let planesVisible = false;
const clientes = []
class Clientes {
constructor (nombre, apellido, email, monto, plazo, tasas){
this = {
id: Date.now(),
nombre: nombre,
apellido: apellido,
email: email,
monto: monto,
plazo: plazo,
tasas: tasas,
}
clients.push(this);
}
calcularCuotas(monto, tasas, plazos){
let hoy = new Date()
let pagoMensual = 0;
let pagoAmortizacion = 0;
let pagosIntereses = 0;
pagoMensual = monto * (Math.pow(1+tasas/100, plazos)*tasas/100)/(Math.pow(1+tasas/100, plazos)-1);
while (datosTabla.firstChild){
datosTabla.removeChild(datosTabla.firstChild);
}
//creacion de fechas sucesivas
function formatoFecha(fecha) {
fecha = new Date(fecha);
var dia = fecha.getDate();
var mesIndex = fecha.getMonth()+1;
var año = fecha.getFullYear();
return dia + "/" + mesIndex + "/" + año;
}
for(let i = 1; i <= plazos; i++) {
pagosIntereses = parseFloat(monto*(tasas/100));
pagoAmortizacion = parseFloat(pagoMensual - pagosIntereses);
monto = parseFloat(monto-pagoAmortizacion);
var fechaX = hoy.setMonth(hoy.getMonth() + 1);
//creacion de las filas
$("#tablaPrestamos").append(`<tr><td>${formatoFecha(fechaX)}
<td class="valorCuota">${pagoMensual.toFixed(2)}</td>
<td>${pagoAmortizacion.toFixed(2)}</td>
<td>${pagosIntereses.toFixed(2)}</td>
<td>${monto.toFixed(2)}</td>`);
}
} }
function cambiarValorTasas (){
let plazosOpc = $("#menuPlazos").prop('selectedIndex');
let opciones = $("#menuPlazos").prop('options');
if (opciones[plazosOpc].value == 12){
$('#tasasSeleccion').html(3.95);
} else if (opciones[plazosOpc].value == 24){
$('#tasasSeleccion').html(4.19);
} else if (opciones[plazosOpc].value == 36){
$('#tasasSeleccion').html(4.36);;
}
return $('#tasasSeleccion').val(); } $(document).on('change', cambiarValorTasas);
function mostrarTabla(nombre, visibilidad ){
let mostrar = document.getElementById(nombre);
if (visibilidad == false){
if(mostrar.classList.contains("noMostrar")){
mostrar.classList.remove("noMostrar")
}
mostrar.className += " mostrar"
} else {
if(mostrar.classList.contains("mostrar")){
mostrar.classList.remove("mostrar")
}
mostrar.className += " noMostrar"
} } $('#botonCalc').on('click', (e) =>{
e.preventDefault();
mostrarTabla('tasasSeleccion', planesVisible);
mostrarTabla('tasasLabel', planesVisible);
mostrarTabla('botonEnviar', planesVisible);
mostrarTabla('tablaPrestamos', planesVisible);
planesVisible = !planesVisible;
})
$('#botonEnviar').on("click", (e) =>{
e.preventDefault();
let cliente = new Clientes($('#nombre').val(), $('#apellido').val(), $('#mail').val(), parseInt($('#aSolicitar').val()), parseInt($('#menuPlazos').val()), parseFloat(tasas))
console.log(cliente)
clientes.push(cliente)
cliente.calcularCuotas(parseInt($('#aSolicitar').val()), tasas, parseInt($('#menuPlazos').val())) })

my update of the prototype "string" cannot be printed to with log

I dont get how I can remove a list of words from a string using this type of formalism:
string.my_function(parameter[])
text_val = "je vous appel concernant le truc rouge"
String.prototype.clean_string = function (stop_words) {
for (i = 0; i < stop_words.length; i++)
{
this.split(stop_words[i]).join('');
}
};
console.log(text_val.clean_string(['concernant','le']));
I have un undefined as a result and I don't get why.
I expect the result:
"je vous appel truc rouge"

I would use filter to strip the stop_words and then join the result:
text_val = "je vous appel concernant le truc rouge";
String.prototype.clean_string = function (stop_words) {
let splitted = this.split(' ');
for (i = 0; i < stop_words.length; i++) {
splitted = splitted.filter(w => w != stop_words[i]);
}
return splitted.join(' ');
};
console.log(text_val.clean_string(['concernant','le']));

JQuery function doesnt work after an other does

this code is from a cart of a music store I have made. The problem is that I need to check if the quantity I choose in the cart is in available in the stock. It works but if the user changes the quantity in the input number, the button pagar(pay) doesnt work. If I reaload the page it works but I need to do it without reload. The code:
$("#pagar").click(function() {
var tt_precio = $("#t_compra").text();
//solo cojo el precio tt y le quito el €;
var tt_precio = tt_precio.split(" ")[4];
var tt_precio = tt_precio.slice(0, -1);
var precios = [];
var fecha = new Date();
var date =
fecha.getFullYear() +
"/" +
Number(fecha.getMonth() + 1) +
"/" +
fecha.getDate();
$("[id*=precios]").each(function() {
var p = $(this)
.text()
.slice(0, -1);
precios.push(p);
});
var cantidades = [];
$("[type = number]").each(function() {
cantidades.push(Number($(this).val()));
});
var referencias = [];
$("[id*=referencias]").each(function() {
referencias.push($(this).text());
});
var nombres = [];
$("[id*=nombres]").each(function() {
nombres.push($(this).text());
});
var datos = {
precios: JSON.stringify(precios),
cantidades: JSON.stringify(cantidades),
referencias: JSON.stringify(referencias),
nombres: JSON.stringify(nombres),
tt_precio: tt_precio,
fecha: date
};
$.ajax({
type: "post",
data: datos,
url: "compra.php",
success: function(vuelta) {
alert(vuelta);
window.location.href = "/AccesoDatos/index.php";
}
});
});
$("seguir")
//cambiar precios
$("input").change(function() {
var valor = $(this).val();
var id = $(this).attr("id");
//para eliminar el simbolo del €
var precio = $("#precios" + id)
.text()
.slice(0, -1);
var datos = {
cantidad: valor,
referencia: id,
precio: precio
};
$.ajax({
type: "post",
data: datos,
url: "modificarCantidades.php",
success: function(datos) {
if (datos == -1) {
$("#span" + id).html("No hay suficientes unidades");
} else {
if (datos == 0) {
$("#fila" + id).remove();
$("#t_compra").html("0€");
$("#precio").html("0");
} else {
$("#span" + id).html("");
var precio = $("#precios" + id)
.text()
.slice(0, -1);
var cantidad = datos;
var total = precio * cantidad;
$("#total" + id).text(total + "€");
//alert(total);
var total_precio = 0;
var total_Cantidad = 0;
// coge todos los elementos que contienen en el id la palabra total y suma su valor
$("[id*=total]").each(function() {
var p = Number(
$(this)
.text()
.slice(0, -1)
);
total_precio += p;
});
//coge los inputs number para sumarlos
$("[type = number]").each(function() {
var c = Number($(this).val());
total_Cantidad += c;
});
//meto los valores nuevos en su sitio; --> en ajax hay que modificar el array de sesiones.
$("#unidades").html(total_Cantidad);
$("#precio").html(total_precio);
$("#t_productos").html(
"<strong>Total productos:</strong>" + total_Cantidad + "UDS"
);
$("#t_compra").html(
"<strong>Total de la compra:</strong>" + total_precio + "€"
);
}
}
}
});
});
It work clicking a button the first one and changing some input type="number", the problem is that if I use the onChange function, then I need to pay the updated cart but it is not posible because the button pay function doesn't work, I dont know why, I've tested whit an alert() at the top of the function, just below the call and it works but doesnt happend from there.

Change the below function:
$("input").change(function() {
For input field types change trigger function should not be used, try changing it with keyup function with 5 sec delay.
That might can help you out.
I have done something similar to this while you can use after doing some changes into it according to your need:-
//setup before functions
var typingTimer; //timer identifier
var doneTypingInterval = 2000; //time in ms, 5 second for example
var $input = $('#user_name');
//on keyup, start the countdown
$input.on('keyup', function () {
clearTimeout(typingTimer);
typingTimer = setTimeout(doneTyping, doneTypingInterval);
});
//on keydown, clear the countdown
$input.on('keydown', function () {
clearTimeout(typingTimer);
});

I've solved it, the problem was that the variable tt_precio was not set, when I click the button it does nothing because I dont update that value

Javascript error: Unexpected string in Parse cloud code

I'm trying to get info from an httpresponse, parse de JSON and create a new dictionary with an array of dictionaries like :
"data" : {"infracciones": [
{
"folio": "03041487403",
"fecha": "2014-03-16",
"situacion": "Pagada",
"motivo": "POR NO RESPETAR LOS LIMITES DE VELOCIDAD",
},
{
"folio": "0334357403",
"fecha": "2015-04-11",
"situacion": "Pagada",
"motivo": "POR NO RESPETAR LOS LIMITES DE VELOCIDAD",
}],
"tenencia":[ ...]
}
but I'm getting en error : "Unexpected string in main.js:35" but I don't have a clue of what's happening, thanks for your help, here's the code:
Parse.Cloud.httpRequest({
url: url1 ,
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
}).then(function(httpResponse) {
var json = JSON.parse(httpResponse.data);
var datos = json.infracciones;
var infracciones = [];
var data = {};
var i = 0;
for(i = 0; i < datos.length ; i++){
infracciones[i].["folio"] = datos.folio ; // THIS IS LINE 35
infracciones[i].["fecha"] = datos.fecha ;
infracciones[i].["situacion"] = datos.situacion ;
infracciones[i].["motivo"] = datos.motivo ;
}
data.push({
key : "infracciones",
value : infracciones
});
response.success(data);
console.log(httpResponse.text);
}, function(httpResponse) {
console.error('Request failed with response code ' + httpResponse.status);
});

Try this way
var infracciones = [];
var data = [];
var i = 0;
for(i = 0; i < datos.length ; i++){
infracciones[i] = {};
infracciones[i].folio = datos.folio ;
infracciones[i].fecha = datos.fecha ;
infracciones[i].situacion = datos.situacion ;
infracciones[i].motivo = datos.motivo ;
}
data.push({
key : "infracciones",
value : infracciones
});