Guidance on pulling JSON data through Javascript

Hello all I am new to Jquery wanted to pull JSON data and show same.Kindly guide where I am doing some mistake.Kindly tell me seeing the code do I need to pass any script src code for javascript or anything I am missing


<div class="content">
    <h1>Pulling JSON data from an open data API</h1>
        <option>80001 Arvada Jefferson</option>
        <option>80044 Aurora Arapahoe</option>
        <option>80252 Denver Denver</option>
        <option>80727 Eckley Yuma</option>
        <option>80728 Fleming Logan</option>
        <option>80729 Grover Weld</option>
        <option>80938 Colorado Springs El Paso</option>
        <option>81658 Vail Eagle</option>
    <em>(ZIP City County)</em> 
    <button>Let's do this thing!</button>

Javascript(in footer)



    (function ($) {
    $('button').on('click', function () {
        // remove resultset if this has already been run
        $('.content ul').remove();
        // add spinner to indicate something is happening
        $('<i class="fa fa-refresh fa-spin"/>').appendTo('body');
        // get selected zip code from selectbox
        var zip = $('select option:selected').text().substring(1, 6);
        // make the AJAX request
        $.getJSON('' + zip, function (data) {
            // do all this on success       
            var items = [],
            $.each(data, function (key, val) {
                //iterate through the returned data and build a list
                items.push('<li id="' + key + '"><span class="name">' + val.entityname + '</span><br><span class="addr">' + val.principaladdress1 + '</span> <span class="city">' + val.principalcity + '</span></li>');
            // if no items were returned then add a message to that effect
            if (items.length < 1) {
                items.push('<li>No results for this ZIP code, try again!</li>');
            // remove spinner
            // append list to page
            $ul = $('<ul />').appendTo('.content');
            //append list items to list

Hi @arunesh_dutta, I cannot see any of the JavaScript you posted, please try posting it again and make sure it shows by previewing your post. Without seeing the code I cannot help much. Make sure you get a valid JSON response and then use JSON.parse() on it to get the JSON object

Thanks to let me know made changes

No worries and thanks for fixing it. Further to that, are you seeing any JavaScript errors in the console?

No errors as in the code it shows No results for this zip code.Cannot be assured if I am doing something wrong or API is down.Wanted to test any working API in my application for implementation like this

The network tab in your developer tools in the browser should show up any xhr requests being made and their response. It’s better to get a handle of that and check you’re actually getting data back first

Thanks I ran.I have attached the image plz guide me

If you click on them you should get further info. I think right now you’re interested in finding the response data to make sure you got what you expected or anything at all for that matter. You could also open those xhr urls in a new tab and see the raw data for yourself

Thanks I didn’t know that the link can display the response ,the link shows this…I think there is a connection with remote source but no data?Correct me if wrong so that if correct I’ll try with other api

Yes exactly that looks like no data!

Thanks can u guide me Javascript code.What I am looking for is passing a textarea data when user clicks the button to GATE cloud api ,I have the REST api url with key and password.My basic form is

 <textarea name="message" rows="10" cols="30">Text goes here.</textarea>
    <button>Let's do this thing!</button>

The button gets linked to javscript code like like above`

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.