How to call the GeoJSON dynamically according to area selection in OpenLayers 3

Question

I'm trying to get GeoJSON according to the selection of a particular area. For example, if I have selected a built up area it will only show that area . I'm calling GeoJSON data through a PHP page, and I have created the plunker for this (this is the example).

The main problem I'm having is how to assign the vector value from another page to show the GeoJSON.

See this is my JavaScript page where I'm trying to assign the data:

$(document).ready(function(){
       $.getJSON("php/drpdwn.php", success = function(data){
            var items="";
            for(var i = 0; i< data.length; i++){
                items +="<option value='"+data[i].id+"'>" + data[i].name+"</option>";
            }
            $("#a1_title").append(items); 
            $("#a1_title").change();
        });
        $("#a1_title").change(function(){
      var selectedValue = $(this).find(":selected").text();
   if( selectedValue == "Landuse/landcover") {

              $.getJSON("php/lulc_db.php",success = function(data){              
                  var items="";
                  for(var i = 0; i< data.length; i++){
                      items+="<option value='"+data[i]+"'>" + data[i] +"</option>";
                  }
                  var myNode = document.getElementById("a2_title");
                  while (myNode.firstChild) {
                      myNode.removeChild(myNode.firstChild);
                  }
                  // ADD NEW ITEMS
                  $("#a2_title").append(items);  
              });
              $("#a2_title").change(function(){
    $("#save").on('click',function(){   
        $.ajax('php/geojson.php?layer=Built Up').then(function(response) {

  var geojsonFormat = new ol.format.GeoJSON();
  var features = geojsonFormat.readFeatures(response,
      {featureProjection: 'EPSG:4326'});
  vector.setSource(features);
}); 
    });
});
          }

And this is the way I'm adding vector layer:

         var vectorSourcec = new ol.source.Vector({
              format: new ol.format.GeoJSON(),
              });
    var vector = new ol.layer.Vector({
          source:vectorSourcec

          });
var map = new ol.Map({
  layers: [new ol.layer.Tile({
            source: new ol.source.OSM()
          }), vector],
  renderer: 'canvas',
target: document.getElementById('map'),

            view: new ol.View({
            Projection: 'EPSG:4326',
                center: ol.proj.fromLonLat([79.17436, 21.01668]),
  zoom: 5
                                }),
        });

Please improve me here where I'm doing.

Answer 1

Once you have your geojson back use the ol.format.GeoJSON() to parse the object and create the features.

var format = new ol.format.GeoJSON();
var myGeoJsonObj = ....asign the geojson result here
var myGeoJsonFeatures = format.readFeatures(myGeoJsonObj ) 

and then you may place your features in a vector layer using. vecLayer.getSource().addFeatures(myGeoJsonFeatures);

@Shahzad Bacha is correct. No call to get geojson within your plunker

UPDATE check this fiddle to see your data in action