recursive function issue

HTML

<div id="mydiv">

</div>

JavaScript

function buildString(json, outstring) {
    var andor = json.condition;
    for (var rule in json.rules) {
        if (json.rules[rule].hasOwnProperty("condition")) {
           outstring += buildString(json.rules[rule], outstring);
        } else {
            var field = json.rules[rule].id;
            var operator = json.rules[rule].operator;
            var value = json.rules[rule].value == null ? '' : json.rules[rule].value;
            outstring += field + ' ' + operator + ' ' + value;
            if (rule < json.rules.length - 1) {
                outstring += ' ' + andor + ' ';
            }
        }
    }
    return outstring;
}

var jsonObj = {
    "condition": "AND",
    "rules": [{
        "id": "field1",
        "operator": "!= ''",
        "value": null
    }, {
        "condition": "AND",
        "rules": [{
            "id": "field2",
            "operator": "== ''",
            "value": null
        }]
    }, {
        "id": "field3",
        "operator": "== ''",
        "value": null
    }]
};

$('#mydiv').text(buildString(jsonObj, ""));