1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

JSON Data - Listing Values and using Objects

Discussion in 'jQuery' started by phi16181, Feb 8, 2014.

0
  1. #1
    I have a set of JSON data that I need to search for a set of specific values based on one key that is specified by select menu. Everything is working well if I just needed to find one hospital, but I need to list all hospitals in a selected state.

    **Here is the working example: http://jsfiddle.net/rfKcM/**

    As you can see I have a set of JSON data that simply lists multiple hospitals in three different states. In addition, each hospital also has a related set of data values in the JSON file. Currently a user selects a state from the select menu and a corresponding hospital in the same state is listed, but I need to list ALL hospitals in the selected state, not just one.

    In addition, the hospitals that are listed need to be listed as links so a user can choose a hospital to use in the application and all of its related values also be available for use as objects later.

    **Here is a summary of the workflow:**

    1. User selects a state in the dropdown and presses the submit button
    2. Pressing the submit button runs the function that searches the JSON data and finds all of the entries that match the state value that was entered in the previous step
    3. ALL HosName values that have a matching state are listed as links
    4. User chooses a HosName from the list and all JSON values related to the chosen HosName are brought into the application for later use. For example: If a user chooses "YORK HOSPITAL" from the list of hospital names the related strings (SPval,Hospitalval,ICUval,SMval,OPval,AVLOSval) will also be retrieved from the JSON data and be available as objects with the application for later calculations.


    **Here is the actual code:**

    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
    $(function() {
    var city;
    var json = {
    "hospitals": {
    "facility": [

    {"HosName":"UNIVERSITY OF WISCONSIN HOSPITALS A","City":"MADISON","State":"WI","SPval":104938,"Hospitalval":501,"ICUval":55,"SMval":6132,"OPval":0,"AVLOSval":0},
    {"HosName":"UNIVERSITY OF IOWA HOSPITALS & CLIN","City":"IOWA CITY","State":"WI","SPval":101188,"Hospitalval":744,"ICUval":20,"SMval":8307,"OPval":0,"AVLOSval":0},
    {"HosName":"CLEVELAND CLINIC FOUNDATION","City":"CLEVELAND","State":"WI","SPval":81954,"Hospitalval":1257,"ICUval":205,"SMval":19758,"OPval":0,"AVLOSval":0},
    {"HosName":"METHODIST HOSPITAL","City":"SAN ANTONIO","State":"WI","SPval":71477,"Hospitalval":1419,"ICUval":104,"SMval":5607,"OPval":0,"AVLOSval":0},
    {"HosName":"AURORA ST LUKES MEDICAL CENTER","City":"MILWAUKEE","State":"WI","SPval":68638,"Hospitalval":710,"ICUval":68,"SMval":3653,"OPval":0,"AVLOSval":0},
    {"HosName":"NEW YORK PRESBYTERIAN HOSPITAL 0 CO","City":"NEW YORK","State":"WI","SPval":66846,"Hospitalval":959,"ICUval":99,"SMval":15472,"OPval":0,"AVLOSval":0},
    {"HosName":"DOCTORS HOSPITAL AT RENAISSANCE","City":"EDINBURG","State":"TX","SPval":60026,"Hospitalval":521,"ICUval":35,"SMval":2845,"OPval":0,"AVLOSval":0},
    {"HosName":"VA MEDICAL CENTER ATLANTA","City":"DECATUR","State":"TX","SPval":59781,"Hospitalval":191,"ICUval":45,"SMval":1864,"OPval":0,"AVLOSval":0},
    {"HosName":"THE JOHNS HOPKINS HOSPITAL","City":"BALTIMORE","State":"TX","SPval":58423,"Hospitalval":981,"ICUval":104,"SMval":9036,"OPval":0,"AVLOSval":0},
    {"HosName":"VIRTUA WEST JERSEY HOSPITAL 0 VOORH","City":"VOORHEES","State":"TX","SPval":57953,"Hospitalval":352,"ICUval":20,"SMval":3073,"OPval":0,"AVLOSval":0},
    {"HosName":"PINNACLEHEALTH AT HARRISBURG HOSPIT","City":"HARRISBURG","State":"LA","SPval":55529,"Hospitalval":643,"ICUval":28,"SMval":3887,"OPval":0,"AVLOSval":0},
    {"HosName":"FLORIDA HOSPITAL 0 ORLANDO","City":"ORLANDO","State":"LA","SPval":53620,"Hospitalval":1538,"ICUval":272,"SMval":13716,"OPval":0,"AVLOSval":0},
    {"HosName":"ORLANDO REGIONAL MEDICAL CENTER","City":"ORLANDO","State":"LA","SPval":53490,"Hospitalval":1305,"ICUval":64,"SMval":10422,"OPval":0,"AVLOSval":0},
    {"HosName":"YORK HOSPITAL","City":"SOUTH BERWICK","State":"LA","SPval":0,"Hospitalval":0,"ICUval":0,"SMval":0,"OPval":0,"AVLOSval":0}

    ]
    }
    };

    $("input[type='submit']").click(function() {
    var searchName = $("select[name='state']").val();
    $.each(json.hospitals.facility, function(i, v) {
    if (v.State == searchName) {
    name = v.HosName;
    return;
    }
    });
    return;
    });
    $("#submit").click(function(){
    $('.hospital').html(name);
    });
    });
    </script>
    </head>
    <body>
    <div>
    <select name="state">
    <option value="" selected="selected">Select a State</option>

    <option value="LA">Louisiana</option>
    <option value="TX">Texas</option>
    <option value="WI">Wisconsin</option>
    </select>

    <input value="submit" id="submit" type="submit" />
    </div>

    <p class="hospital"></p>
    </body>
    </html>
     
    phi16181, Feb 8, 2014 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Try this:
    
