Getting json data for dropdown list using jquery not working

Question

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.

It seems to work if I use json data with { "wf": at the top and a closing parenthesis at the bottom, but he go api is not delivering it in that manner. It has no open/close parenthesis with a name (e.g., "wf"). I am not sure how to modify the getJSON and each loop to work without those things. — archcutbank
– archcutbank, Commented May 30, 2018 at 17:13
Please take a look at my answer. JSON does not need {} at the start and end — Luca Kiebel
– Luca Kiebel, Commented May 30, 2018 at 17:14
I see now from your comments that this is not an object. Those are some great ways to address. It is kind of interesting to wonder whether there is a point to use map or not or just do the forEach. Is one way more efficient than another I wonder. — archcutbank
– archcutbank, Commented May 30, 2018 at 17:18

Luca Kiebel · Accepted Answer · 2018-05-30 17:09:53Z

2

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);
        });
      }); 
   }); 
}

answered May 30, 2018 at 17:09

Luca Kiebel

10.1k7 gold badges34 silver badges47 bronze badges

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

1 Comment

archcutbank Over a year ago

This would have been cool with easy adjustment to existing code, but it did not populate the dropdown for some reason.

Eliellel · Accepted Answer · 2018-05-30 17:04:17Z

0

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>

answered May 30, 2018 at 17:04

Eliellel

1,4561 gold badge11 silver badges15 bronze badges

Collectives™ on Stack Overflow

Getting json data for dropdown list using jquery not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related