append select option value and text using json object

Question

I have receive json object form server like below one,

{"locations": [{"locationCode": "Branch 1","locationName": "BR-001"},

               {"locationCode": "Branch 2","locationName": "BR-002"},

               {"locationCode": "Branch 3","locationName": "BR-003"}
              ]}

then I need to append locationCode for value and locationName for the text

<option value="locationCode">locationName</option>

I have tried this one but couldn't do it

    var location = data.locations;
        $.each(location, function (key, value) {
        $('#newLocation')
          .append($("<option></option>")
          .attr("value", key)
          .text(value));
        });

vikrant singh · Accepted Answer · 2014-10-30 04:34:01Z

3

You are iterating over array i.e. locations not on map so change your code to

var location = data.locations;
        $.each(location, function (index) {
        $('#newLocation')
          .append($("<option></option>")
          .attr("value", location[index].locationCode)
          .text(location[index].locationName));
        });

Update:-

DEMO

answered Oct 30, 2014 at 4:34

vikrant singh

2,1111 gold badge12 silver badges16 bronze badges

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

Comments

Oki E. Rinaldi · Accepted Answer · 2014-10-30 04:46:47Z

1

Try this :

var locations = 
  [
    {"locationCode": "Branch 1","locationName": "BR-001"},

    {"locationCode": "Branch 2","locationName": "BR-002"},

    {"locationCode": "Branch 3","locationName": "BR-003"}
  ];


for (var i=0;i<locations.length;i++){
    var value = locations[i].locationCode;
    var text  = locations[i].locationName;
    var opt = "<option value='"+value+"' >"+text+"</option>";
    $('#newLocation').append(opt);
}

OR :

var loc = new Object();
var loc = {"locations": 
  [
    {"locationCode": "Branch 1","locationName": "BR-001"},

    {"locationCode": "Branch 2","locationName": "BR-002"},

    {"locationCode": "Branch 3","locationName": "BR-003"}
  ]
};
for (var i=0;i<loc.locations.length;i++){
    var value = loc.locations[i].locationCode;
    var text  = loc.locations[i].locationName;
    var opt = "<option value='"+value+"' >"+text+"</option>";
    $('#newLocation').append(opt);
}

edited Oct 30, 2014 at 4:46

answered Oct 30, 2014 at 4:27

Oki E. Rinaldi

1,8732 gold badges22 silver badges33 bronze badges

1 Comment

mickmackusa Over a year ago

Try this solutions are low-value on Stackoverflow because they do very little to educate/empower thousands of future researchers. Please improve your answer to include how your solution works and why it is a good idea.

Collectives™ on Stack Overflow

append select option value and text using json object

2 Answers 2

DEMO

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related