Javascript/Jquery Unable to set dom element to ajax result

Question

I making an ajax request on a json file then running a 'for loop' that loops through the file and displays the necessary information on a webpage. The function should also be displaying the result of a second ajax request in an html element. I can console.log the result but am unable to set the result into an html element.

I've tried various different approaches like creating arrays then pushing the results, everything I have tried failed.

HTML

$.getJSON("coins.json", function(result) {
      for (var i = 0; i < result.length; i++) {
        name = result[i].name;
        ticker = result[i].ticker;
        amount = result[i].amount;
        icon = result[i].icon;
        $('.coins').append("<div class='coin'><div class='cname'><img src='" + icon + "' /><h1>" + name + "</h1><p>Ticker : " + ticker + "< /
          p > < h2 > "+$.getJSON(result[i].price, function(coinPrice){ console.log(coinPrice.ticker.price); })+" < /h2></div > < /div>");
        }
      });

Console outputs results properly but

$(this).text(coinPrice.ticker.price)

displays

[object Object]

coins.json

[
  {
    "name": "Bitcoin",
    "ticker": "BTC",
    "amount": 0.17,
    "icon": "https://raw.githubusercontent.com/atomiclabs/cryptocurrency-icons/master/128/black/btc.png",
    "price": "https://api.cryptonator.com/api/ticker/btc-aud"
  },
  {
    "name": "Ethereum",
    "ticker": "ETH",
    "amount": 59,
    "icon": "https://raw.githubusercontent.com/atomiclabs/cryptocurrency-icons/master/128/black/eth.png",
    "price": "https://api.cryptonator.com/api/ticker/eth-aud"
  },
  {
    "name": "Neo",
    "ticker": "NEO",
    "amount": 88,
    "icon": "https://raw.githubusercontent.com/atomiclabs/cryptocurrency-icons/master/128/black/neo.png",
    "price": "https://api.cryptonator.com/api/ticker/neo-aud"
  }
]

I wish to select the price object in the coins.json make an ajax request and display its value in a html element. Please help

Where does $(this).text(coinPrice.ticker.price) display [object Object]? I'm guessing in the inner $.getJSON callback.. in which case if you have an object, what's in it? (hint hint). You don't get to nest HTTP requests like that; the results are only available in the callback once the request is complete... the JQuery function doesn't just magically "await" and return the response for you.. — Ciabaros, Jun 24 '19 at 04:35

score 2 · Accepted Answer · answered Jun 24 '19 at 05:28

for (var i = 0; i < result.length; i++){
            name = result[i].name;
            ticker = result[i].ticker;
            amount = result[i].amount;
            icon = result[i].icon;
            $('.coins').append("<div class='coin'><div class='cname'><img src='"+icon+"' /><h1>"+name+"</h1><p>Ticker : "+ticker+"</p><h2 id="+ticker+"></h2></div></div>");
            $.getJSON(result[i].price, function(coinPrice){ jQuery("#"+coinPrice.ticker.base).text(coinPrice.ticker.price); console.log(coinPrice.ticker.base);});
        }

Hi you must modify your code as shown above. You cannot directly concatenate functions to html string.During rendering of webpage They are treated as string and [Object Object] is printed on the screen. Passed function is executing as anonyms function inside global scope.So you cannot do $(this).Also $(this) doesn't refer to Html element inside $.getJson. You must call your function outside html string and later assign the output as text node on desired element. You can see i have assigned an id on h2 element , then using it to render the output of function call as text node. Thanks

You Legend! Thank you so much. :) You made my day. – Nate Jun 24 '19 at 05:34 — Nate, Jun 24 '19 at 05:34

score 0 · Answer 2 · answered Jun 24 '19 at 04:38

0

As console.log has built in JSON.stringify you can see price as string not object when you log your attribute. So just change your code as $(this).text(JSON.stringify(coinPrice.ticker.price)).
I hope it helps.

answered Jun 24 '19 at 04:38

Pouria Moosavi

662
7
22

Javascript/Jquery Unable to set dom element to ajax result

2 Answers2