Why is my JSON not appearing on my webpage?

Question

Greetings lovers of GIS,

I came across this error whilst doing my JSON file.

"Error in loading GML file"

Everything works fine in localhost but dramatically wrong in my server. Any helping hands?

These are my JavaScript codes. Thanks in advance.

var map, wms, vectors;
    function init(){
    map = new OpenLayers.Map("map", {numZoomLevels: 5});
    OpenLayers.Feature.Vector.style['default']['fillOpacity'] = 0.9;
    //var MyJSON ="internet_users_2005.json.fixed"
    vectors = new OpenLayers.Layer.GML("Internet Users", "internet_users_2005.json.fixed", {
    format: OpenLayers.Format.GeoJSON,
    styleMap: build_style(),
    isBaseLayer: true,
    projection: new OpenLayers.Projection("EPSG:4326"),
    attribution: "<a href='http://www.gis.com.my/' >GISI</a>"});
    map.addLayers([vectors]);
    map.zoomToMaxExtent();
    var options = {
    hover: true,
    onSelect: function(feature) {
    $("info").innerHTML = feature.attributes.name + ": "+ feature.attributes.value;
    }
    };
    var select = new OpenLayers.Control.SelectFeature(vectors, options);
    map.addControl(select);
    select.handler.stopDown = false;
    select.handler.stopUp = false;
    select.activate();
    }
    function build_style() {
    var theme = new OpenLayers.Style();
    var ruleHigh = new OpenLayers.Rule(
    {
    filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.GREATER_THAN_OR_EQUAL_TO,
    property: "value",
    value: 50 }),
    symbolizer: {"Polygon": {'fillColor': '#ff0000'}}
    });
    var ruleMed1 = new OpenLayers.Rule({filter: new OpenLayers.Filter.Logical({
    type: OpenLayers.Filter.Logical.AND,
    filters: [
    new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.LESS_THAN,
    property: "value",
    value: 50
    }),
    new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.GREATER_THAN,
    property: "value",
    value: 20
    })
    ]
    }),
    symbolizer: {"Polygon": {'fillColor': '#ff6600'}}
    });
    var ruleMed2 = new OpenLayers.Rule({filter: new OpenLayers.Filter.Logical({
    type: OpenLayers.Filter.Logical.AND,
    filters: [
    new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.LESS_THAN,
    property: "value",
    value: 20
    }),
    new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.GREATER_THAN,
    property: "value",
    value: 10
    })
    ]
    }),
    symbolizer: {"Polygon": {'fillColor': '#ffcc00'}}
    });
    var ruleLow = new OpenLayers.Rule({filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.LESS_THAN, 
    property: "value",
    value: 10
    }),
    symbolizer: {"Polygon": {'fillColor': '#ffff66'}}
    });
    theme.addRules([ruleLow, ruleMed1, ruleMed2, ruleHigh]);
    var stylemap = new OpenLayers.StyleMap({'default':theme, 'select': {'strokeColor': '#0000ff', 'fillColor': '#0000ff', 'strokeWidth': 2}});
    return stylemap;
    }

Answer 1

GeoJSON is not GML, so this won't work.

vectors = new OpenLayers.Layer.GML("Internet Users", "internet_users_2005.json.fixed", {
    format: OpenLayers.Format.GeoJSON,

Since you are reading your data from a file, you will need to read in the json into a variable. In your internet_users_2005.json.fixed file, change it so it's set as a variable:

var data = ...json...

Load the json into the map script with:

<script type="text/javascript" src="internet_users_2005.json.fixed"></script>

then replace the GML provider with this:

// create GeoJSON parser    
var geojson_format = new OpenLayers.Format.GeoJSON();
// create vector layer
var vectors = new OpenLayers.Layer.Vector(); 
// parse GeoJSON
vectors.addFeatures(geojson_format.read(data));

map.addLayer(vectors);

Answer 2

Check in Firebug (Firefox) or Fiddler (IE) if your file internet_users_2005.json.fixed is in fact being loaded. I suspect there's a problem with the path.