Question

This is the scenario:

We have two fields on the Xpage to be filled from an Ajax call.
The return from the Ajax call is a json structure.
In old school web development we are doing this using prototype.js:

$H( json ).each(function(pair){
    try {
        $( pair.key ).value = pair.value  
    }
    catch(err) { }
});  

Assumption here is that we have the fieldIDs equals the json keys.

{
    "fieldID1":"value1",
    "fieldID2":"value2"
}

Xpages CSJS needs to have the field ID placeholder present in the script to be able to convert to the actual ID that the field has on the Xpage:

$("#{id:fieldID1}").value = json.fieldID1;
$("#{id:fieldID2}").value = json.fieldID2;

How to determine the actual field ID in CSJS runtime using something like this:

$H( json ).each(function(pair){
    try {
        $("#{id:"+pair.key+"}").value = pair.value  
    }
    catch(err) { }
});  

Our actual form has +10 fields to be populated and depending on the circumstances the fields are dynamically “loaded” and therefor we have 2…n fields on the form to be populated by the ajax/json.

Answer 1

Here is a CSJS implementation of getComponent() method from SSJS:

/**
 * getComponent
 *
 * CSJS implementation of SSJS's getComponent method
 *
 * @param serverId  ComponentId to search for
 * @param fromObj   DOM object to start with
 * @author Sven Hasselbach
 * @version 0.3
 */
function getComponent( serverId, fromObj ){

    var found = false;
    var obj = fromObj;
    var id = "";

    while( obj ){
        try{
            id = obj.id.split(":").pop();
        }catch(e){}

        if( id == serverId )
            return obj;

        ret = findComponent( serverId, obj );
        if( ret )
            return ret;

        obj = obj.parentNode;
    }

}

/**
 * findComponent
 * 
 * searches the component tree for a specific
 * server id
 */
function findComponent( searchId, parentNode ){
    var obj;
    var id = "";

    if( parentNode == null )
        return;

    if( parentNode.hasChildNodes() == false )
        return;

    for( p in parentNode.childNodes ){
        obj = parentNode.childNodes[p];
        try{
            id = obj.id.split(":").pop();

            if( id == searchId )
                return obj;

            ret = findComponent( searchId, obj );
            if( ret )
                return ret;

        }catch(e){}
    }
}

This allows you to search in the component tree for a specific server id.
To use it you have to define a starting component first, because the tree is searched from a node to the top.

To get your starting node:

var obj = XSP.getElementById( "view:_id1:layoutMain:callbackMiddle:dataViewAllReportsByStatus:1_sumLink" );

Then search for another component layoutLeft f.e.:

var ret = getComponent("layoutLeft", obj );
alert( ret.id )