<html>
   <head>
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
     <script>
     $(function() {
       var city;
       var json = {
       "hospitals": {
       "facility": [
           {"HosName":"UNIVERSITY OF WISCONSIN HOSPITALS A","City":"MADISON","State":"WI","SPval":104938,"Hospitalval":501,"ICUval":55,"SMval":6132,"OPval":0,"AVLOSval":0},
           {"HosName":"UNIVERSITY OF IOWA HOSPITALS & CLIN","City":"IOWA CITY","State":"WI","SPval":101188,"Hospitalval":744,"ICUval":20,"SMval":8307,"OPval":0,"AVLOSval":0},
           {"HosName":"CLEVELAND CLINIC FOUNDATION","City":"CLEVELAND","State":"WI","SPval":81954,"Hospitalval":1257,"ICUval":205,"SMval":19758,"OPval":0,"AVLOSval":0},
           {"HosName":"METHODIST HOSPITAL","City":"SAN ANTONIO","State":"WI","SPval":71477,"Hospitalval":1419,"ICUval":104,"SMval":5607,"OPval":0,"AVLOSval":0},
           {"HosName":"AURORA ST LUKES MEDICAL CENTER","City":"MILWAUKEE","State":"WI","SPval":68638,"Hospitalval":710,"ICUval":68,"SMval":3653,"OPval":0,"AVLOSval":0},
           {"HosName":"NEW YORK PRESBYTERIAN HOSPITAL 0 CO","City":"NEW YORK","State":"WI","SPval":66846,"Hospitalval":959,"ICUval":99,"SMval":15472,"OPval":0,"AVLOSval":0},
           {"HosName":"DOCTORS HOSPITAL AT RENAISSANCE","City":"EDINBURG","State":"TX","SPval":60026,"Hospitalval":521,"ICUval":35,"SMval":2845,"OPval":0,"AVLOSval":0},
           {"HosName":"VA MEDICAL CENTER ATLANTA","City":"DECATUR","State":"TX","SPval":59781,"Hospitalval":191,"ICUval":45,"SMval":1864,"OPval":0,"AVLOSval":0},
           {"HosName":"THE JOHNS HOPKINS HOSPITAL","City":"BALTIMORE","State":"TX","SPval":58423,"Hospitalval":981,"ICUval":104,"SMval":9036,"OPval":0,"AVLOSval":0},
           {"HosName":"VIRTUA WEST JERSEY HOSPITAL 0 VOORH","City":"VOORHEES","State":"TX","SPval":57953,"Hospitalval":352,"ICUval":20,"SMval":3073,"OPval":0,"AVLOSval":0},
           {"HosName":"PINNACLEHEALTH AT HARRISBURG HOSPIT","City":"HARRISBURG","State":"LA","SPval":55529,"Hospitalval":643,"ICUval":28,"SMval":3887,"OPval":0,"AVLOSval":0},
           {"HosName":"FLORIDA HOSPITAL 0 ORLANDO","City":"ORLANDO","State":"LA","SPval":53620,"Hospitalval":1538,"ICUval":272,"SMval":13716,"OPval":0,"AVLOSval":0},
           {"HosName":"ORLANDO REGIONAL MEDICAL CENTER","City":"ORLANDO","State":"LA","SPval":53490,"Hospitalval":1305,"ICUval":64,"SMval":10422,"OPval":0,"AVLOSval":0},
           {"HosName":"YORK HOSPITAL","City":"SOUTH BERWICK","State":"LA","SPval":0,"Hospitalval":0,"ICUval":0,"SMval":0,"OPval":0,"AVLOSval":0}
         ]
         }
       };

     $("input[type='submit']").click(function() {
       var searchName = $("select[name='state']").val();
       $.each(json.hospitals.facility, function(i, v) {
         if (v.State == searchName) {
           name = v.HosName;
           $('.hospital').append('<li>'+name+'</li>');
         }
       });
     return;
     });
     });
     </script>
