Как я могу проанализировать эти конкретные данные JSON из LastFM с помощью jQuery?

Question

Я пытаюсь проанализировать фид JSON с помощью LastFM API , но в массиве JSON возвращены определенные элементы с префиксом #, на который я не знаю, как ссылаться.

URL фида здесь , и его можно увидеть здесь .

Мой код jQuery до сих пор выглядит так:

$.getJSON('http://ws.audioscrobbler.com/2.0/?method=geo.getevents&api_key=ca1599876cde298491941da8577de666&format=json&callback=?', function(data) {

        $.each(data.events.event, function(i, item) {

            html += "<li><a class='fm-event' href='" + item.url + "'><h4>" + item.title + "</h4>";
            html += "<p>at " + item.venue.name + ", " + item.venue.location.city + "<br />";
            html += "on " + item.startDate + "</p>";
            html += "<img src='" + item.venue.image.text + "' />"; // This doesn't work. how do I do this?
            html += "</a></li>";
        });

        $("#last-fm-events").append(html);

    });

Я в основном перебираю каждый элемент в фиде и динамически создаю список, который затем добавляется в DOM.

Чего я не могу понять, так это как получить URL-адреса изображенияэлементы в ленте.Есть разные для разных размеров.JSON для элементов изображения выглядит следующим образом:

"image": [
            {
              "#text": "http:\/\/userserve-ak.last.fm\/serve\/34\/2243904.gif",
              "size": "small"
            },
            {
              "#text": "http:\/\/userserve-ak.last.fm\/serve\/64\/2243904.gif",
              "size": "medium"
            },
            {
              "#text": "http:\/\/userserve-ak.last.fm\/serve\/126\/2243904.gif",
              "size": "large"
            },
            {
              "#text": "http:\/\/userserve-ak.last.fm\/serve\/252\/2243904.gif",
              "size": "extralarge"
            },
            {
              "#text": "http:\/\/userserve-ak.last.fm\/serve\/_\/2243904\/A38.gif",
              "size": "mega"
            }
          ]
        }

Но я не понимаю, почему текстовый элемент в массиве имеет префикс # и как получить URL-адрес для изображения определенного размера,Любая помощь приветствуется, так как я начинающий в jQuery!Спасибо.

Answer 1

Это очень странный способ форматирования объекта (за исключением требований, о которых я не знаю, что вполне вероятно ).

В принципе, есть два способа получитьв свойстве объекта в JavaScript: использование литерала для имени (например, obj.propertyName), как у вас, или использование строки с нотацией в скобках (например, obj["propertyName"]).Иногда у вас есть для использования строкового подхода, если литерал будет недопустимым идентификатором в JavaScript (а #text будет), или если вы создаете имя свойства на лету.Таким образом, чтобы получить item.venue.image.#text (что было бы неверно), вы должны использовать item.venue.image["#text"].

Но , то, что вы показали нам для image, это массив, гдекаждый элемент имеет свойство #text, а не то, что делает сам массив.Если вы хотите найти URL для заданного размера, к сожалению, вам придется искать его в массиве:

function findUrl(image, size) {
    var n, entry;

    for (n = 0; n < image.length; ++n) {
        // Get this entry from the array
        entry = image[n];

        // Is this the size we want?
        if (entry.size == size) {  // (`size` is a valid identifier, can use a literal)
            // Yes, return this URL
            return entry["#text"]; // (`#text` is not, must use brackets and a string)
        }
    }
    return null; // Or "" or undefined or whatever you want to use for "not found"
}

Используя его, когда у вас возникают проблемы:

html += "<img src='" + findUrl(item.venue.image, "medium") + "' />";

... при условии, что вам нужен "средний" URL.

Конечно, если документация API гарантирует, что определенные размеры будут по определенным индексам, вам не нужно искать, вы можете просто проиндексировать вмассив напрямую.Например, в примере, который вы нам показали, «средняя» запись URL находится в позиции 1 в массиве.Если это гарантировано, вам не нужно искать:

html += "<img src='" + item.venue.image[1]["#text"] + "' />";

..., который говорит: «дайте мне свойство« #text »объекта с индексом 1 в массиве».(Ну, по сути. На самом деле массивы JavaScript на самом деле не являются массивами, но давайте не будем вдаваться в подробности ...)