I am having a few issues outputting some array data. My array looks like the following
array:2 [▼
"folder1" => array:5 [▼
0 => "4.png"
1 => "2.png"
2 => "1.png"
3 => "3.png"
4 => "5.png"
]
"folder2" => array:5 [▼
0 => "2.png"
1 => "3.png"
2 => "4.png"
3 => "1.png"
4 => "5.png"
]
]
So this array is passed to my view. What I am attempting to do is display the folder names (folder1, folder2) as select options. This part is pretty straight forward (using Blade templating engine)
<div class="row">
<div class="col-md-7">
@if(!empty($fileData))
<select class="folderName" name="folderName">
@foreach($fileData as $folder => $files)
<option value="{{ $folder }}">{{ $folder }}</option>
@endforeach
</select>
@endif
</div>
</div>
The problem is that if for instance folder1 is selected from the select box, I then need to display the content of folder1 (4, 2, 1, 3, 5) as radio buttons. If folder2 is selected, it needs to display folder2's data as radio buttons. I would imagine Javascript is required to achieve this - the only thing I can think off is creating hidden divs and turning the on and off as a when is needed e.g.
@foreach($fileData as $folder => $files)
<div id="folder1">
@if($folder == 'folder1')
@foreach($files as $image)
<div class="radio">
<label><input type="radio" name="optradio">{{ $image }}</label>
</div>
@endforeach
@endif
</div>
<div id="folder2">
@if($folder == 'folder2')
@foreach($files as $image)
<div class="radio">
<label><input type="radio" name="optradio2">{{ $image }}</label>
</div>
@endforeach
@endif
</div>
@endforeach
Controlled by
$( ".folderName" ).change(function() {
if($(this).val() == 'folder1') {
$('#folder1').css('display', 'block');
$('#folder2').css('display', 'none');
}
else if ($(this).val() == 'folder2') {
$('#folder2').css('display', 'block');
$('#folder1').css('display', 'none');
}
});
The problem I am finding with this approach is repeating the foreach loop within my view. Additionally, it is creating duplicate folder divs for some reason.
Given what I am attempting to do, what would be the best way to approach this?
Thanks