How to set source and target in JSPlumb dynamically - json

Question

I am using jsplumb go show pictorial view of all devices connected to switch. I am following below approach, please comment in case if it's not as per standard.
Creating map of all the devices which are connected in the network, and dynamically create all devices on screen using innerHtml.
Create mapping json which contain which devices are connected to which device.
I now iterate json using javascript and create source and target for all devices on screen.
Problem:
When I iterate through json, source and target is not able to set in the below code.
var result = JSON.parse(devicePaths);
for (var i in result) {
var _source = new String(result[i]["source"]);
var _target = new String(result[i]["target"]);
var _endpoint = new String(result[i]["endpoint"]);
console.log('_source ' + _source); //this gives me proper value
console.log('_target ' + _target); //this gives me proper value
console.log('_endpoint ' + _endpoint);
instance = jsPlumb.getInstance({
PaintStyle : {
lineWidth : 1,
strokeStyle : "#567567",
outlineColor : "black",
outlineWidth : 1
}
});
common = {
anchors : [ "BottomCenter", "BottomCenter" ],
endpoints : [ "Dot", "Blank" ]
}
instance.connect({
source : _source,
target : _target,
detachable : false,
endpoint : _endpoint
}, common);
instance.draggable(_source);
}
});
Same works if I hardcode source and target values as source : rx_1 and target masterSwitch.