CODEWITHSUNDEEP
phpjavascripthtmljsongetjson
rrackow
rrackow

Reputation: 51

How to Iterating through an JSON Object and append an HTML input menu/list select

I've searched on here and tried several solutions offered with no luck. I have a html input menu/list select that I want to populate with options after the user inputs into an input text box. Once the user enters the parameter I want javascript to call a php page and return an array/object with the menu options.

sample of my html:

<select name="celestrials" id="celestrials" onFocus="updateCelestrials()">
<option value="Choose...">n/a</option>
</select>

my javascript in the html file(in same folder as the json.php file used in var myURL below):

function updateCelestrials () {
    var orbs = document.getElementById('systemNames').value;

    var myURL = "http://www.domain.com/folder/json.php?solarSystemName="+orbs;

    $.getJSON(myURL, function(data) {
      $.each(data, function() { 
        $("<option value='" + data + "'>" + data + "</option>").appendTo("#celestrials");
      });
    });
}

my array returned by php:

echo json_encode($arrayItems, JSON_FORCE_OBJECT);

and finally my retuned array/object trimmed down for summary:

{"0":"YHN-3K I","1":"YHN-3K II","2":"YHN-3K III"}

Full array:

{"0":"YHN-3K I","1":"YHN-3K II","2":"YHN-3K III","3":"YHN-3K IV","4":"YHN-3K IV - Moon 1","5":"YHN-3K V","6":"YHN-3K VI","7":"YHN-3K VI - Moon 1","8":"YHN-3K VII","9":"YHN-3K VIII","10":"YHN-3K VIII - Moon 1","11":"YHN-3K VIII - Moon 2","12":"YHN-3K VIII - Moon 3","13":"YHN-3K VIII - Moon 4","14":"YHN-3K VIII - Moon 5","15":"YHN-3K VIII - Moon 6","16":"YHN-3K VIII - Moon 7","17":"YHN-3K VIII - Moon 8","18":"YHN-3K VIII - Moon 9","19":"YHN-3K VIII - Moon 10","20":"YHN-3K VIII - Moon 11","21":"YHN-3K VIII - Moon 12","22":"YHN-3K IX","23":"YHN-3K IX - Moon 1","24":"YHN-3K IX - Moon 2","25":"YHN-3K IX - Moon 3","26":"YHN-3K IX - Moon 4","27":"YHN-3K IX - Moon 5","28":"YHN-3K IX - Moon 6","29":"YHN-3K IX - Moon 7","30":"YHN-3K IX - Moon 8","31":"YHN-3K IX - Moon 9","32":"YHN-3K IX - Moon 10","33":"YHN-3K IX - Moon 11","34":"YHN-3K IX - Moon 12","35":"YHN-3K IX - Moon 13","36":"YHN-3K IX - Moon 14","37":"YHN-3K IX - Moon 15","38":"YHN-3K IX - Moon 16","39":"YHN-3K IX - Moon 17","40":"YHN-3K IX - Moon 18","41":"YHN-3K IX - Moon 19","42":"YHN-3K IX - Moon 20","43":"YHN-3K IX - Moon 21","44":"YHN-3K X","45":"YHN-3K X - Moon 1","46":"YHN-3K X - Moon 2","47":"YHN-3K X - Moon 3","48":"YHN-3K X - Moon 4","49":"YHN-3K X - Moon 5","50":"YHN-3K X - Moon 6","51":"YHN-3K X - Moon 7","52":"YHN-3K X - Moon 8","53":"YHN-3K X - Moon 9","54":"YHN-3K X - Moon 10","55":"YHN-3K X - Moon 11","56":"YHN-3K X - Moon 12","57":"YHN-3K X - Moon 13","58":"YHN-3K X - Moon 14","59":"YHN-3K X - Moon 15","60":"YHN-3K X - Moon 16","61":"YHN-3K X - Moon 17","62":"YHN-3K X - Moon 18","63":"YHN-3K X - Moon 19","64":"YHN-3K XI","65":"YHN-3K XI - Moon 1","66":"YHN-3K XI - Moon 2","67":"YHN-3K XI - Moon 3","68":"YHN-3K XI - Moon 4","69":"YHN-3K XI - Moon 5","70":"YHN-3K XI - Moon 6","71":"YHN-3K XI - Moon 7","72":"YHN-3K XI - Moon 8","73":"YHN-3K XII","74":"YHN-3K XII - Moon 1","75":"YHN-3K XII - Moon 2","76":"YHN-3K XII - Moon 3","77":"YHN-3K XII - Moon 4","78":"YHN-3K XII - Moon 5","79":"YHN-3K XII - Moon 6","80":"YHN-3K XII - Moon 7","81":"YHN-3K XII - Moon 8","82":"YHN-3K XII - Moon 9","83":"YHN-3K XII - Moon 10","84":"YHN-3K XII - Moon 11","85":"YHN-3K XII - Moon 12","86":"YHN-3K XII - Moon 13","87":"YHN-3K XII - Moon 14","88":"YHN-3K XII - Moon 15","89":"YHN-3K XII - Moon 16","90":"YHN-3K XII - Moon 17","91":"YHN-3K XII - Moon 18","92":"YHN-3K XII - Moon 19","93":"YHN-3K XII - Moon 20","94":"YHN-3K XIII","95":"YHN-3K XIII - Moon 1","96":"YHN-3K XIII - Moon 2","97":"YHN-3K XIII - Moon 3"}

Upvotes: 0

Views: 1762

Answers (3)

Jeff Noel
Jeff Noel

Reputation: 7618

Explanation

Insert this instead of data when you create your <option> DOMElements.

The error lies in your $.each() loop, where you tend to try to put the value of the whole data object in your DOMElement everytime you loop.

Try to put only one value instead of the whole object.

JQuery - Live Demo

 $.each(data, function() { 
     $("<option value='" + this + "'>" + this + "</option>").appendTo("#celestrials");
 });

Pure JavaScript loop - Live Demo

Note: I'm not using the .length property since the received object might not necessarily have one. It depends whether it is in a valid format or not. As is, it does not seem to be a JSON Object.

for(var i=0; i<Object.keys(data).length; i++) {
    document.querySelector('#celestrials').innerHTML += "<option value='" + data[i] + "'>" + data[i] + "</option>"
}

SELECT

Upvotes: 2

Artem L
Artem L

Reputation: 10253

function updateCelestrials () {
    // If you are using jQuery - use jQuery.
    var orbs = $('#systemNames').val();

    var myURL = "http://www.domain.com/folder/json.php?solarSystemName=" 
                    // make sure you escape user's input
                    + encodeURIComponent(orbs); 

    $.getJSON(myURL, function(data) {
      // make less DOM actions by storing in local variable 
      // and appending later on
      var items = '';
      $.each(data, function(index, value) { 
        items += "<option value='" + index + "'>" + value + "</option>";
      });
      $("#celestrials").html(items); // beware. this will replace all options :)

      // also avoid using jQuery for no reason when creating 
      // elements with $([html here]).appendTo
    });
}

but I'd rather replace $.each with 

for (var index in data) {
   if (data.hasOwnProperty(index)) { // make sure you are using your properties
       items += "<option value='" + index + "'>" + data[index] + "</option>";
   }
}

Upvotes: 0

xmarston
xmarston

Reputation: 883

See this fiddle: http://jsfiddle.net/gCFM9/

I suggest this option:

for(var i in data) {
   data[i] //each value of i position
}

Upvotes: 0

Related Questions