JSON data array is appending all elements to a single
instead of mapping each element to its own

Question

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(''+starter+'');
                });
            },
            error: function(err) {
                console.log(err)
            }
    })
});

And here is my index.html file.




    
    
    
    
    
    
    Brick Dynasty Newsletter


    Brick Dynasty Newsletter


    

    

    
    
        
            
            
            
                
            
            



            
            
            
            
            
         
        



        
            
            
            
            
        
        



        
            
            
        
            
         
        



        
            
            
            
            
         
        



        
            
            
            
            
         
        



        
            
            
            
            
         
        



        
            
            
            
            
         
        



        
            
                    
            
            
         
        



        
                 
                    
            
              
            
      

What you need to know for the upcoming 2022 draft!

user_7644018 · Answer

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(''+entry+'');
                });
            });
        },
        error: function(err) {
            console.log(err)
        }
    })
});

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

1 Answers