0

Updated code:

http://jsfiddle.net/rfKcM/25/

Thanks to some great help the query is now being displayed in a select menu. Now I just need help figuring out how to 'use' the objects that correspond to the selected HosName in .hospital. For example: How could I implement:

$('.hopeful').html(SPval);

where SPval is a JSON value that corresponds to the HosName selection made in .hospital.

From my original post:

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 selected in the previous step
  3. ALL HosName values that match the selected 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.

New code:

<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>
</div>
<select class="hospital"></select>
<p class="hopeful"></p>

var SPval;
var json = {
        "hospitals": {

    };
    $(function () {
        $("select[name='state']").change(function () {
            var searchName = $("select[name='state']").val();
            var matches = $.grep(json.hospitals.facility, function (v) {
                return v.State == searchName;
            })
            var name = $.map(matches, function (v) {
                    return  "<option data-data='" + JSON.stringify( v )+ "'>" + v.HosName + "</option>"
            }).join("")
            $('.hospital').html(name);
            $('.hopeful').html(SPval);
        });
    });
Improve this question
1
  • Where did you get this hospital list Commented Jan 21, 2015 at 11:06

2 Answers 2

Reset to default
1

You way of approach is right, but it is missing one thing.

$.each(json.hospitals.facility, function(i, v) {
        if (v.State == searchName) {
            name = v.HosName;
            return;
        }
    });

Here on each iteration if the state name is equal to searchName, the value will be assigned to name, on next iteration name` is overwritten again till the loop exists. So name variable always has the last one and hence it is showing only one match.

So create a global array like

var name = [];

then in iteration push each values to it like

name.push(v.HosName);

JSFiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Thanks for your help, Praveen. This was useful, but I did need the data in a list. Do you know how to make the listed data link back to the related JSON values?
@TechnoCripple can you elaborate little more?
The HosName values that come from the JSON file need to be presented in a UL as links. When a user chooses a certain hospital its related JSON values (SPval,Hospitalval, etc.) will then be available to use in the application. Im using the JSON data locally as a DB because I cannot use PHP/MySQL due to no network connectivity. The application must run locally and thus everything must reside inside of the application.
@TechnoCripple ok. I think you're trying to make the hosp name as a tag. Am I right?
Thanks Praveen - Can you have a look at my updated post?
|
1

You are returning the first value whenever it matches, instead add all the matched values to array and finally append to the div

here is the correct code:

$("input[type='submit']").click(function() {
    var searchName = $("select[name='state']").val();
    $('.hospital').html('<ul>')
    $.each(json.hospitals.facility, function(i, v) {
        if (v.State == searchName) {
            $('.hospital').append('<li>'+v.HosName+'</li>');
        }
    });
     $('.hospital').append('</ul>');
    });

DEMO

Improve this answer

4 Comments

This is what I need to make the list. Thanks for your help. How would I now make the listed names links to the values in the JSON data?
what do you mean by linking to json data?
In the UL each hospital name needs to be an href that references the corresponding data in the JSON. For example: If "ORLANDO REGIONAL MEDICAL CENTER" is in the UL, a user must be able to click on this hospital and its corresponding values in the JSON data be used in the application. Using the same hospital as an example, it also has related values (SPval,Hospitalval) that will be used later in the application. In this application the JSON data works just like a database and users will be presented with a list of hospitals to choose from to use in the application.
It looks like $('.hospital').append('<li><a href="'+v.HosName+'">'+name+'</a></li>'); will make the link I need, but how do I make it link to each specific key?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.