</head>
<body>
<div>
<select name="state">
<option value="" selected="selected">Select a State</option>

<option value="LA">Louisiana</option>
<option value="TX">Texas</option>
<option value="WI">Wisconsin</option>
</select>

<input value="submit" id="submit" type="submit" />
</div>

<ul class="hospital"></ul>
</body>
</html>
    Code (markup):
     
    PoPSiCLe, Feb 8, 2014 IP
  3. phi16181

    phi16181 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Thanks. That works for the list I needed.

    Any thoughts on how I can make the list items link and reference back to their related JSON data? A user will need to make a selection from the list of hospitals and all of the corresponding JSON data ("SPval","Hospitalval","ICUval","SMval","OPval","AVLOSval") value be available as objects to use later in the application.

    For example: A user chooses Louisiana as the state and gets the following list in return:
    • PINNACLEHEALTH AT HARRISBURG HOSPIT
    • FLORIDA HOSPITAL 0 ORLANDO
    • ORLANDO REGIONAL MEDICAL CENTER
    • YORK HOSPITAL
    The use then needs to be able to 'choose' one of the hospitals from the list. For example, he/she chooses YORK HOSPITAL, then all of YORK HOSPITAL json values need to be available as objects in the application. In this example this would be: "SPval":0,"Hospitalval":0,"ICUval":0,"SMval":0,"OPval":0,"AVLOSval":0

    If it would be easier the list could also be a SELECT menu instead of a simple list.

    Thanks for your help!
     
    phi16181, Feb 8, 2014 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    This works:
    
