jQuery를 사용하여 LastFM에서이 특정 JSON 데이터를 구문 분석하려면 어떻게해야합니까?

Question

LastFM API을 사용하여 JSON 피드를 구문 분석하려고하지만 JSON 배열에 반환되는 특정 요소가 있는데,이 요소 앞에는 참조 방법을 알 수없는 #가 붙습니다.

피드 URL은 here이며 visualised here입니다.

내 jQuery 코드는 지금까지 다음과 같습니다 : 나는 기본적으로 피드의 각 항목을 통해 반복하고 동적으로 다음 DOM에 추가 된 목록을 짓고 있어요

$.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); 

    }); 

.

알아낼 수없는 것은 피드의 이미지 항목에 대한 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

그것은 매우 이상한 방법으로 객체를 포맷합니다 (내가 알지 못하는 요구 사항을 제외하면, 은 아마도 일 것입니다).

기본적으로 자바 스크립트에서 객체의 속성을 가져 오는 두 가지 방법이 있습니다. 이름에 리터럴 (예 : 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"] + "' />"; 

... "배열의 인덱스 1에서 나에게 개체의 '하는 #text'속성을 제공합니다." (기본적으로 실제로 JavaScript 배열은 배열이 아니지만 여기에 들어가서는 안됩니다 ...)