Reformat arrays

Question

I would like to take the elements from the 3 arrays located in the for loop (there are 11 elements per array)

for(var i= (UIyears - 5); i< UIyears + 6; i++) {
  var anneesListelenght = anneesListe.push(i+ " ans");
  var mensualiteTotaleListelenght = mensualiteTotaleListe.push(monthlyPayment + monthlyPaymentAssurance);
  var coutProjetListelenght = coutProjetListe.push(UIamount + totalPaymentAssurance + totalInterest);
}

and format them as follows:

var data =  [
  { Durée: anneesListe.value1, "Mensualité": mensualiteTotaleListe.value1,  "Coût total du crédit": coutProjetListe.value1},
  { Durée: anneesListe.value2, "Mensualité": mensualiteTotaleListe.value2,  "Coût total du crédit": coutProjetListe.value2},
  { Durée: anneesListe.value3, "Mensualité": mensualiteTotaleListe.value3,  "Coût total du crédit": coutProjetListe.value3},
];

Thank you very much for you reply but I have an error : "Maximum call stack size exceeded"

I am really a newbie...

This is the entire code :

// Listen for submit
document.getElementById("simulateur-form").addEventListener("submit", computeResults);

function computeResults(e) {

    // Récupération des données
    const UIamount = parseInt(document.getElementById("montant-total-projet").value);  
    const UIapport = parseInt(document.getElementById("apport").value);
    const UIinterest = parseFloat(document.getElementById("taux-pret").value);
    const UIinterestassurance = parseFloat(document.getElementById("taux-assurance").value);
    const UIyears = parseInt(document.getElementById("annee").value);


    //Compute monthly Payment
    const x = Math.pow(1 + (parseFloat(UIinterest) / 100 / 12), (parseFloat(UIyears) * 12));
    const monthly = (parseFloat(UIamount-UIapport) * x * (parseFloat(UIinterest) / 100 / 12)) / (x - 1);
    const monthlyPayment = monthly.toFixed(2);

    // Assurance
    const monthlyPaymentAssurance = ((parseFloat(UIinterestassurance) / 100 / 12)*(UIamount - UIapport)).toFixed(2);
    const totalPaymentAssurance = (monthlyPaymentAssurance * (parseFloat(UIyears) * 12)) ;

    // Mensualité totale
    const mensualitetotale = parseFloat(monthlyPaymentAssurance) + parseFloat(monthlyPayment);

    //Intérêts
    const totalInterest = (monthly * (parseFloat(UIyears) * 12) - parseFloat(UIamount-UIapport)).toFixed(2);

    // Cashflow
    const cashflow = (10858 - mensualitetotale);

    // Coût total
    const coutTotal = (parseFloat(UIamount) + parseFloat(totalInterest) + parseFloat(totalPaymentAssurance)).toFixed(2);

    //Formattage des résultats et affichage
    const UIamount1 = (new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(coutTotal)); 
    document.getElementById("UIamount1").innerHTML =  UIamount1;    
    const monthlyPayment1 = (new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyPayment));
    document.getElementById("monthlyPayment1").innerHTML = monthlyPayment1;
    const totalPaymentAssurance1 = (new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(totalPaymentAssurance));
    document.getElementById("totalPaymentAssurance1").innerHTML = totalPaymentAssurance1;
    const mensualitetotale1 = (new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(mensualitetotale));
    document.getElementById("mensualitetotale1").innerHTML = mensualitetotale1;
    const cashflow1 = (new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(cashflow));
    document.getElementById("cashflow1").innerHTML = cashflow1;
    const monthlyPaymentAssurance1 = (new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyPaymentAssurance));
    document.getElementById("monthlyPaymentAssurance1").innerHTML = monthlyPaymentAssurance1;
    const totalInterest1 = (new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(totalInterest));
    document.getElementById("totalInterest1").innerHTML = totalInterest1;


    var anneesListe = new Array(11);
    var mensualitepretListe = new Array(11);
    var mensualiteAssuranceListe = new Array(11);
    var coutTotalAssuranceListe = new Array(11);
    var coutTotalInteretListe = new Array(11);
    var mensualiteTotaleListe = new Array(11);  
    var coutProjetListe = new Array(11); 
    var cashflowListe = new Array(11); 


  var NBmois = (UIyears * 12);