<html>
   <head>
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
     <script>
     $(function() {
       var city;
       var json = {
       "hospitals": {
       "facility": [
           {"HosName":"UNIVERSITY OF WISCONSIN HOSPITALS A","City":"MADISON","State":"WI","SPval":104938,"Hospitalval":501,"ICUval":55,"SMval":6132,"OPval":0,"AVLOSval":0},
           {"HosName":"UNIVERSITY OF IOWA HOSPITALS & CLIN","City":"IOWA CITY","State":"WI","SPval":101188,"Hospitalval":744,"ICUval":20,"SMval":8307,"OPval":0,"AVLOSval":0},
           {"HosName":"CLEVELAND CLINIC FOUNDATION","City":"CLEVELAND","State":"WI","SPval":81954,"Hospitalval":1257,"ICUval":205,"SMval":19758,"OPval":0,"AVLOSval":0},
           {"HosName":"METHODIST HOSPITAL","City":"SAN ANTONIO","State":"WI","SPval":71477,"Hospitalval":1419,"ICUval":104,"SMval":5607,"OPval":0,"AVLOSval":0},
           {"HosName":"AURORA ST LUKES MEDICAL CENTER","City":"MILWAUKEE","State":"WI","SPval":68638,"Hospitalval":710,"ICUval":68,"SMval":3653,"OPval":0,"AVLOSval":0},
           {"HosName":"NEW YORK PRESBYTERIAN HOSPITAL 0 CO","City":"NEW YORK","State":"WI","SPval":66846,"Hospitalval":959,"ICUval":99,"SMval":15472,"OPval":0,"AVLOSval":0},
           {"HosName":"DOCTORS HOSPITAL AT RENAISSANCE","City":"EDINBURG","State":"TX","SPval":60026,"Hospitalval":521,"ICUval":35,"SMval":2845,"OPval":0,"AVLOSval":0},
           {"HosName":"VA MEDICAL CENTER ATLANTA","City":"DECATUR","State":"TX","SPval":59781,"Hospitalval":191,"ICUval":45,"SMval":1864,"OPval":0,"AVLOSval":0},
           {"HosName":"THE JOHNS HOPKINS HOSPITAL","City":"BALTIMORE","State":"TX","SPval":58423,"Hospitalval":981,"ICUval":104,"SMval":9036,"OPval":0,"AVLOSval":0},
           {"HosName":"VIRTUA WEST JERSEY HOSPITAL 0 VOORH","City":"VOORHEES","State":"TX","SPval":57953,"Hospitalval":352,"ICUval":20,"SMval":3073,"OPval":0,"AVLOSval":0},
           {"HosName":"PINNACLEHEALTH AT HARRISBURG HOSPIT","City":"HARRISBURG","State":"LA","SPval":55529,"Hospitalval":643,"ICUval":28,"SMval":3887,"OPval":0,"AVLOSval":0},
           {"HosName":"FLORIDA HOSPITAL 0 ORLANDO","City":"ORLANDO","State":"LA","SPval":53620,"Hospitalval":1538,"ICUval":272,"SMval":13716,"OPval":0,"AVLOSval":0},
           {"HosName":"ORLANDO REGIONAL MEDICAL CENTER","City":"ORLANDO","State":"LA","SPval":53490,"Hospitalval":1305,"ICUval":64,"SMval":10422,"OPval":0,"AVLOSval":0},
           {"HosName":"YORK HOSPITAL","City":"SOUTH BERWICK","State":"LA","SPval":0,"Hospitalval":0,"ICUval":0,"SMval":0,"OPval":0,"AVLOSval":0}
         ]
         }
       };

     $("input[type='submit']").click(function(e) {
       e.preventDefault();
       var searchName = $("select[name='state']").val();
       var hospitalOptions = [];
       var c = 0;
       hospitalOptions[c] = '<option>Select a hospital</option>';
       var c = 1;
       $.each(json.hospitals.facility, function(i, v) {
         if (v.State == searchName) {
           name = v.HosName;
           hospitalOptions[c] = '<option>'+name+'</option>';
           c++;
         }
       });
       
       var option = '';
       for (i=0; i<hospitalOptions.length; i++) {
           option += hospitalOptions[i];
       }
       $('#hospital_list').html(option);
       $("#hospital_list").show();
       $("#hospital_list").on('change', function() {
         var selectedName = $(this).val();
         $.each(json.hospitals.facility, function(i, v) {
           if (v.HosName == selectedName) {
             $('#hospitalinfo').html('<li>SPVal: '+v.SPval+'</li><li>HospitalVal: '+v.Hospitalval+'</li><li>ICUVal: '+v.ICUval+'</li><li>SMVal: '+v.SMVal+'</li><li>OPVal: '+v.OPVal+'</li><li>AVLOSVal: '+v.AVLOSval+'</li>');
           }
         });
         $("#hospitalinfo").show();
       })
     // return;
     });
     });
     </script>
