๐
async function show_tag_fuc() { const response = await fetch('http://127.0.0.1:8000/music/', { headers:{ 'content-type':'application/json', }, method:'GET', }) // backend์์ ๋ฐ์ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ .then(response => { return response.json(); }) // Promise ์์ ๋ด๊ธด ๋ฐ์ดํฐ ๊บผ๋ด์ค๊ธฐ .then(data => { // console.log(data) // tag ๋ชฉ๋ก ํ์ธ var tags= document.getElementById("all_tags"); for (i=0; i < data.length; i++){ const tag = document.createElement("button"); // ๋ฒํผ ์์ ์์ฑ tag.setAttribute("class","mylabel") // css class ์ง์ tag.setAttribute("onclick","TagsPick(this.innerText)") // ์ ํํ ๋ฒํผ ํด๋ฆญ ์ ํด๋น ํจ์ ํธ์ถ tag.innerText = data[i]['category'] // ๋ฒํผ์ด๋ฆ ๊ฐ ์ง์ const tags = all_tags.appendChild(tag) // all_tags ์์ tag ์ถ๊ฐ } }); }
fetch๋ก ํด๋น url ์ get์ ๋ณด๋ด์ด db์ ์ ์ฅ์ค์ธ tag๋ค์ ๊ฐ์ ธ์ html์ ๋ณด์ฌ์ฃผ๋ ์ฝ๋์ด๋ค.
then์ด ์ฒ์์ ๋ญ์ง ๋ชฐ๋๋๋ฐ fetch ์ฌ์ฉ๋ฒ์ ์ฝ์ด๋ณด๋ฉด ์กฐ๊ธ ์ดํด๊ฐ ๋ ๊ฒ์ด๋ค.fetch ์์ฒด๋ ๊ฐ์ฒด๋ฅผ ๊ฐ์ ธ์ค๊ณ
const music_data = fetch(url) .then((response) => { return response.json(); })
์์ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๊ณ ์ถ๋ค๋ฉด
const music_data = fetch(url) .then((response) => { return response.json(); }) .then((data) => { let authors = data; })
์๋๋ post ํ์์ ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ด๊ณ ๋ฐ์์์๋ ์ ์ฅํ๋ ๋ฐฉ๋ฒ์ด๋ค
์ฌ์ค ๋๊ฐ์๋ฐ ์ฌ์ฉ๋ฒ์ ๋ชจ๋ฅด๋ฉด ์์๋ฅผ ๋ณด๊ณ ์ตํ๋๊ฒ ๊ฐ์ฅ ์ข๊ธฐ ๋๋ฌธ์...ใ ใ
์๋ฒ๋ django๋ก ๋ง๋ค๊ณ ์๋๋ฐ javascript ๋ถ๋ถ๋ ํจ์๋ฅผ ์ง๋๊ฒ ํ๋ค๋ณด๋ ์ฌ๋ฐ๋ ๊ฒ ๊ฐ๋ค.const music_data = await fetch('http://127.0.0.1:8000/music_search/', { headers:{ 'content-type':'application/json', }, method:'POST', body: JSON.stringify({ "category":str }) }).then((response) => { return response.json() })
๐ serializer data์ ์ ๊ทผ ์ ๋ฐ๋ก ์ง๋ ฌํ๊ฐ ๋๋ค.
data๋ serializer์ to_representation ์ด๋ผ๋ ๋ฉ์๋๋ฅผ ํธ์ถํ๊ณ
wirte_only ์ธ ํ๋๋ฅผ ์ ์ธํ๊ณ ๋ชจ๋ ๊ฐ์ ธ์จ๋ค.
wirte_only๋ password ๊ฐ์ด ์ฐ๊ธฐ๋ง ๊ฐ๋ฅํ ํ๋๋ฅผ ๋งํ๋ค.
๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์จ ํ dict ๋ณ์๋ฅผ ๋ง๋ ํ key์๋ ํ๋์ ์ด๋ฆ, value์๋ ํ๋์ to_representation ๋ฉ์๋์ ๋ฆฌํด๊ฐ์ ์ ์ฅ ํ dict๋ฅผ ๋ฆฌํดํ๋ค.
๐ ์ฌ์ฉ์ client localstorage์ ๋ฐ์ดํฐ ์ ์ฅํ๊ธฐ
localStorage.setItem('tempdata', JSON.stringify(music_data));
tempdata ๋ผ๋ ์ด๋ฆ์ผ๋ก music_data๋ฅผ locatstorage์ ์ ์ฅํ๋ค๋ ๋ป์ด๋ค.
์ฌ์ฉ๋ฒ์ ์๋์ ๊ฐ๋ค.var temp = JSON.parse(localStorage.getItem('tempdata'));
๋๋ json ํ์์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ ๊ฒ์ด์ฌ์ ์์ ๊ฐ์ด ํด์ฃผ์๊ณ ๊ฐ์ฒด, ํน์ json ํ์์ ๋ฐ์ดํฐ ๋ง๊ณ ๋ค๋ฅธ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ ๊ฒ์ด๋ผ๋ฉด ์๋์ ๊ฐ์ด ์ ์ฅํด ์ฃผ๋ฉด ๋๋ค.
localStorage.setItem('tempdata', music_data); var temp = JSON.parse('tempdata');