动态从json +选择选项构建HTML选择

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.

Answer 1

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> 

Answer 2

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

Answer 3

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