Javascript: correctly display arrays data in the same row

Posted on 2013-10-26
Last Modified: 2013-10-27
I have two arrays that look like this:

var payments = {"items":[{"id_decoder":"1","mesi_pagati":"2"},{"id_decoder":"2","mesi_pagati":"1"}]}

var decoders = {"items":[{"id_decoder":"1","decoder":"decoder1","id_cliente":"1","username":"decoder1","password":"decoder1","note":"decoder1"},{"id_decoder":"2","decoder":"decoder2","id_cliente":"2","username":"decoder2","password":"decoder2","note":"decoder2"},{"id_decoder":"3","decoder":"decoder3","id_cliente":"3","username":"decoder3","password":"decoder3","note":"decoder3"},{"id_decoder":"4","decoder":"decoder4","id_cliente":"4","username":"decoder4","password":"decoder4","note":"decoder4"},{"id_decoder":"5","decoder":"decoder5","id_cliente":"5","username":"decoder5","password":"decoder5","note":"decoder5"},{"id_decoder":"6","decoder":"decoder6","id_cliente":"5","username":"decoder6","password":"decoder6","note":"decoder6"}]}

Open in new window

They are results coming from my database.
The 1st one is from payments table and the second one is from decoders table.

I want to write a row with all the following information in it:

all data coming from decoders and the total months that were not paid.

For this I can simply display in the right <span> the current month number (debts are calculated on a yearly base). If the id_decoder has payments then I want to subtract the payment number from the span number.

I've tried various approaches but I am not able to obtain the result I want.

The thing that came closer is:

function caricaUtentiGestioneUtenti() {
    var decoder;
    var pagamenti;

    $.getJSON(serviceURL + 'getdecoder.php', function (dati_decoder) {
        decoder = dati_decoder
        $.getJSON(serviceURL + 'getpagamenti.php', function (dati_pagamenti) {
            pagamenti = dati_pagamenti

            $.each(decoder, function (i, item) { // For each client

                item.pays = [];
                $.each(pagamenti, function (i, pay) { // Check each payment

                $('#autocomplete_debitori').append('<li><a href="#popupPagamento" data-rel="popup" data-position-to="window" data-transition="flip">' +
                                '<p class="username">Username: <strong>'+ gruppi.username  +'</strong></p>'+
                                '<p class="password">Password: <strong>'+ gruppi.password  +'</strong></p>'+
                                '<p class="nome" id="'+ gruppi.nome  +'">Nome: <strong>'+ gruppi.nome  +'</strong></p>'+
                                '<p class="cognome" id="'+ gruppi.cognome  +'">Cognome: <strong>'+ gruppi.cognome  +'</strong></p>'+
                                '<p class="id_decoder" id="'+ gruppi.id_decoder +'">Decoder: <strong>'+ gruppi.nome_decoder  +'</strong></p>'+
                                '<p class="nome_gruppo">Gruppo: <strong>'+ gruppi.nome_gruppo  +'</strong></p>'+
                                '<p class="note">Note: <strong>'+ gruppi.note +'</strong></p>'+
                                '<span class="ui-li-count ui-li-count-f">'+ gruppi.MesiNonPagati +'</span>'+
                               '<a href="modifica_cliente.html"></a></a></li>');


                    if (item.id_decoder == pay.id_decoder) { // If matching ID
                        item.pays.push(pay); // Add it to this client



Open in new window

I'd appreciate hints and suggestions about how to do this properly (maybe I should just study better queries or enhance my for and while skills?): I am learning to program and every suggestion is very very welcome.

Thanks a lot to everyone for your time and patience.
Question by:ltpitt
  • 2
  • 2
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39602761
Going to need some more explanation here. You talk about total months, yearly payments, month numbers etc, but your data doesn't resemble that. Your decode array contains items in this format:

"id_decoder": "1",
"decoder": "decoder1",
"id_cliente": "1",
"username": "decoder1",
"password": "decoder1",
"note": "decoder1"

and your payments array contains items in this format:

"id_decoder": "2",
"mesi_pagati": "1"

I don't see anything about months, years or payments!

Author Comment

ID: 39602862
I am sorry (my head is a mess after fighting with it for hours).

In the array coming from payments query you find id_decoder and number of total paid months :)
LVL 43

Accepted Solution

Chris Stanyon earned 500 total points
ID: 39603057
Still not entirely sure how your data relates to each other (is it one-to-one?), but have a look at this. Load it into a page, read the comments and then examine the console:

var newDecoders = new Object;
var newPayments = new Object;		

$.getJSON('decoders.json', function (decoders) {
	$.getJSON('payments.json', function (payments) {
		//we now have both files
		//loop through the 'items' in payments
		$(payments.items).each(function(i,e) {
			//add the payment info to the newPayments object, keyed on id_decoder
			newPayments[e.id_decoder] = e;
		//loop through the 'items' in decoders
		$(decoders.items).each(function(i,e) {
			//add the payment info to the newDecoders object, keyed on id_decoder
			newDecoders[e.id_decoder] = e;
		//now loop through the newDecoders 
		$.each(newDecoders, function(key, e) {
			//and check if the key exists in newPayments
			if (key in newPayments) {
				//if it does, log some info
				console.log(e.decoder + " has some payment info. Months Paid: " + newPayments[key].mesi_pagati);
			} else {
				//and if it doesn't, let the console know 
				console.log(e.decoder + " has no payment info");

Open in new window


Author Closing Comment

ID: 39604263
Perfect, brilliant, well commented.

Anything else?


Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question