CODEWITHSUNDEEP
javascriptjqueryjsonobject
Hastig Zusammenstellen
Hastig Zusammenstellen

Reputation: 4440

How to access these keys and values in my json file with jQuery?

I'm having trouble accessing keys and values in my json file. I've tried a bunch of things but my focus is shot this week and I'm stuck.

Here's my transport.json file..

{"transportation":[
    {"Springfield":[{
        "bus":[{
            "start": 6,
            "end": 24,
            "stops":["oak street", "main street"]
        }],
        "taxi":[{
            "start": 25,
            "end": 25,
            "stops":["all"]
        }]
    }]},
    {"Pleasantville":[{
        "bus":[{
            "start": 6,
            "end": 22,
            "stops":["centre street", "river street"]
        }],
        "taxi":[{
            "start": 25,
            "end": 25,
            "stops":["all"]
        }],
        "train":[{
            "start": 6,
            "end": 23,
            "stops":["uptown", "downtown"]
        }]
    }]}
]}

The two things I'm trying to do are..

  1. I want to be able to alert the bus start value in users current area.

  2. I want to loop through the bus stops to compare to users current stop.

Here's my js code..

var currentArea = 'Pleasantville'; // this variable changes
var currentStop = 'uptown'; // this variable changes
$.getJSON("transport.json", function(jsontransportation) {
    $(jsontransportation.transportation).each(function(dataaaa) {
        var areaName = Object.keys(this);
        if (areaName == currentArea) { // this works to find correct area in json
            $(this.bus).each(function(key, value) { // i can't get this loop to work
                alert(this.start); // alerts nothing, no errors
                $(this.stops).each(function(key) { // now im trying to loop through keys in 'stops'
                    if (this.key === currentStop) { // to compare stop to current area
                        alert('the bus stops here at ' + currentStop); // and alert if there is a stop here
                    } else {
                        alert('the bus does not stop here at ' + currentStop); // else alert no stop here
                    }
                })
            });
        }
    });
});

Upvotes: 0

Views: 75

Answers (4)

Priya
Priya

Reputation: 1554

Try changing serviceType to get your data chunk. (Sorry, No jquery)

var $data = {
  "transportation": [{
      "Springfield": [{
        "bus": [{
          "start": 6,
          "end": 24,
          "stops": ["oak street", "main street"]
        }],
        "taxi": [{
          "start": 25,
          "end": 25,
          "stops": ["all"]
        }]
      }]
    },
    {
      "Pleasantville": [{
        "bus": [{
          "start": 6,
          "end": 22,
          "stops": ["centre street", "river street"]
        }],
        "taxi": [{
          "start": 25,
          "end": 25,
          "stops": ["all"]
        }],
        "train": [{
          "start": 6,
          "end": 23,
          "stops": ["uptown", "downtown"]
        }]
      }]
    }
  ]
};

var search = function(currentArea, currentStop, serviceType, callback) {
  var found = false;
  $data.transportation.forEach(function(area) {
    var $transport = area[currentArea];
    if ($transport) {
      $transport.forEach(function($types) {
        $service = $types[serviceType];
        if ($service) {
          $service.forEach(function($details) {
            if ($details.stops.indexOf(currentStop) > -1) {
              found = $details;
            }
          });
        }
      });
    }
  });

  setTimeout(function() {
    callback(found, currentArea, currentStop, serviceType);
  }, 0);
};

function response(data, currentArea, currentStop, serviceType) {
  if (data === false) {
    alert("The " + serviceType + " doesn't stop at " + currentStop + " for " + currentArea);
  } else {
    alert(serviceType + " starts at " + data.start + " at " + currentStop + ", " + currentArea);
  }
}

var currentArea = 'Pleasantville';
var currentStop = 'uptown';

search(currentArea, currentStop, 'bus', response);
search(currentArea, currentStop, 'train', response);
search(currentArea, 'river street', 'bus', response);
search('Springfield', 'oak street', 'bus', response);

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

Here is exactly what you need. I have also changed the code so that the alert is displayed only once. 

$(document).ready(function(){
   var currentArea = 'Pleasantville'; // this variable changes
   var currentStop = 'uptown'; // this variable changes
  $.getJSON("transport.json", function(jsontransportation) {
      $(jsontransportation.transportation).each(function(dataaaa) {
          var areaName = Object.keys(this);
          if (areaName == currentArea) { 
             var selectedArea = this[currentArea];
             var bus = selectedArea[0].bus;
             var stops;
             $(bus).each(function(keyBus, valueBus) { 
               alert(this.start); 
               stops = false;
               $(this.stops).each(function(key, valueStops) { 
                      if (valueStops === currentStop) { 
                          stops = true;
                      } 
                  })
             });
             if(stops){
                alert('the bus stops here at ' + currentStop); 
             }else{
                alert('the bus does not stop here at ' + currentStop); // else alert no stop here
             }


          }
      });
  });
});

For work around here is the link to PLUNKR

Upvotes: 1

Dij
Dij

Reputation: 9808

you are using wrong keys at various places, actually to check if bus stops at user's current stop, you don't need to loop through all stops and compare instead you can use indexOf(), following code should work:

var currentArea = 'Pleasantville'; // this variable changes
var currentStop = 'uptown'; // this variable changes
$.getJSON("transport.json", function(jsontransportation) {
    $(jsontransportation.transportation).each(function(dataaaa) {
        var areaName = Object.keys(this)[0];
        if (areaName == currentArea) { // this works to find correct area in json
        var selectedCityObject = this[areaName][0]
            $(selectedCityObject.bus).each(function(key, value) { // i can't get this loop to work
                alert(value.start); // alerts nothing, no errors
                if (value.stops.indexOf(currentStop) >= 0) { // to compare stop to current area
                        alert('the bus stops here at ' + currentStop); // and alert if there is a stop here
                    } else {
                        alert('the bus does not stop here at ' + currentStop); // else alert no stop here
                    }
            });
        }
    });
});

Upvotes: 1

Victor Radu
Victor Radu

Reputation: 2292

try this:

var currentArea = 'Pleasantville'; // this variable changes
var currentStop = 'uptown'; // this variable changes
$.getJSON("transport.json", function(jsontransportation) {
    $(jsontransportation.transportation).each(function(index, area) {
        var areaName = Object.keys(this)[0];
        if (areaName == currentArea) { 
        vehicles = this[areaName][0];
            $(vehicles.bus).each(function(key, value) { 
                alert(value.start);
                $(value.stops).each(function(index, stopName) {
                    if (stopName === currentStop) { 
                        alert('the bus stops here at ' + currentStop); 
                    } else {
                        alert('the bus does not stop here at ' + currentStop);
                    }
                })
            });
        }
    });
});

Upvotes: 1

Related Questions