[jQuery] Multiple JSON objects - using the parsing results from one JSON object within another $.getJSON $.each() parse of another JSON object

[tatlar]

Hi All,

I have a JSON object (called 'dataloggers') that I am retrieving via
$.getJSON, and then creating a <table> dynamically with the results .
I can parse it just fine with $.each().

The structure looks like this:

{
    "dataloggers": {
        "TA_124A": {
            "values": {
                "one": "wake",
                "two": "up",
                "three": "time",
                "four": "to",
                "five": "die"
            }
        },
        "TA_109C": {
            "values": {
                "one": "this",
                "two": "is",
                "three": "not",
                "four": "a",
                "five": "test"
            }
        }
    }
}

Here is the code I have for processing the 'dataloggers' JSON object:

$.getJSON("path/to/dataloggers.js", function(dlmon) {
    $.each(dlmon.dataloggers, function(dlname,arr){
        var tBodyRow = "<tr>";
        tBodyRow += '<td>'+dlname+'</td>' ;
        $.each(arr.values, function(vKey,vVal){
            tBodyRow += '<td>'+vKey+': '+vVal+'</td>' ;
        });
        tBodyRow += "</tr>" ;
        $("table#dataloggers tbody").append(tBodyRow);
    });
});

This outputs a table:

<table id="dataloggers">
    <thead></thead>
    <tfoot></tfoot>
    <tbody>
        <tr>
            <td>TA_124A</td>
            <td>one: wake</td>
            <td>two: up</td>
            <td>three: time</td>
            <td>four: to</td>
            <td>five: die</td>
        </tr>
        <tr>
            <td>TA_109C</td>
            <td>one: this</td>
            <td>two: is</td>
            <td>three: not</td>
            <td>four: a</td>
            <td>five: test</td>
        </tr>
    </tbody>
</table>

I have another JSON object (called 'stations') that I am retrieving
via $.getJSON(), that has the following structure:

{
    "stations":{
        "124A":{
            "commtype":"slink2orb",
            "provider":"orb",
            "snet": "TA"
        },
        "109C":{
            "commtype": "vsat",
            "provider": "Verizon",
            "snet": "TA"
        }
    }
}

What I need to do is process the 'stations' JSON object and add the
values returned to the processing of the 'dataloggers' object with the
$.each() function, so that the HTML <table> output now looks like
this:

<table id="dataloggers">
    <thead></thead>
    <tfoot></tfoot>
    <tbody>
        <tr>
            <td>TA_124A</td>
            <td>one: wake</td>
            <td>two: up</td>
            <td>three: time</td>
            <td>four: to</td>
            <td>five: die</td>
            <td>commtype: slink2orb</td>
            <td>provider: orb</td>
        </tr>
        <tr>
            <td>TA_109C</td>
            <td>one: this</td>
            <td>two: is</td>
            <td>three: not</td>
            <td>four: a</td>
            <td>five: test</td>
            <td>commtype: vsat</td>
            <td>provider: Verizon</td>
        </tr>
    </tbody>
</table>

You will notice that the 'stations' object has a key-val pair of
"snet":"TA", which makes it easy for me to match the 'dataloggers' key
by just concatenating the 'stations' key with the 'snet' value. So
what I *think* I need to do is process the 'stations' JSON object
first, and create a new jQuery object on the fly with all the values I
need, which I then pass into the $.each() processing of the
'dataloggers' object. I tried to do this:

$.getJSON("path/to/stations.js", function(stalist) {
    var myStations = {} ;
    $.each(stalist.stations, function(staname,stavalues){
        var myStaTitle = stavalues.snet+"_"+staname ;
        var myStaVals = { "commtype": stavalues.commtype, "provider":
stavalues.provider } ;
        var staObj.push(myStaTitle) = myStaVals ; // could be very
wrong to use the push() array method??
    });
    return myStations ;
});

I would have thought that I could then pass this newly created jQuery
object ('myStations') to the processing of the 'dataloggers' JSON
object, using the 'myStaTitle' match with the 'dlname' key. But every
attempt I have made has failed. For whatever reason (very likely my
syntax) I cannot create my custom jQuery object and then pass it on.
Something like?:

$.getJSON("path/to/dataloggers.js", function(dlmon) {
    $.each(dlmon.dataloggers, function(dlname,arr){
        var tBodyRow = "<tr>";
        tBodyRow += '<td>'+dlname+'</td>' ;
        $.each(arr.values, function(vKey,vVal){
            tBodyRow += '<td>'+vKey+': '+vVal+'</td>' ;
        });

        // insert here?? why does this not work??
        tBodyRow += '<td>commtype: '+myStations.dlname.commtype+'</
td>' ;
        tBodyRow += '<td>provider: '+myStations.dlname.provider+'</
td>' ;

        tBodyRow += "</tr>" ;
        $("table#dataloggers tbody").append(tBodyRow);
    });
});

I hope this all makes sense. If anyone could give me a shove in the
right direction, I would be much obliged. All help much appreciated
and thanks in advance.