CODEWITHSUNDEEP
javascriptjqueryjson
archcutbank
archcutbank

Reputation: 479

Getting json data for dropdown list using jquery not working

Looking for information on how to read a json from an api call we have to populate a dropdown list. 

[
   {
       "name": "jira",
       "description": "The default JIRA workflow."
   },
  {
       "name": "Business Review and Build",
       "description": "The default JIRA workflow starting point."
  }
]

The json does not seem to have opening and closing { .. }. It looks basically like what I pasted in above. I guess it is like an anonymous array of two values, name, and description. It is retrieved via a url that has a go script running that outputs this json.

I tried to use jquery, but something like this does not display any options.

function populateWF() {
    let dropdown = $('#projWF');
    dropdown.empty();
    dropdown.append('<option selected="true" disabled>Choose a workflow');
    dropdown.prop('selectedIndex', 0);

    const url = 'http://esjira01d.internal.company.com:8088/workflows';

    $(document).ready(function() {
       $.getJSON(url, function(obj) {
         $(obj).each(function() {
             dropdown.append($('<option>/option>')
             .val(this.Name).html(this.Description));
        }); #each
      }); #getJSON
   }); #ready
}

The option box does dispaly and it does say the mesage about Choose a workflow. It just seems to bomb at the actual getJSON.

It does not display anything in the drop down. If I go to the url, it shows what appears to be json. If I go to jlint and type in what I think it is returning, it says it is valid.

Upvotes: 0

Views: 1125

Answers (2)

Luca Kiebel
Luca Kiebel

Reputation: 10096

The data you get back is a normal Array of Objects encoded as JSON. To get the values, you can use a simple for-loop or the .forEach() function:

let obj = '[{"name":"jira","description":"The default JIRA workflow."},{"name":"Business Review and Build","description":"The default JIRA workflow starting point."}]';

obj = JSON.parse(obj);

let dropdown = $("#dropdown");

obj.forEach(function(e) {
  let option = $('<option></option>');
  option.val(e.name);
  option.html(e.description);
  dropdown.append(option);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown"></select>

function populateWF() {
    let dropdown = $('#projWF');
    dropdown.empty();
    dropdown.append('<option selected="true" disabled>Choose a workflow');
    dropdown.prop('selectedIndex', 0);

    const url = 'http://esjira01d.internal.company.com:8088/workflows';

    $(document).ready(function() {
       $.getJSON(url, function(obj) {
        obj.forEach(function(e) {
          let option = $('<option></option>');
          option.val(e.name);
          option.html(e.description);
          dropdown.append(option);
        });
      }); 
   }); 
}

Upvotes: 2

Eliellel
Eliellel

Reputation: 1446

The result you received is an array instead of object. You can use .map() function to create the options.

var result = [
   {
       "name": "jira",
       "description": "The default JIRA workflow."
   },
  {
       "name": "Business Review and Build",
       "description": "The default JIRA workflow starting point."
  }
]

 $(document).ready(function() {
     
     result.map(function(item) {
         $("select").append($('<option></option>').val(item.name).html(item.description));
     }); 

}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>

Upvotes: 0

Related Questions