20.04.04(Sat) 스파르타 3주차 복습_JQuery+Ajax의 조합을 연습하자!(4)

4. 랜덤 고양이 사진 API를 이용하기

4-1. 랜덤 고양이 사이트의 특징

1. 주소가 자동으로 바뀐다. (3)에서는 인풋값이 달라짐에 따라 주소가 달라졌지?
2. 지금까지 연습했던 api 들의 모양은 {} 였는데 얘는 [] 대괄호로 시작한다.
3. img src 속성을 통해 사진이 들어가 있으며 src 속성의 주소가 매번 바뀐다는 점을 주목해야 한다. 즉, 이미지 태그에 있는 소스 속성을 바꿔 줘야 된다는 뜻이다.

4-2. 빌드 오더

1. Ajax 통해서 고양이의 이미지를 가져온다.
2. 아이디 img-cat 인 태그의 src를 고양이 이미지 유알엘로 교체해준다. 제이쿼리 이미지 src 바꾸기 >> attr 속성 jqattr 사용

4-3. 콘솔 로그 찍기

• 랜덤 고양이 api는 [] 가 먼저 나와있는 배열로 시작하고 있다.
• console.log(response['url']); 이러면 우리가 원하는 값을 얻지 못한다.
• 확인해보면 0번째에 url 이 있으므로, 전의 방식과 다르게 해야한다.

console.log(response[0]['url']); 

4-4. 선언 및 반복문, jqattr

• 찍히는걸 확인했으니 이것을 새로 선언해준다.

let caturl = response[0]['url'];

• 그리고 배열로 시작하므로 반복문!
• jquery img src 바꾸기! 로 검색해본다. 그럼

$('#id').attr('src', url선언변수);

4-5. 이미지의 높이, 폭 지정

$('#img-cat').width(400);
$('#img-cat').height(400);

4-6. 완성