Javascript / Jquery Невозможно установить элемент DOM для результата AJAX

Question

Я делаю ajax-запрос к файлу json, затем запускаю цикл for, который просматривает файл и отображает необходимую информацию на веб-странице.Функция также должна отображать результат второго ajax-запроса в элементе html.Я могу console.log результата, но не могу установить результат в элемент html.

Я пробовал различные подходы, такие как создание массивов, затем отправка результатов, все, что я пробовал, не удалось.

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>");
        }
      });

Консоль выводит результаты правильно, но

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

отображает

[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"
  }
]

Я хочу выбрать объект цены в coins.json, сделать запрос ajax и отобразить его значение в элементе html.Пожалуйста, помогите

Answer 1

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);});
        }

Привет, ты должен изменить свой код, как показано выше.Вы не можете напрямую объединить функции в строку html. Во время рендеринга веб-страницы они обрабатываются как строка, и [Object Object] выводится на экран.Переданная функция выполняется как анонимная функция в глобальной области. Так что вы не можете делать $ (this). Также $ (this) не ссылается на элемент Html внутри $ .getJson.Вы должны вызвать свою функцию вне строки html, а затем назначить вывод в качестве текстового узла для нужного элемента.Вы можете видеть, что я назначил идентификатор для элемента h2, а затем использовал его для визуализации вывода вызова функции в виде текстового узла.Спасибо

Answer 2

Поскольку console.log имеет встроенную JSON.stringify, вы можете видеть цену как строку, а не как объект, когда вы регистрируете свой атрибут. Так что просто измените свой код на $(this).text(JSON.stringify(coinPrice.ticker.price)).
Надеюсь, это поможет.