How to manipulate JSON data in html within a jQuery?

I have my json file looks like this

{"level" :[
    {"color" : "#FF6600", "Polygon" : [
        {"lon" : 125.8575930951375,"latt": 36.95626849495004},
        {"lon" : 125.8851548404469,"latt": 36.99677151742446},
        {"lon" : 125.9128154107602,"latt": 37.03743133552931},
        {"lon" : 125.9564137105485,"latt": 37.07788492352393},]},
    {"color" : "#FFFF00", "Polygon" : [
        {"lon" : 125.8575930951375,"latt": 36.95626849495004},
        {"lon" : 125.8851548404469,"latt": 36.99677151742446},
        {"lon" : 125.9128154107602,"latt": 37.03743133552931},
        {"lon" : 125.9564137105485,"latt": 37.07788492352393},]},
]}

if i declare a variable for the above json format inside my html, then I manage to manipulate the data with the following code

var dataObj = {"level" :[
    {"color" : "#FF6600", "Polygon" : [
        {"lon" : 125.8575930951375,"latt": 36.95626849495004},
        {"lon" : 125.8851548404469,"latt": 36.99677151742446},
        {"lon" : 125.9128154107602,"latt": 37.03743133552931},
        {"lon" : 125.9564137105485,"latt": 37.07788492352393},]},
    {"color" : "#FFFF00", "Polygon" : [
        {"lon" : 125.8575930951375,"latt": 36.95626849495004},
        {"lon" : 125.8851548404469,"latt": 36.99677151742446},
        {"lon" : 125.9128154107602,"latt": 37.03743133552931},
        {"lon" : 125.9564137105485,"latt": 37.07788492352393},]},
]}

function UseJSON(){

for (i = 0; i < dataObj.level.length; i++)
{
    var polygon = [];
    for (j = 0; j < dataObj.level[i].Polygon.length; j++)
    {
        var point = map.getTransformXY(dataObj.level[i].Polygon[j].lon, dataObj.level[i].Polygon[j].latt,"EPSG:4326","EPSG:900913");
        polygon.push(new OpenLayers.Geometry.Point(point.x, point.y)); 
    }

    var style_polygon = {strokeColor: "#000000", strokeOpacity: 0.7, fillColor: dataObj.level[i].color, fillOpacity: 0.5, strokeWidth: 1};

    var intensityPolygon = new vworld.Polygon(polygon, style_polygon);

    map.vectorLayer.addFeatures([intensityPolygon]);
}   
}

Refer to this previous answer in SO: How to use json in html

I try to modify my code as per below:

function UseJSON(){

$.getJSON('data.json', function(dataObj) {
    for (i = 0; i < dataObj.level.length; i++)
    {
    var polygon = [];
    for (j = 0; j < dataObj.level[i].Polygon.length; j++)
    {
        var point = map.getTransformXY(dataObj.level[i].Polygon[j].lon, dataObj.level[i].Polygon[j].latt,"EPSG:4326","EPSG:900913");
        polygon.push(new OpenLayers.Geometry.Point(point.x, point.y)); 
    }

    var style_polygon = {strokeColor: "#000000", strokeOpacity: 0.7, fillColor: dataObj.level[i].color, fillOpacity: 0.5, strokeWidth: 0.5};

    var intensityPolygon = new vworld.Polygon(polygon, style_polygon);

    map.vectorLayer.addFeatures([intensityPolygon]);
    }
});
}

But it does not seems to work. As it seems does not get the data.json file from local. Any idea?

Thank you