210805 ajax를 이용한 코딩
너무 어렵기때문에 전개 과정을 남겨본다.
ajax를 이용해서 결과값을 openAPI에서 찾아 노출하고 (for 반복문 이용), 특정한 몇몇 결과값은 강조해서 표시하는 과정 (if문 이용 / append를 이용하여 html 코드를 삽입함).
- openAPI에서 내가 원하는 결과값을 찾는다.
getStationList - row
<script>
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response['getStationList']['row']
console.log(response)
}
}
})
}
</script>
한줄씩 진행하며 console.log를 이용하여 확인해보는 절차를 가지는 것이 좋다.
- 결과값이 리스트로 99개 정도 되므로 for반복문을 사용한다.
<script>
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response['getStationList']['row']
for (let i = 0; i < rows.length; i++) {
console.log(response)
}
}
})
}
</script>
- 내가 원하는 정보는 API속 stationName / rackTotCnt / parkingBikeTotCnt 이므로 알기쉽게 이름을 지정해주고 name / rack / bike
console.log로 확인해본다.
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response['getStationList']['row']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['stationName']
let rack = rows[i]['rackTotCnt']
let bike = rows[i]['parkingBikeTotCnt']
console.log(name,rack,bike)
}
}
})
}
- 내가 찾는 정보를 표에 입력하기 위해 표를 구성하는 html 코드를
let temp = 꺽쇠사이에 에 넣어준다.
$('#names-q1').append(temp_html) 이 코드를 이용하여 코드를 원하는 위치(id값으로 설정)에 넣어준다 (append 이용)
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response['getStationList']['row']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['stationName']
let rack = rows[i]['rackTotCnt']
let bike = rows[i]['parkingBikeTotCnt']
let temp_html=`<tr>
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
$('#names-q1').append(temp_html)
}
}
})
}
근데 이렇게 하면 버튼을 누를때마다 표가 계속 길어지기 때문에 출력된 표를
지워주는 코드를 삽입한다.(empty)
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response['getStationList']['row']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['stationName']
let rack = rows[i]['rackTotCnt']
let bike = rows[i]['parkingBikeTotCnt']
let temp_html=`<tr>
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
$('#names-q1').append(temp_html)
}
}
})
}
그 뒤 내가 원하는 특정값에 스타일을 지정하고 싶으면
class로 스타일 지정후 if문 사용.
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response['getStationList']['row']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['stationName']
let rack = rows[i]['rackTotCnt']
let bike = rows[i]['parkingBikeTotCnt']
let temp_html = ``
if (bike < 5) {
temp_html = `<tr class="red">
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
} else {
temp_html = `<tr>
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
}
$('#names-q1').append(temp_html)
}
}
})
}
</script>
궁금증
let temp_html = 꺽쇠
는 왜 빈값으로 놔두는 것일까
Author And Source
이 문제에 관하여(210805 ajax를 이용한 코딩), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@minggoo_now/210805-ajax를-이용한-코딩저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)