Dynamically build html select from json + select option

Question

I have a jquery ajax call that will be pulling back json data such as this:

{  
   "Title":"The Office",
   "Season":"1",
   "totalSeasons":"9",
   "Episodes":[  
      {  
         "Title":"Pilot",
         "Released":"2005-03-24",
         "Episode":"1",
         "imdbRating":"7.6",
         "imdbID":"tt0664521"
      },
      {  
         "Title":"Diversity Day",
         "Released":"2005-03-29",
         "Episode":"2",
         "imdbRating":"8.3",
         "imdbID":"tt0664514"
      },
      {  
         "Title":"Health Care",
         "Released":"2005-04-05",
         "Episode":"3",
         "imdbRating":"7.9",
         "imdbID":"tt0664517"
      },
   ],
   "Response":"True"
}

From that data I wish to build an html select bound to it. For example:

<select>
  <option value="tt0664521">Pilot - Episode 1</option>
  <option value="tt0664514">Diversity Day - Episode 2</option>
  <option value="tt0664517">Health Care - Episode 3</option>
</select>

My js code will often (though not always) know the episode number already, which maps to the "Episode" data element in the json. When I know the episode, I want to pre-select that option within the select. If I don't know it, no pre-select. In all cases I want to create an option for each record. This has to happen dynamically in the js because I won't be able to get back this json until the user enters some data.

I have the ajax calls all working, I just need to know how to dynamically add options to my select bound to that data, and then to auto-select an option when I know the episode.

A pure jquery solution would be ideal, but I'm happy with just js also.

How is it done? (And thank you!)

Note: This is not a duplicate of this post. In my question here, binding to json data is a key piece of the puzzle.

https://stackoverflow.com/questions/3446069/populate-dropdown-select-with-array-using-jquery — Garfield, Sep 21 '17 at 13:52
Possible duplicate of [Populate dropdown select with array using jQuery](https://stackoverflow.com/questions/3446069/populate-dropdown-select-with-array-using-jquery) — GolezTrol, Sep 21 '17 at 14:08
GolezTrol: The other post has nothing to do with binding to json data, as this does. — HerrimanCoder, Sep 21 '17 at 15:26

score 0 · Answer 1 · answered Sep 21 '17 at 13:57

You have to use $.each method in combination with append.

$.each method represents a generic iterator function which accepts a callback function.

append is used to insert content, specified by the parameter, to the end of each element in the set of matched elements.

Also, I used map method in order to create select options array.

let selectOptions=obj.Episodes.map(function(episode){
    return {"value": episode.imdbID,"name":episode.Title+' - '+' Episode '+episode.Episode};
});

Here is the entire solution:

let obj={  
   "Title":"The Office",
   "Season":"1",
   "totalSeasons":"9",
   "Episodes":[  
      {  
         "Title":"Pilot",
         "Released":"2005-03-24",
         "Episode":"1",
         "imdbRating":"7.6",
         "imdbID":"tt0664521"
      },
      {  
         "Title":"Diversity Day",
         "Released":"2005-03-29",
         "Episode":"2",
         "imdbRating":"8.3",
         "imdbID":"tt0664514"
      },
      {  
         "Title":"Health Care",
         "Released":"2005-04-05",
         "Episode":"3",
         "imdbRating":"7.9",
         "imdbID":"tt0664517"
      },
   ],
   "Response":"True"
}
let selectOptions=obj.Episodes.map(function(episode){
  return {"value": episode.imdbID,"name":episode.Title+' - '+' Episode '+episode.Episode};
});
let select=$('<select>');
$.each(selectOptions,function(index, item){
  select.append('<option value="'+item.value+'">'+item.name+'</option>');
});
$('body').append(select);

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

Thank you for the detailed answer. I'm sure it would work great, but the answer I selected was a little more straightforward for me to implement. — HerrimanCoder, Sep 21 '17 at 15:49

score 0 · Answer 2 · answered Sep 21 '17 at 13:59

For creating the list specifically:

//Create an empty array.
var list = [];

//Add each option from JSON to the list array
$.each(jsonData, function (key, value) {
    list.push(key);
});

//For every option in the list, add it into the select menu
$.each(list, function (key, value) {
    $("#my-select-element").append("<option value='" + value + "'>" + value + "</option>");
});

score 0 · Accepted Answer · answered Sep 21 '17 at 14:01

Javascript ES5 solution. Do not forget to give an id to your select ("my_select"):

var data = {
  "Title": "The Office",
  "Episodes": [
    {
      "Title": "Pilot",
      "Episode": "1",
      "imdbID": "tt0664521",
      //...
    },
    //...
  ]
};

var list = data['Episodes'];
var sel = document.getElementById('my_select');
for(var i = 0; i < list.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = list[i]['Title'] + ' - Episode ' + list[i]['Episode'];
    opt.value = list[i]['imdbID'];
    sel.appendChild(opt);
}

Dynamically build html select from json + select option

3 Answers3