Select option from API call

Question

API in my example returns id, name pair

  <categories>
   <category id="5" name="Bollywood"/>
   <category id="484" name="International"/>
   ...
  </categories>

I am trying to have a dropdown, allowing user to select from the options

 <select class="action" id="categoryEvent" onchange="change(value)" style="display: block">
   <script type="text/javascript">
      var url = "http://api.hungama.com/metroapp/categories.php?format=json";
      var id,name;
      var data = JSON.parse(url);
      data.category.forEach(function (content) {
   </script>
    <option value="id">name</option>  //id, name from api
   <script type="text/javascript">
        }
   </script>

What am I doing wrong ?

<script type="text/javascript"> }</script>.... this can't be right. Script elements must have syntactically valid code on their own. So in this case, both of your script elements are ignored. Also, JSON.parse parses a string, it doesn't make any requests. — Esailija
– Esailija, Commented Jun 24, 2012 at 20:42
I want to use hungama API in my app. Can you tell me the procedure to get the API Access. — Vikrant_Dev
– Vikrant_Dev, Commented Jul 23, 2014 at 6:55

Derek 朕會功夫 · Accepted Answer · 2012-06-24 21:00:19Z

2

Looks like this is what you want:

<select class="action" id="categoryEvent" onchange="change(value)"></select>
<script type="text/javascript">
    var url = "http://api.hungama.com/metroapp/categories.php?format=json";
    var id, name;
    var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var res = JSON.parse(xhr.responseText),
                data = res.category;
            for(var i = 0; i < data.length; i++) {
                var ele = document.createElement("option");
                ele.value = data[i].id;
                ele.innerHTML = data[i].name;
                document.getElementById("categoryEvent").appendChild(ele);
            }
        }
    }
    xhr.open("GET", url, true);
    xhr.send();
</script>

edited Jun 24, 2012 at 21:00

answered Jun 24, 2012 at 20:51

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

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

4 Comments

Esailija Over a year ago

JSON.parse("http://api.hungama.com/metroapp/categories.php?format=json") is not what anyone wants :P

Derek 朕會功夫 Over a year ago

I don't really what he's doing there... looks like a AJAX call.

Esailija Over a year ago

He wants to make a JSONP request there and then deal with the result, which requires some more code :P You don't just JSON.parse some url and have it work. It throws a syntax error... The uri doesn't even respond with JSONP and doesn't have CORS headers either. So game over pretty much if that's not his domain.

Some Java Guy Over a year ago

@Derek Thanks ! Exactly what I have asked for. Esailija,Derek :P sorry it is was silly question.

jorgebg · Accepted Answer · 2012-06-24 20:50:49Z

0

Inside an html document, you should declare the select html element on one side and the script element on the other.

For example:

<select class="action" id="categoryEvent" onchange="change(value)">
</select>

<script type="text/javascript">
//manipulate the select
var select = document.getElementById("categoryEvent");
var newOption = document.createElement("option");
select.appendChild(newOption);
</script>

edited Jun 24, 2012 at 20:50

answered Jun 24, 2012 at 20:45

jorgebg

6,6201 gold badge25 silver badges33 bronze badges

Collectives™ on Stack Overflow

Select option from API call

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related