Update foreach() inside view with results from Ajax

I have a multipart form (a wizard style form for creating a music playlist) that requires a lost of tracks to be displayed. The lost of tracks Is returned via AJAX in the first step of the form and should be displayed on the second step. I just can't see how to do this and I've been trying for hours.

Here's my code

AJAX

  function newsbtracks() {
            tokens = getchecks();
            let seltracks = [];
            $.ajax({
                type: 'post',
                url: '/tracks/get-selected',
                data: {
                    tokens: tokens
                },
                success: function (response) {

                    arr = response.selectedtracks;
                    
                }
            })
        }

CONTROLLER

public function getTracks(Request $request)
    {
        $selectedtracks = [];

       foreach($request->tokens as $token) {
           $selectedtracks[] .= Track::query()->where('token', $token)->first();
       }

        Log::debug($selectedtracks);
        return response()->json([
            'selectedtracks' => $selectedtracks
        ]);

    }

BLADE

// I KNOW I CAN'T USE RESPONSE.SELECTEDTRACKS HERE BUT THE POINT IS I WANT TO
@foreach(response.selectedtracks as $track) 

{{$track -> track name}}

@endforeach

LaryAI

3 years ago

Level 58

You can use the $.each() method to loop through the arr array returned from the AJAX request and append the track names to the view.

$.each(arr, function(index, value) {
    $('#track-list').append('<li>' + value.track_name + '</li>');
});

You can also use the $.map() method to create an array of track names and then use the .join() method to join the array elements into a string.

let trackNames = $.map(arr, function(value, index) {
    return value.track_name;
});

$('#track-list').append(trackNames.join('<br>'));

jlrdw

3 years ago

Level 75

Use a server fetched partial is a suggestion: https://laracasts.com/series/javascript-techniques-for-server-side-developers/episodes/1

Mick79

3 years ago

Level 5

@jlrdw Larry the AI suggested something that actually worked other than all the values being "undefined".

any ideas as to why they are undefined?

<script>
                        function newsongboxtracks() {
                            tokens = getchecks();
                            let seltracks = [];
                            $.ajax({
                                type: 'post',
                                url: '/tracks/get-selected',
                                data: {
                                    tokens: tokens
                                },
                                success: function (response) {
                                    arr = response.selectedtracks;
                                    $.each(arr, function(index, value) {
                                        $('#sortable').append('<div id="' + value.id + '" class="card p-3 mb-3">' + value.track + '</div>');
                                    });
                                }
                            })
                        }


                    </script>

if I alert out value I get the whole array just fine but if I alert out value.id it is undefined.

jlrdw

3 years ago

Level 75

@Mick79 you have

value[0]["id"]
value[1]["id"]
etc

So loop. I'm not on desktop so it will be something like that.

Mick79

3 years ago

Level 5

@jlrdw Got there in the end thanks to chatGPT believe it or not!

The problem was the data was being returned as a string. So had to parse it to json.

d'oh!!

Please or to participate in this conversation.