loop through array using split() to separate items by commas

Question

I have trouble splitting the values of Months and putting each values into a select box using .each. I used the following code and split() didn't have any effect at all. I got a select box with two options but the values weren't separated into each option.

JSON data: [{"Title":"DataTitle","Months":"January,February","Location":"Africa"}]

Code:

var item_html ='';
$.ajax({
    url: "http://www.jsonfile.com/json",
    success: function (data) {
     item_html = pData(feedformat,data);
     $('.displayarea').append(item_html).slideDown();
    },
  error: function ()        
});

function pData(type, data) { 
     switch(type) {
       case 'Case1':
          item_html += '<h3>'+item.Title+'</h3>;'

          if(item.Months.length !== 0) {
               var Months = item.Months.split(",");
               item_html += '<select>';
               $.each(Months,function(i){
                 item_html += '<option>'+Months+'</option>';
               });
               item_html += '</select>';
          }

          item_html += '<h3>'+item.Location+'</h3>';

The result I got with the code above was:

<select><option>January,February</option><option>January,February</option></select>

What I'm looking for is

<select><option>January</option><option>February</option></select>

Any help would be appreciated.

Answer 1

Try this:

$.each(Months,function(i){
    item_html += '<option>'+Months[i]+'</option>';
});

instead of

$.each(Months,function(i){
    item_html += '<option>'+Months+'</option>';
});

Another thing is your JSON item is an array object.

item =[{"Title":"DataTitle","Months":"January,February","Location":"Africa"}];

item_html ="";
item_html += '<h3>'+item[0].Title+'</h3>';
if(item[0].Months.length !== 0) {
    var Months = item[0].Months.split(",");
    item_html += '<select>';
    $.each(Months,function(i){
       item_html += '<option>'+ Months[i] +'</option>';
    });
    //or
    //$.each(Months,function(i, month){
    //   item_html += '<option>'+ month +'</option>';
    //});
    item_html += '</select>';
 }
 item_html += '<h3>'+item[0].Location+'</h3>';

$('.displayarea').append(item_html).slideDown();

Here is the Demo

Answer 2

Change this:

        $.each(Months,function(i){
             item_html += '<option>'+Months+'</option>';
        });

to:

        $.each(Months,function(i, month){
             item_html += '<option>'+month+'</option>';
        });

You're putting all the months in each option, not just the current month from the iteration.

Answer 3

the solution...

function pData(type, data) { 
     switch(type) {
       case 'Case1':
          item_html += '<h3>'+item.Title+'</h3>;'

          if(item.Months.length !== 0) {
               var Months = item.Months.split(",");
               item_html += '<select>';
               $.each(Months,function(i){
                 item_html += '<option>'+Months.split(",")[i]+'</option>';
               });
               item_html += '</select>';
          }

          item_html += '<h3>'+item.Location+'</h3>';

Answer 4

Try this :-

 var Months = item.Months.split(",");
 item_html += '<select>';
 $.each(Months,function(i){
   item_html += '<option>'+ Months[i] +'</option>';
 });
 item_html += '</select>';

Months this is an array object. So you need to get current array item from the iteration.

Working Example