JSON 데이터 HTML에 넣어주기

🔻JSON data를 for문으로 돌려서 HTML에 하나씩 붙여주는 경우

• temp_html = `` 사용
• ``안에 json data를 넣고자하는 HTML을 통째로 넣고 원하는 곳에
  ${변수명}을 넣어준다.
• html로 만든 리스트가 내려갈 부분의 id나 클래스값을 이용해서
  $('아이디').append(temp_html)을 해줌!

  for (let i = 0; i < lastGames.length; i++) {
                let summonerName = lastGames[i]['summonerName']
                let championName = lastGames[i]['championName']
                let teamPosition = lastGames[i]['teamPosition']
                let kills = lastGames[i]['kills']
                let deaths = lastGames[i]['deaths']
                let assists = lastGames[i][`assists`]
                let win = lastGames[i]['win']
                let gameResult

                if (win == true) {
                    gameResult = "승리"
                } else {
                    gameResult = "패배"
                }
                let totalMinionsKilled = lastGames[i]['totalMinionsKilled']
                let timePlayed = lastGames[i]['timePlayed']
                let minutes = parseInt(timePlayed / 60)
                let seconds = timePlayed % 60

                let temp_html = `<li>
                                            <div class="logBox-css">
                                                <div class="info">
                                                    <div class="game-result">${gameResult}</div>
                                                    <div class="bar"></div>
                                                    <div class="game-length">${minutes}분 ${seconds}초</div>
                                                </div>
                                                <div class="position">
                                                    <div class="icon">
                                                        <img src="../static/image/${teamPosition}.png" alt="포지션아이콘">
                                                    </div>
                                                    <div class="name">${teamPosition}</div>
                                                </div>
                                                <div class="champion">
                                                    <div class="icon">
                                                        <img src="../static/image/${championName}.png" alt="챔피언사진">
                                                    </div>
                                                    <div class="name">${championName}</div>
                                                </div>
                                                <div class="kda">
                                                    <div class="k-d-a">
                                                        <span>${kills}</span>
                                                        /
                                                        <span style="color: red">${deaths}</span>
                                                        /
                                                        <span>${assists}</span>
                                                    </div>
                                                    <div class="status">cs ${totalMinionsKilled}</div>
                                                </div>
                                            </div>
                                        </li>`
                $('#gameData').append(temp_html)

🔻JSON data를 하나씩 HTML tag가 있는 곳에 넣는 경우

        $('#아이디값').html(변수)

let tier = response['tier']
            let rank = response['rank']
            let lastGames = response['lastGames']
            let mostChampions = response['mostChampions']
            let mostChampName = mostChampions['name']
            let mostChampWin = mostChampions['win']
            let mostChampLose = mostChampions['lose']
            let allGames = mostChampWin + mostChampLose
            let mostChampKills = mostChampions['kills']
            let avKills = (mostChampKills / allGames).toFixed(1)
            let mostChampDeaths = mostChampions['deaths']
            let avDeaths = (mostChampDeaths / allGames).toFixed(1)
            let mostChampAssists = mostChampions['assists']
            let avAssist = (mostChampAssists / allGames).toFixed(1)
            let average = ((mostChampKills + mostChampAssists) / mostChampDeaths).toFixed(2)

            $('#summonerName').html(userName)
            $('#tier').html(tier)
            $('#rank').html(rank)
            $('#mostChampionName').html(mostChampName)
            $('#all').html(allGames)
            $('#win').html(mostChampWin)
            $('#lose').html(mostChampLose)
            $('#kill').html(avKills)
            $('#death').html(avDeaths)
            $('#assist').html(avAssist)
            $('#average').html(average)
            $('#picture').attr('src',"../static/image/"+mostChampName+".png")

🔻JSON data를 img태그 src 일부에 넣고 싶은 경우

        $('#picture').attr('src',"../static/image/"+mostChampName+".png")