JSON javaScript form

added

planNumber.push("");

Select allOpen in new window

to line 565

https://jsfiddle.net/HainKurt/km91869q/

@Julian

The second part of your request would be to add the following to your document ready

I guess Contract type should come from json

var jsonFile =     {"Result": {
"Contracts": [
{
"Plan": {
"Identification": {
"PlanNumber": "8930-3o3pp"
},
"Info": {
"Title": "chjdj",
"ProjectNumber": "PROJ123",
"StationCode": "STATIONCD1",
"ContractType": "Commodities",
"ActionType": "chvj-PLAN"
},

Select allOpen in new window

which I used in my solution above...

@HK - thank you for the clarification

However I would do it like this. I would associate the contractType with the option and retrieve that on the change event rather than iterating over the data set each time

function getPlanNumbers(projNumber)
{
  $("#planNumber").empty();
  
  // CREATE DEFAULT OPTION HERE
  $('#planNumber').append($('<option>').html('-- Select Project--'));
  
  // USE map() TO ITERATE OVER JSON FILE
  var results = jsonFile.Result.Contracts.map(x => {
    // IF projNumber MATCH THEN APPEND <option>
    if (x.Plan.Info.ProjectNumber == projNumber) {
      var opt = $('<option>')
        .html(x.Plan.Identification.PlanNumber)

        // ASSOCIATE THE contractType WITH THE <option>
        .data('contractType', x.Plan.Info.ContractType);
      
      $("#planNumber").append(opt);
    }
  });
}

Select allOpen in new window

Then to set the contractType

$("#planNumber").on("change", function(){
   var obj = $(this).find('option:selected');
   $('#contractType').html(obj.data('contractType'));     
});

Select allOpen in new window

@Julian

I would associate the contractType with the option and retrieve that on the change event rather than iterating over the data set each time

I thought the same thing, but I was a bit lazy :) Also, I was trying to minimize the change in original code... just addition if possible...

But, here is the code adjusted version and using the same method you used in your code...
ie, adding "data-ContractType='....'" to the option and use that one on change...

function getPlanNumbers(projNumber) {
  $("#planNumber").empty();

  var planNumber = [];
  var y = 0;
  var pNumOption = document.getElementById("planNumber");
  planNumber.push(["", ""]);
  for (var x = 0; x < jsonFile.Result.Contracts.length; x++) {
    //alert(jsonFile.Result.Contracts[x].Plan.Info.ProjectNumber);
    if (jsonFile.Result.Contracts[x].Plan.Info.ProjectNumber === projNumber) {
      planNumber.push([jsonFile.Result.Contracts[x].Plan.Identification.PlanNumber, jsonFile.Result.Contracts[x].Plan.Info.ContractType]);
    } else {
      y++;
    }
  }
  if (jsonFile.Result.Contracts.length == y) {
    alert("Project Number '" + projNumber + "' does not exist.");
  } else {
    console.log(planNumber)
    for (var i = 0; i < planNumber.length; i++) {
      var option = $('<option>');

      option.val(planNumber[i][0]);
      option.html(planNumber[i][0]);
      option.data("ContractType", planNumber[i][1]);
      console.log("adding: " + planNumber[i][0] + " - " + planNumber[i][1]);
      console.log(option);
      $("#planNumber").append(option);
    }

  }

  // alert("populate dropdown");
}

$("#projectNumber").on("change", function() {
  var projectNumber = $("#projectNumber").val();
  //alert("projectNumber: " + projectNumber);
  getPlanNumbers(projectNumber);
});

$("#planNumber").on("change", function() {
  var projectNumber = $("#projectNumber").val();
  //alert("projectNumber: " + projectNumber);
  var planNumber = $("#planNumber").val();
  //alert("planNumber: " + planNumber);
  var ct = $("#planNumber option:selected").data('ContractType');
  console.log($("#planNumber option:selected"))
  $("#contractType").html(ct);
  //getPlanNumbers(projectNumber);
});

Select allOpen in new window

https://jsfiddle.net/HainKurt/phs3fm8y/

Both codes work great in jsfidel but for some reason,  I get syntax error on Julian's code on the following line:

  var results = jsonFile.Result.Contracts.map(x => {

Select allOpen in new window

I get the error when I try to actually add it to my test site.  Trying Hainkurt's now

Both codes work great in jsfidel but for some reason,  I get syntax error on Julian's code on the following line:

works fine...

see

https://jsfiddle.net/HainKurt/73m22y9t/
https://jsfiddle.net/HainKurt/z6f33doy/

The server makes no difference to the map() function as this runs in your browser - so you probably have a typo. Can you post your full code please

As I'm looking at both codes and trying to understand while googling, I get stumped as to both codes reference 'contractType'.  I don't see a reference to it like so  $('#contractType').  

Ex: Julian's code
How does that associate?  Is that a new way to do $('#contractType')?

      // ASSOCIATE THE contractType WITH THE <option>
      .data('contractType', x.Plan.Info.ContractType);

Select allOpen in new window

HainKurt's code

var ct = $("#planNumber option:selected").data('ContractType');  //<-- This confused me.  .data()??
  console.log($("#planNumber option:selected"))
  $("#contractType").html(ct);

Select allOpen in new window

they add data attribute to option

<option data-contractType="Contributor">vat-3o3pp</option>

Select allOpen in new window

and when selected, we get it and put into html...

.data()

Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

https://api.jquery.com/data/

How does that associate?  Is that a new way to do $('#contractType')?

No you are mixing up selecting an element with adding properties to an element.

What I am doing in my code here

.data('contractType', x.Plan.Info.ContractType);

Select allOpen in new window

Is as we iterate over the JSON structure finding our Project Plan Numbers we might as well grab the contractType while we are there.

We now add this to the element using the HTML5 dataset functionality (implemented in jQuery using the data() method).

What this does is associates a custom data value with the element which will follow the element wherever it goes.

When we get to the part where you actually select a projectPlan from the dropdown - the contratType is already there - attached to the option it belongs to - you simply retrieve it and push it into the element you want to display it.

EDIT
Remember, in JavaScript you can arbitrarily add properties (and methods) to objects just by declaring and assigning them. HTML elements are represented as JavaScript objects in the DOM so you can arbitrarily add properties (or functions) to elements and they will become part of the object in the DOM tree - you can then access those values at any time. This allows you to associate meta data with elements that you might need when that element is selected or acted upon.

That makes a lot of sense.  It just gave me an idea.  I'm working on how to capture the index of the selected plan number.
Did you see my inbox message?

The index - would that be the index relative to the <option> list or the index in the JSON structure?

If the latter then you can use the same principle as for the contractType to attach the index to the <option> and then retrieve it when you need it.

https://www.experts-exchange.com/questions/29062011/Retrieve-index-value-from-JSON.html