for(var i= (UIyears - 5); i< UIyears + 6; i++)
    {
var anneesListelenght = anneesListe.push(i+ " ans");
var mensualitepretListelenght = mensualitepretListe.push(((UIamount - UIapport) * x * (parseFloat(UIinterest) / 100 / 12)) / (x-1));
var mensualiteAssuranceListelenght = mensualiteAssuranceListe.push((parseFloat(UIinterestassurance) / 100 / 12) * (UIamount - UIapport));
var coutTotalAssuranceListelenght = coutTotalAssuranceListe.push(monthlyPaymentAssurance * NBmois);
var coutTotalInteretListelenght = coutTotalInteretListe.push(monthlyPayment * NBmois - (UIamount - UIapport));
var mensualiteTotaleListelenght = mensualiteTotaleListe.push(monthlyPayment + monthlyPaymentAssurance);
var coutProjetListelenght = coutProjetListe.push(UIamount + totalPaymentAssurance + totalInterest);
var cashflowListelenght = cashflowListe.push(10858 - mensualitetotale);
}







// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("graphsimu", am4charts.XYChart);

chart.numberFormatter.intlLocales = "fr_FR";

// Data for both series
var data =  [
  { Durée: "10 ans", "Mensualité": 5400,  "Coût total du crédit": 49000},
  { Durée: "11 ans", "Mensualité": 5000, "Coût total du crédit": 54000 },
  { Durée: "12 ans", "Mensualité": 4600, "Coût total du crédit": 60000 },
  { Durée: "13 ans", "Mensualité": 4300, "Coût total du crédit": 70000 },
  { Durée: "14 ans", "Mensualité": 4000, "Coût total du crédit": 75000 },
  { Durée: "15 ans", "Mensualité": 3800, "Coût total du crédit": 84000 },
  { Durée: "16 ans", "Mensualité": 3650, "Coût total du crédit": 90000 },
  { Durée: "17 ans", "Mensualité": 3600, "Coût total du crédit": 98000 },
  { Durée: "18 ans", "Mensualité": 3400, "Coût total du crédit": 108000 },
  { Durée: "19 ans", "Mensualité": 3200, "Coût total du crédit": 115000 },
  { Durée: "20 ans", "Mensualité": 3000, "Coût total du crédit": 124000 },
];

/* Create axes */
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "Durée";
categoryAxis.renderer.minGridDistance = 30;


/* Create value axis */
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis2.renderer.opposite = true;
valueAxis2.syncWithAxis = valueAxis;


var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "Durée";
series.dataFields.valueY = "Mensualité";

series.columns.template.tooltipY = 0;
series.columns.template.strokeOpacity = 0;


var lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = "Coût total du crédit";
lineSeries.dataFields.categoryX = "Durée"; 
lineSeries.stroke = am4core.color("#880000");
lineSeries.strokeWidth = 3;
lineSeries.yAxis = valueAxis2;



var bullet = lineSeries.bullets.push(new am4charts.Bullet());

var circle = bullet.createChild(am4core.Circle);
circle.radius = 4;
circle.fill = am4core.color("#880000");
circle.strokeWidth = 3; 
chart.data = data;


/* Add a single HTML-based tooltip to first series */
series.tooltipText = `[bold] {Durée}[/]
----
Mensualité : [bold]{Mensualité} €[/]
Coût total du crédit : [bold]{Coût total du crédit} €[/]`;
series.tooltip.pointerOrientation = "vertical";





// as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set
series.columns.template.adapter.add("fill", function(fill, target) {
  return chart.colors.getIndex(target.dataItem.index);
});

/* Create a cursor */
chart.cursor = new am4charts.XYCursor();





  e.preventDefault();
}

How do I proceed ? Thank you.

Answer 1

Simply use the for loop to push to an array of objects instead, so you don't have to transform them again later:

const arr = [];
for(var i= (UIyears - 5); i< UIyears + 6; i++) {
    const entry = {
        'Durée': i+ ' ans',
        'Mensualité': monthlyPayment + monthlyPaymentAssurance, 
        'Coût total du crédit': UIamount + totalPaymentAssurance + totalInterest,
    };

    arr.push(entry);
}