</head>
<body>
<div>
<form id="hospital_select" method="post" action="#">
<select name="state">
<option value="" selected="selected">Select a State</option>
<option value="LA">Louisiana</option>
<option value="TX">Texas</option>
<option value="WI">Wisconsin</option>
</select>
<select name="hospitals" id="hospital_list" style="display: none;">
</select>
<input value="submit" id="submit" type="submit">
</div>
<ul id="hospitalinfo" style="display: none;"></ul>
</body>
</html>
    Code (markup):
    Probably not the prettiest thing I've made, though... was done in a bit of a hurry
     
    PoPSiCLe, Feb 8, 2014 IP
  5. phi16181

    phi16181 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    That works perfectly. Is there anyway to add another select between state and hospital name? I need to narrow the list of hospitals down and adding another select that finds the cities in the selected state and then the hospitals in the selected cities would reduce the list.

    Thanks for the help!
     
    phi16181, Feb 8, 2014 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    Yeah, that's not a problem.
    
<html>
   <head>
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
     <script>
     $(document).ready(function() {

     $(function() {
       var city;
       var json = {
       "hospitals": {
       "facility": [
           {"HosName":"UNIVERSITY OF WISCONSIN HOSPITALS A","City":"MADISON","State":"WI","SPval":104938,"Hospitalval":501,"ICUval":55,"SMval":6132,"OPval":0,"AVLOSval":0},
           {"HosName":"UNIVERSITY OF IOWA HOSPITALS & CLIN","City":"IOWA CITY","State":"WI","SPval":101188,"Hospitalval":744,"ICUval":20,"SMval":8307,"OPval":0,"AVLOSval":0},
           {"HosName":"CLEVELAND CLINIC FOUNDATION","City":"CLEVELAND","State":"WI","SPval":81954,"Hospitalval":1257,"ICUval":205,"SMval":19758,"OPval":0,"AVLOSval":0},
           {"HosName":"METHODIST HOSPITAL","City":"SAN ANTONIO","State":"WI","SPval":71477,"Hospitalval":1419,"ICUval":104,"SMval":5607,"OPval":0,"AVLOSval":0},
           {"HosName":"AURORA ST LUKES MEDICAL CENTER","City":"MILWAUKEE","State":"WI","SPval":68638,"Hospitalval":710,"ICUval":68,"SMval":3653,"OPval":0,"AVLOSval":0},
           {"HosName":"NEW YORK PRESBYTERIAN HOSPITAL 0 CO","City":"NEW YORK","State":"WI","SPval":66846,"Hospitalval":959,"ICUval":99,"SMval":15472,"OPval":0,"AVLOSval":0},
           {"HosName":"DOCTORS HOSPITAL AT RENAISSANCE","City":"EDINBURG","State":"TX","SPval":60026,"Hospitalval":521,"ICUval":35,"SMval":2845,"OPval":0,"AVLOSval":0},
           {"HosName":"VA MEDICAL CENTER ATLANTA","City":"DECATUR","State":"TX","SPval":59781,"Hospitalval":191,"ICUval":45,"SMval":1864,"OPval":0,"AVLOSval":0},
           {"HosName":"THE JOHNS HOPKINS HOSPITAL","City":"BALTIMORE","State":"TX","SPval":58423,"Hospitalval":981,"ICUval":104,"SMval":9036,"OPval":0,"AVLOSval":0},
           {"HosName":"VIRTUA WEST JERSEY HOSPITAL 0 VOORH","City":"VOORHEES","State":"TX","SPval":57953,"Hospitalval":352,"ICUval":20,"SMval":3073,"OPval":0,"AVLOSval":0},
           {"HosName":"PINNACLEHEALTH AT HARRISBURG HOSPIT","City":"HARRISBURG","State":"LA","SPval":55529,"Hospitalval":643,"ICUval":28,"SMval":3887,"OPval":0,"AVLOSval":0},
           {"HosName":"FLORIDA HOSPITAL 0 ORLANDO","City":"ORLANDO","State":"LA","SPval":53620,"Hospitalval":1538,"ICUval":272,"SMval":13716,"OPval":0,"AVLOSval":0},
           {"HosName":"ORLANDO REGIONAL MEDICAL CENTER","City":"ORLANDO","State":"LA","SPval":53490,"Hospitalval":1305,"ICUval":64,"SMval":10422,"OPval":0,"AVLOSval":0},
           {"HosName":"YORK HOSPITAL","City":"SOUTH BERWICK","State":"LA","SPval":0,"Hospitalval":0,"ICUval":0,"SMval":0,"OPval":0,"AVLOSval":0}
         ]
         }
       };

     $("input[type='submit']").click(function(e) {
       e.preventDefault();
       var searchName = $("select[name='state']").val();
       var cities = [];
       var c = 0;
       cities[c] = '<option>Select a city</option>';
       c = 1;
       $.each(json.hospitals.facility, function(i, v) {
         if (v.State == searchName) {
           city = v.City;
           cities[c] = '<option>'+city+'</option>';
           c++;
         }
       })
       var citiesOption = [];
       for (i = 0; i < cities.length; i++) {
         if (cities[i] != cities[i-1]) {
           citiesOption += cities[i];   
         }
         
       }

       
       $("#cities").html(citiesOption);
       $("#cities").show();
       $("#cities").on('change', function() {
         var chosenCity = $(this).val();
         var hospitals = [];
         var c = 0;
         hospitals[c] = '<option>Select a hospital</option>';
         c = 1;
         $.each(json.hospitals.facility, function(i, v) {
           if (v.State == searchName && v.City == chosenCity) {
             name = v.HosName;
             hospitals[c] = '<option>'+name+'</option>';
             c++;
           }
         });

         var hospitalOption = '';
         for (i=0; i<hospitals.length; i++) {
             hospitalOption += hospitals[i];
         }
         $('#hospital_list').html(hospitalOption);
         $("#hospital_list").show();
         $("#hospital_list").on('change', function() {
           var selectedName = $(this).val();
           $.each(json.hospitals.facility, function(i, v) {
             if (v.HosName == selectedName) {
               $('#hospitalinfo').html('<li>SPVal: '+v.SPval+'</li><li>HospitalVal: '+v.Hospitalval+'</li><li>ICUVal: '+v.ICUval+'</li><li>SMVal: '+v.SMVal+'</li><li>OPVal: '+v.OPVal+'</li><li>AVLOSVal: '+v.AVLOSval+'</li>');
             }
           });
           $("#hospitalinfo").show();
         })
     // return;
             })
     });
     });
})
     </script>
</head>
<body>
<div>
<form id="hospital_select" method="post" action="#">
<select name="state">
<option value="" selected="selected">Select a State</option>
<option value="LA">Louisiana</option>
<option value="TX">Texas</option>
<option value="WI">Wisconsin</option>
</select>
<select name="cities" id="cities" style="display: none;">
</select>
<select name="hospitals" id="hospital_list" style="display: none;">
</select>
<input value="submit" id="submit" type="submit">
</div>
<ul id="hospitalinfo" style="display: none;"></ul>
</body>
</html>
    Code (markup):
    Again, it could probably be improved, but it's 05:30 here, and I'm tired :)
     
    PoPSiCLe, Feb 8, 2014 IP