Solved

Javascript: correctly display arrays data in the same row

Posted on 2013-10-26
4
359 Views
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
                console.log(decoder.items);

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

                    /* COMMENTED SINCE THE DATA IS NOT YET OK
                $('#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>');

        $('#autocomplete_debitori').trigger('create');
        $('#autocomplete_debitori').listview('refresh');
*/

                    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.
0
Comment
Question by:ltpitt
  • 2
  • 2
4 Comments
 
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!
0
 
LVL 1

Author Comment

by:ltpitt
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 :)
0
 
LVL 43

Accepted Solution

by:
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

0
 
LVL 1

Author Closing Comment

by:ltpitt
ID: 39604263
Perfect, brilliant, well commented.

Anything else?

Thanks.
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

770 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