2

I am new to html and java script. I try to create a button and get the JSON back from a URL and add the result to a drop down list. After the Nodejs server is up and running, if you enter http://localhost:8080/restapi/test/projects, it will return {example} as the result.

So there are couple questions here: 1) for some reason, the button click is not working inside jquery 2) $.getJSON can only used inside jquery, is there any other way to obtain JSON from a URL respond?

$(document).ready(function () {
    $(document).on('click', '#button1', function() {
        var selector = document.getElementById('selector');
        var api = 'http://localhost:8080/restapi/test/projects';
        $.getJSON(api, function (data) {
            $.each(data, function (index, d) {
                var option = document.createElement('option');
                option = d;
                selector.add(option);
            });
        })
    })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id='first'>
        <h1>project options</h1>
        <button id='button1'>Get Projects</button>
</div>
<div id='second'>
        <h2>all projects</h2>
        Projects: <select id='selector'></select>
</div>

Thanks for any tips.

Improve this question
5
  • You can use Ajax too for getting the JSON response from the URL Commented Apr 22, 2016 at 4:23
  • 1
    You certainly don't need to use jQuery (or any other library) to do anything in JS, including making web requests. However, you'll find that libraries make many things much simpler, since the work has already been done for you, and there is no reason to re-invent the wheel. If you would like to make AJAX requests without jQuery, take a look at the built-in XMLHttpRequest object. It's what jQuery uses underneath all the simplicity :) Commented Apr 22, 2016 at 4:28
  • The button click is working , yu can check it by placing a alert or console in that click function. Commented Apr 22, 2016 at 4:28
  • May be you have multiple ID in somewhere else in the code Commented Apr 22, 2016 at 4:37
  • @MatthewHerbst Thanks for the tips. I am looking at the XMLHttpRequest and trying to understand. It seems like the respond is giving either TEXT or XML data back. If I expect to get a JSON object back, should not I still have to use jQuery? I am very new and still learning. Commented Apr 22, 2016 at 21:14

4 Answers 4

Reset to default
1

{example} is not valid JSON. Try {"1":"example"}

Also, option = d; will overwrite your option. Try option.value = d;

Here is a cleaned up version for you :

$(document).ready(function () {
    $('#button1').click(function() {
        var selector = document.getElementById('selector');
        var api = 'http://localhost:8080/restapi/test/projects';
        $.getJSON(api, {"1":"example","2":"other example"},function (data) {
            $.each(data, function (index, d) {
                selector.options[selector.options.length] = new Option(d,d);
            });
        });
    });
});

Fiddle: https://jsfiddle.net/trex005/65hc1srh/

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

2 Comments

Hi trex, thanks for your answer. I just place your codes into my NetBeans IDE8.1 HTML5 project, but the results after I click the button are not adding to the drop down. Do you have any idea? I am debugging on Google Chrome and have also tried IE as well. The example you have in Fiddle is exactly what I want to achieve. Do you know why it needs the type in the java script to be onLoad and how should I implement that? I am using the jquery provided by the NetBeans when I generate a new project. Thank you a lot.
Holy... I got it working in Eclipse but not in NetBeans. Thanks trex, your codes are working exactly like what what I want it to be.
0

Try the following:

$(document).ready(function () {
    $('body').on('click', '#button1', function() {//this sintax is used most for dynamically added elements
        var selector = $('#selector');
        var api = 'http://localhost:8080/restapi/test/projects';
        $.getJSON(api, function (data) {
            $.each(data, function (index, d) {
                var option ='<option>'+d+'</option>';
                selector.append(option);
            });
        })
    })
})
Improve this answer

Comments

0

the click button is actually working... maybe there's a problem with the response. you can check the network log by opening the inspector. to open the inspector on chrome use right click and then 'inspect' or 'inspect element'.

this is what happened when i click the button.

for the second question you can make an AJAX request using the XMLHttpRequest object.

Improve this answer

Comments

0

It will not worked because you did not do the exact thing clicked.All you have done is that $(document).click() which don't know what elements or document to click.

You should have used 

 $('#button1').on('click',function() {

        });

for button click which tells that it will response only when the button is clicked.For your better understanding I am giving the code snippet

$(document).ready(function () {
    $('#button1').on('click',function() {
        var selector = document.getElementById('selector');
        var api = 'http://localhost:8080/restapi/test/projects';
        $.getJSON(api, function (data) {
            $.each(data, function (index, d) {
                var option = document.createElement('option');
                option = d;
                selector.add(option);
            });
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id='first'>
        <h1>project options</h1>
        <button id='button1'>Get Projects</button>
</div>
<div id='second'>
        <h2>all projects</h2>
        Projects: <select id='selector'></select>
</div>

It will work.If not then please check your api url.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.