JSON for popuplate HTML div

Question

I am trying to use an JSON string to popolate an html div, here's my code, but it seems not working, I still cannot realize why, there's some suggestions?

The JSON is created via PHP and it is working fine. Thank you.

    $(document).ready(function(e) {
    var Currencies = function(){
        $.ajax({
            url:"js/php/users.php",
            success:function(data){
                return{
                    getMyJson: function(data){
                        return(data);
                    }
                }
            }
        });     
    }(); // execute the function when the MyObj variable is initialized.   
});
$('#autocomplete').autocomplete({
    lookup: Currencies.getMyJson(),
    onSelect: function (suggestion){
        var thehtml = '<strong>Currency Name:</strong> ' + suggestion.nome + ' <br> ';
        $('#outputcontent').html(thehtml);
    }
});

you can't do that... returning a value from an async method like an ajax call... see http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Arun P Johny, Feb 16 '14 at 10:05
slightly offtopic, but http://rog.ie/blog/dugjs-a-jsonp-to-html-script is a very clean solution to populating html with json data — roman, Feb 16 '14 at 10:40

score 1 · Answer 1 · edited May 23 '17 at 10:31

1

Few observations

The Currencies object is local to the dom ready handler, so it is not accessible outside it. Move your autocomplete plugin initialization inside the dom ready handler.
You can't return a value from a asynchronous method like that - See How to return the response from an AJAX call

Try

$(document).ready(function (e) {
    var Currencies = {
        getMyJson: function (callback) {
            $.ajax({
                url: "js/php/users.php",
                success: function (data) {
                    callback(data)
                }
            });
        }
    }; // execute the function when the MyObj variable is initialized.   

    Currencies.getMyJson(function (data) {
        $('#autocomplete').autocomplete({
            lookup: data,
            onSelect: function (suggestion) {
                var thehtml = '<strong>Currency Name:</strong> ' + suggestion.nome + ' <br> ';
                $('#outputcontent').html(thehtml);
            }
        });
    })
});

edited May 23 '17 at 10:31

Community

1
1

answered Feb 16 '14 at 10:07

Arun P Johny

384,651
66
527
531

Thank you @Arun P Johny but is not working i checked the output writing alert(data) after callback(data) the alert is correct – Priya Feb 16 '14 at 10:21
@Priya can you add a alert() before `$('#autocomplete').autocomplete({` and see whether it is getting called – Arun P Johny Feb 16 '14 at 10:29
I did it, the output is correct too... Still cannot realize why i doesen't work <. – Priya Feb 16 '14 at 10:32
@Priya if you gives a static data as the lookup value whether it is working – Arun P Johny Feb 16 '14 at 10:36

score 0 · Answer 2 · answered Feb 16 '14 at 10:07

move this code

$('#autocomplete').autocomplete({
    lookup: Currencies.getMyJson(),
    onSelect: function (suggestion){
        var thehtml = '<strong>Currency Name:</strong> ' + suggestion.nome + ' <br> ';
        $('#outputcontent').html(thehtml);
    }
});

into

$(document).ready(function(e) {

JSON for popuplate HTML div

2 Answers2