laravel with jquery ajax populate select option with value - ajax

Question

I have two questions
(
1. how to automatically select the current level_id and populate it to the select box
2. how do i can i fix this issue in modal when closing and re-open another modal the select option keeps on adding the previous data)
controller:
$stream = Stream::with('level')->findOrFail($uuid);
$levels =Level::all();
return response()->json(['stream'=>$stream,'levels'=>$levels,'status'=>true]);
Ajax Jquery
jQuery('body').on('click', '.open-modal', function() {
var stream_id = $(this).val();
$.get('streams/' + stream_id + '/edit', function(data) {
if (data.status == true) {
$.each(data.levels, function(i, level) {
$('#sel_level').append($('<option>', {
value: level.id,
text: level.name
}));
});
}
jQuery('#stream_id').val(data.stream.id);
jQuery('#stream_name').val(data.stream.name);
jQuery('#stream_code').val(data.stream.code);
jQuery('#btn-save').val("update");
jQuery('#streamEditorModal').modal('show');
})
});
Question 2 image
Json response;
levels: Array(2)
0: {id: 3, name: "Level 1", code: "LVL1", uuid: "U7iHTp2pyM843HwfJ3CEB66rrD2vKAJvBHcrRYSGgXvmSaWh6IN3dGu1vZl29CwKTlULAdzduTglYyRFmn6MdY9S2xLhWZkvhSz0", created_at: "2020-06-25T07:59:14.000000Z", …}
1: {id: 4, name: "Level 2", code: "LVL2", uuid: "HZMe0wtyHfJrInriw4bA1ujOyZwZ7SkrSt37ZK2hCOHqSyki2b1Ysx2GBs8AU7oDemub2KmDNHBBiQhVaTkxyDAv7EXnUZ7O6DDi", created_at: "2020-06-25T07:59:25.000000Z", …}
length: 2
__proto__: Array(0)
status: true
stream:
code: "CLB3"
created_at: "2020-06-25T06:28:12.000000Z"
id: 17
level: {id: 3, name: "Level 1", code: "LVL1", uuid: "U7iHTp2pyM843HwfJ3CEB66rrD2vKAJvBHcrRYSGgXvmSaWh6IN3dGu1vZl29CwKTlULAdzduTglYyRFmn6MdY9S2xLhWZkvhSz0", created_at: "2020-06-25T07:59:14.000000Z", …}
level_id: 3
name: "Class B"
updated_at: "2020-07-02T07:58:39.000000Z"
uuid: "cq44VJZSOjRk4bB3S1Oz7UGX4yTPVHLnMvKYX648yVz1etQjj7obvzNuI9ExYfMCivMkuwNSSokmy82xvFPEAalhpmM2kFIhNPra"
_

Answer 1

how to automatically select the current level_id and populate it to the select box
To fix this issue you will need to reset the select element html content before appending new children like so:
before the jQuery $.each loop just add
$('#sel_level').html('');
how do i can i fix this issue in modal when closing and re-open another modal the select option keeps on adding the previous data)
To automatically select the current level you can check if the stream.level_id in the response match the current level id inside the loop like so:
$.each(data.levels, function(i, level) {
$('#sel_level').append($('<option>', {
value: level.id,
text: level.name,
selected: level.id == data.stream.level_id
}));
});
Fina code
jQuery('body').on('click', '.open-modal', function() {
var stream_id = $(this).val();
$.get('streams/' + stream_id + '/edit', function(data) {
if (data.status == true) {
$('#sel_level').html('');
$.each(data.levels, function(i, level) {
$('#sel_level').append($('<option>', {
value: level.id,
text: level.name,
selected: level.id == data.stream.level_id
}));
});
}
jQuery('#stream_id').val(data.stream.id);
jQuery('#stream_name').val(data.stream.name);
jQuery('#stream_code').val(data.stream.code);
jQuery('#btn-save').val("update");
jQuery('#streamEditorModal').modal('show');
})
});