JSON data array is appending all elements to a single <li> instead of mapping each element to-CodePudding

I'm trying to map over each element of an array and append it to its own li tag, but the data is being returned comma separated and all on the same li. Essentially I want each team's starter's id number to be mapped onto its own individual li tag. Any advice on how I can achieve this?

Here is my function

$(document).ready(function() {
    $.ajax({
            url: 'https://api.sleeper.app/v1/league/784456593403224064/rosters',
            type: 'GET',
            success: function(result) {
                teamData = result.map(result => result.starters);
                teamData.forEach((starter, item) => {
                    $(`.starters-list${item}`).append('<li>' starter '</li>');
                });
            },
            error: function(err) {
                console.log(err)
            }
    })
});

And here is my index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script
    src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"></script>
    <script defer src="./js/script.js"></script>
    <link rel="stylesheet" href="./css/style.css">
    <title>Brick Dynasty Newsletter</title>
</head>
<body>
    <h1 >Brick Dynasty Newsletter</h1>
<!-- <button >Scoring Settings &#xbb</button>
<div >
  <ul ></ul>
</div>
    <div >
        <h1 >Total Teams:</h1>
    </div> -->

    <br>
    <br>
    <!-- <h1 >Recent Transactions</h1>
    <div >
        <ul >Added:</ul>
        <ul >Dropped:</ul>
    </div>
    <div >
        <h1>Trending Down:</h1>
        <ul ></ul>
    </div>
    <div >
        <h1>Trending Up:</h1>
        <ul ></ul>
    </div> -->
    <div >
        <div >
            <img id="avatar0" src="" alt="">
            <div id="player0"></div>
            <div id="team-name0"></div>
                <ul ></ul>
            </div>
            <br><br>

        <div >    
            <img id="avatar1" src="" alt="">
            <div id="player1"></div>
            <div id="team-name1"></div>
            <ul ></ul>
        </div> 
        <br><br>

        <div >
            <img id="avatar2" src="" alt="">
            <div id="player2"></div>
            <div id="team-name2"></div>
            <ul ></ul>
        </div>
        <br><br>

        <div >
            <img id="avatar3" src="" alt="">
            <div id="player3"></div>
        <div id="team-name3"></div>
            <ul ></ul>
        </div> 
        <br><br>

        <div >
            <img id="avatar4" src="" alt="">
            <div id="player4"></div>
            <div id="team-name4"></div>
            <ul ></ul>
        </div> 
        <br><br>

        <div >
            <img id="avatar5" src="" alt="">
            <div id="player5"></div>
            <div id="team-name5"></div>
            <ul ></ul>
        </div> 
        <br><br>

        <div >
            <img id="avatar6" src="" alt="">
            <div id="player6"></div>
            <div id="team-name6"></div>
            <ul ></ul>
        </div> 
        <br><br>

        <div >
            <img id="avatar7" src="" alt="">
            <div id="player7"></div>
            <div id="team-name7"></div>
            <ul ></ul>
        </div> 
        <br><br>

        <div >
            <img id="avatar8" src="" alt="">
            <div id="player8"></div>        
            <div id="team-name8"></div>
            <ul ></ul>
        </div> 
        <br><br>

        <div >
            <img id="avatar9" src="" alt="">     
            <div id="player9"></div>        
            <div id="team-name9"></div>
            <ul ></ul>  
        </div>    
    </div>  
</div>
<h1>What you need to know for the upcoming 2022 draft!</h1>
<div >
    <div ></div>
    <div ></div>
    <div ></div>
</div>
<form method="POST" action="/comments">
    <input type="text"  name="comment_user" placeholder="test">
    <input type="textarea"  name="comment_content" placeholder="Leave a comment or talk some trash!">
    <button type="submit" >Comment</button>
</form>
<div >

</div>
</body>
</html>

CodePudding user response：

You are close!

As starters is a list as well, then another forEach is needed to loop through the starter for every item.

Try the runnable example below. I used a subset of your elements in the example, specific to the javascript.

$(document).ready(function() {
    $.ajax({
        url: 'https://api.sleeper.app/v1/league/784456593403224064/rosters',
        type: 'GET',
        success: function(result) {
            teamData = result.map(result => result.starters);
            teamData.forEach((starter, item) => {
                starter.forEach((entry) => { // loop the starter
                    $(`.starters-list${item}`).append('<li>' entry '</li>');
                });
            });
        },
        error: function(err) {
            console.log(err)
        }
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    <div >
        <img id="avatar0" src="" alt="">
        <div id="player0"></div>
        <div id="team-name0"></div>
            <ul ></ul>
        </div>
        <br><br>

    <div >    
        <img id="avatar1" src="" alt="">
        <div id="player1"></div>
        <div id="team-name1"></div>
        <ul ></ul>
    </div> 
    <br><br>

    <div >
        <img id="avatar2" src="" alt="">
        <div id="player2"></div>
        <div id="team-name2"></div>
        <ul ></ul>
    </div>
    <br><br>

    <div >
        <img id="avatar3" src="" alt="">
        <div id="player3"></div>
    <div id="team-name3"></div>
        <ul ></ul>
    </div> 
    <br><br>

    <div >
        <img id="avatar4" src="" alt="">
        <div id="player4"></div>
        <div id="team-name4"></div>
        <ul ></ul>
    </div> 
    <br><br>

    <div >
        <img id="avatar5" src="" alt="">
        <div id="player5"></div>
        <div id="team-name5"></div>
        <ul ></ul>
    </div> 
    <br><br>

    <div >
        <img id="avatar6" src="" alt="">
        <div id="player6"></div>
        <div id="team-name6"></div>
        <ul ></ul>
    </div> 
    <br><br>

    <div >
        <img id="avatar7" src="" alt="">
        <div id="player7"></div>
        <div id="team-name7"></div>
        <ul ></ul>
    </div> 
    <br><br>

    <div >
        <img id="avatar8" src="" alt="">
        <div id="player8"></div>        
        <div id="team-name8"></div>
        <ul ></ul>
    </div> 
    <br><br>

    <div >
        <img id="avatar9" src="" alt="">     
        <div id="player9"></div>        
        <div id="team-name9"></div>
        <ul ></ul>  
    </div>    
</div>