Почему при вызове значения объектов из JSON оно должно быть заключено в кавычки и символы плюса?
При первой попытке сделать этот вызов PunkAPI я пытался добавить изображения (URL-адреса - это объект, возвращаемый в JSON) с помощью
append("<img src='beer[i].image_url'/>");
Что не сработало, потому что (с консоли) запрос был сделан к http://projectURL.com/beer[i visible.image_url вместо http: // apiURL / beer [i] .image_url.
Я видел из онлайн-примера, что он будет работать правильно, если я заключу объектный запрос в кавычки и плюсы:
append("<img src='"+beer[i].image_url+"'/>");
Что хотелось бы знать - это Зачем плюсы и кавычки обязательны. Заранее спасибо!
Полный код ниже
var request = new XMLHttpRequest();
request.open("GET", "https://api.punkapi.com/v2/beers?abv_gt=5");
request.responseType = 'json';
request.send();
request.onload = function() {
var beer = request.response;
var i;
for(i=0; i<beer.length; i++){
$("#demo").append("<img src='"+beer[i].image_url+"' />");
}
};
<body>
<div id = "demo">
</div>
</body>
<script
src = "https://code.jquery.com/jquery-3.3.1.min.js"
integrity = "sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8 = "
crossorigin = "anonymous"></script>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Проблема в том, что если вы не используете кавычки и плюсы для объединения строки, то JavaScript не узнает, что вы пытаетесь объединить значение переменной, чтобы использовать его как часть конечной строки, и интерпретирует его как простую строку.
Итак, вам нужно объединить переменную следующим образом:
append("<img src='"+beer[i].image_url+"'/>");
Или в es6 вы можете использовать замену переменной, используя строки в кавычках:
let source = beer[i].image_url;
append(`<img src = "${source}" />`);
es6 плохо поддерживается в IE11, и полагаться на него для массового производства немного рискованно, но ваш пример верен
@Reflective, я знаю, я написал это только как «как сделать в es6».
Ах, спасибо! Был лишь смутно знаком с концепцией конкатенации.
Я знаю, написал комментарий, чтобы предупредить парня о том, с чем он может столкнуться в последнее время. хорошо, что вы показали другую возможность. Я всегда в шаге от того, чтобы использовать этот способ, поскольку он естественен для многих других языков, но я останавливаюсь, потому что люди все еще используют очень экзотические браузеры, такие как IE8 для каждого экземпляра, особенно в корпоративной среде.
Вот почему вокруг @Reflective есть транспайлеры.
@Reflective, я думаю, хорошо использовать обе возможности. Я объяснил вопрос, дав правильный ответ, и в качестве примечания я быстро описал, как этого можно достичь в es6. Если мы будем использовать такой устаревший браузер, как IE8, мы никогда не продвинемся вперед. В любом случае я принимаю вашу точку зрения, но не согласен с тем, что не предлагаю другие варианты в качестве части ответа.
Это большая дискуссия, что лучше - написать совместимый код или использовать инструменты для совместимости ... У бота есть преимущества и недостатки в зависимости от проекта.
@Reflective полностью с этим согласен :-)
В JavaScript нет такой вещи, как привязка переменных внутри строк, заключенных в двойные кавычки. Даже обычно можно было использовать простую переменную, но не выражение, которое вы хотите связать с beer[i].image_url.
Кстати, правильный способ сделать это -
$("#demo").append($("<img>", {src: beer[i].image_url})).