We Keep Coding

How to fix error GET http:... 404(not found)

I want to get value of dropdownlist and show textbox but my code dont working
This is my code:
Controller:
public function socaucuachuong($id)
{
$units = CauHoi::groupBy('chuong')->select('chuong', CauHoi::raw('count(id) as Total'))->where('idmonthi','=', $id)->get()->toArray();
return view('DeThi::dethi',compact('units'));
}
View: dethi.blade.php
$('select').select();
function get_units() {
var id = $('#id_select').val();
var list = $('#dschuong');
list.empty();
var url = "{{ route('dthi.socaucuachuong') }}"+'/'+id;
var success = function (result) {
if (result.length <= 0) {
var item = '<div class="input-field"><input type="text" disabled value="Môn này hiện chưa có câu hỏi nào"></div>';
list.append(item);
} else {
for (i = 0; i < result.length; i++) {
var item = '<div class="input-field"><label for="unit-' + result[i].chuong+ '">Nhập số câu hỏi chương ' + result[i].chuong+ ' (có ' + result[i].Total + ' câu) <span class="failed">(*)</span></label><input type="number" max="' + result[i].Total + '" class="unit_input" onchange="set_sum(' + result[i].Total + ')" name="unit-' + result[i].chuong+ '" id="unit-' + result[i].chuong+ '" required></div>';
list.append(item);
}
}
};
$.get(url, success);
}
Route:
Route::get('dethi/socau', 'App\Modules\DeThi\Controllers\DeThiController#socaucuachuong')->name('dethi.socaucuachuong');
Route::resource('dethi', DeThiController::class);
And my error when I select dropdownlist:
How can I fix this?

You are missing a route parameter for the ID you're passing along.
https://laravel.com/docs/8.x/routing#required-parameters
Basically, your route needs to be updated to
Route::get('dethi/socau/{id}', 'App\Modules\DeThi\Controllers\DeThiController#socaucuachuong')->name('dethi.socaucuachuong');

Route
Route::get('dethi/socau/{id}', 'App\Modules\DeThi\Controllers\DeThiController#socaucuachuong')->name('dethi.socaucuachuong');
Javascript (blade)
var url = '{{ "dthi.socaucuachuong", ":id") }}';
url = url.replace(':id', id);

How to pass an array data from controller to blade file Laravel

I'm trying to pass an array from Controller to Blade
My Controller:
public function socaucuachuong($id){
$socaucuachuong = CauHoi::groupBy('chuong')->select('chuong', CauHoi::raw('count(id) as Total'))->where('idmonthi','=', $id)->get()->toArray();
return view('DeThi::dethi')->with('socaucuachuong', $socaucuachuong);
}
My Blade file:
$('select').select();
function get_units(id) {
var list = $('#dschuong');
list.empty();
var url = "{{ route('dethi.socaucuachuong') }}"+'/'+ id;
var success = function (result) {
if (result.length <= 0) {
var item = '<div class="input-field"><input type="text" disabled value="Môn này hiện chưa có câu hỏi nào"></div>';
list.append(item);
} else {
for (i = 0; i < result.length; i++) {
var item = '<div class="input-field"><label for="unit-' + result[i].chuong + '">Nhập số câu hỏi chương ' + result[i].chuong + ' (có ' + result[i].Total + ' câu) <span class="failed">(*)</span></label><input type="number" max="' + result[i].Total + '" class="unit_input" onchange="set_sum(' + result[i].Total + ')" name="unit-' + result[i].chuong + '" id="unit-' + result[i].chuong + '" required></div>';
list.append(item);
}
}
};
$.get(url, success);
}
My Route file:
Route::post('socaucuachuong', 'DeThiController#socaucuachuong')->name('dethi.socaucuachuong');

You can get array values in blade like this.
<script>
var socaucuachuong = #JSON($socaucuachuong); // this will be array value.
</script>

How to get this data using the loop?

How do i show all the data by using the loop to display all the data from json to html ?
ATM , I am able to print one of the data. but if i am using data[i] the code will not display any data.
I think I mess up the the concept of object and array.
please advice me , how to loop thru object , like array?
thanks
var getWeather = document.getElementById('weather');
var requestWeather = new XMLHttpRequest();
//+'-31' +'&lon='+'150'
requestWeather.open('GET','https://fcc-weather-api.glitch.me/api/current?lat=-31&lon=150');
requestWeather.onload = function () {
var weatherData = JSON.parse(requestWeather.responseText);
console.log(weatherData);
getHTML(weatherData);
};
requestWeather.send();
function getHTML(data) {
var weatherString = "";
for(var i in data.weather ){
var x= data.weather[i].main;
weatherString+= "<p class='weather'>" + x + "</p>";
// weatherString+= "<p>" + data.currently.summary + "</p>";
// console.log(data[i].city);
}
getWeather.insertAdjacentHTML("beforeend", weatherString);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="weather"></div>

to get all data check for object and do recursive loop
var getWeather = document.getElementById('weather');
var requestWeather = new XMLHttpRequest();
//+'-31' +'&lon='+'150'
requestWeather.open('GET', 'https://fcc-weather-api.glitch.me/api/current?lat=-31&lon=150');
requestWeather.onload = function() {
var weatherData = JSON.parse(requestWeather.responseText);
//console.log(weatherData);
getHTML(weatherData);
};
requestWeather.send();
function getHTML(data) {
var weatherString = "";
for(var i in data) {
var x = data[i];
if(typeof(x) == "object") {
getHTML(x);
}
else {
weatherString += "<p class='weather'><b>" + i + "</b>: " + x + "</p>";
// weatherString+= "<p>" + data.currently.summary + "</p>";
// console.log(data[i].city);
}
}
getWeather.insertAdjacentHTML("beforeend", weatherString);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="weather"></div>

var getWeather = document.getElementById('weather');
var requestWeather = new XMLHttpRequest();
//+'-31' +'&lon='+'150'
requestWeather.open('GET', 'https://fcc-weather-api.glitch.me/api/current?lat=-31&lon=150');
requestWeather.onload = function() {
var weatherData = JSON.parse(requestWeather.responseText);
getHTML(weatherData);
};
requestWeather.send();
function getHTML(data) {
var weatherString = "";
for (var i in data.weather) {
var x = data.weather[i].main;
weatherString += "<p class='weather'>" + x + "</p>";
$.each(data.main, function(i, f) {
var main = "<div>" + i + ": " + f + "</div>";
$(main).appendTo("#main");
});
}
getWeather.insertAdjacentHTML("beforeend", weatherString);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="weather"></div>
<div id="main"></div>

use foreach loop to iterate over all object
read more from here

How not to re-write all of those values all over the Function?

As you can see I have this function:
var review = function() {
$('a[name=review_button]').live("click", function (e) {
e.preventDefault();
/*
* #array of reservations
* #all of the fields
*/
var $tr_options = '';
var reservations = [];
$('#custom-headers option:selected').each(function (i, selected) {
reservations[i] = $(selected).text();
});
var amount = $('input[name=amount-price]').val();
var currency_value = $('input[name=currency-value]').val();
var currency_name = $('.currency_appendto option:selected').html();
var actual_amount = $('input[name=actual-amount]').val();
var actual_remaining = $('input[name=actual-remaining]').val();
var funds_arrival_date = $('input[name=funds-arrival]').val();
var paid_to = $('.paidto option:selected').html();
var checkbox = $('.multi-transaction:checked').map(function () {
return this.value
}).get();
var options = troptions(reservations, amount, currency_name, currency_value, actual_amount, actual_remaining, funds_arrival_date, paid_to);
$.each(options, function (k, v) {
$tr_options += '<tr>' + '<td>' + k + '</td>' + '<td>' + v + '</td>' + '</tr>';
}); //one line creating trs awesome
var appendto = (
'<table class="table table-striped mb-none">' + '<thead>' +
'<tr>' + '<th>Information</th>' + '<th>Values</th>' + '</tr>' +
'</thead>' +
'<tbody>' + $tr_options + '</tbody>' +
'</table>'
);
$('[name=review-information]').html(appendto);
});
$('button[name=submit-transaction]').live("click", function (e) {
e.preventDefault();
$.ajax({
url: '/transactions/submit',
type: 'POST',
data: {
amount: $('input[name=amount-price]').val(),
currency_value: $('input[name=currency-value]').val(),
currency_name: $('.currency_appendto option:selected').html(),
actual_amount: $('input[name=actual-amount]').val(),
actual_remaining: $('input[name=actual-remaining]').val(),
funds_arrival_date: $('input[name=funds-arrival]').val(),
paid_to: $('.paidto option:selected').html(),
},
success: function (data) {
console.log(data);
}
});
});
}
review();
$(".date-mask").inputmask("d/m/y",{ "placeholder": "dd/mm/yyyy" });
$(".amount-czk").inputmask('integer', { rightAlign: false });
});
Where i have all of those values:
var reservations = [];
$('#custom-headers option:selected').each(function (i, selected) {
reservations[i] = $(selected).text();
});
var amount = $('input[name=amount-price]').val();
var currency_value = $('input[name=currency-value]').val();
var currency_name = $('.currency_appendto option:selected').html();
var actual_amount = $('input[name=actual-amount]').val();
var actual_remaining = $('input[name=actual-remaining]').val();
var funds_arrival_date = $('input[name=funds-arrival]').val();
var paid_to = $('.paidto option:selected').html();
And i need to reuse them in multiple areas of the app, however i don't want to re-write those elements all of the time. Writing those values outside the review function returns the .val(); of unidentified. as those values always change .. How can i make a function that will give me back access to all of those values upon call?

Just return them as properties of an Object
function getValues() {
var o = {};
o.reservations = [];
$('#custom-headers option:selected').each(function (i, selected) {
o.reservations[i] = $(selected).text();
});
o.amount = $('input[name=amount-price]').val();
o.currency_value = $('input[name=currency-value]').val();
o.currency_name = $('.currency_appendto option:selected').html();
o.actual_amount = $('input[name=actual-amount]').val();
o.actual_remaining = $('input[name=actual-remaining]').val();
o.funds_arrival_date = $('input[name=funds-arrival]').val();
o.paid_to = $('.paidto option:selected').html();
return o;
}
Then access as
var values = getValues();
values.actual_amount; // foo

javascript inline code link generating chrome extension

I'm trying to make an extension for chrome that grabs data from a website and I'm having trouble making the links clickable. I CAN NOT use javascript inside the link (ex: href="javascript:myfunction(param);")
I need to create a div for each title, then create a onclick function that handles the div's innerhtml, and I can't get it to work.
here is my code so far:
document.addEventListener('DOMContentLoaded', function () {
$().ready(function () {
var url = 'http://somewebsite';
$.get(url, function (data) {
data = data.split("<tr name=\"hover\">");
var name;
var link;
var count = data.length;
count++;
for(var i = 1; i < data.length; i++){
data[i] = data[i].replace("<br>","<br />");
data[i] = data[i].replace("class=\"thread_link\"", "");
data[i] = data[i].replace("<td class=\"forum_thread_post\" align=\"center\">0</td>","");
data[i] = data[i].replace("<td class=\"forum_thread_post\">","");
data[i] = data[i].replace("</td>","");
data[i] = data[i].replace('<td class="forum_thread_post" align="center">0</td>','');
if(i != data.length-1){
data[i] = data[i].replace("<a href=\"", "");
data[i] = data[i].replace("</a>", "");
data[i] = data[i].split("\" >");
data[i][1] = data[i][1].split("<");
document.write('<div id="' + data[i][1][0] + '">' + data[i][1][0] + data[i][0] + "</div><br /><br />");
}else{
data[i] = data[i].split("</table>")[0];
data[i] = data[i].replace("<a href=\"", "");
data[i] = data[i].replace("</a>", "");
data[i] = data[i].split("\" >");
data[i][1] = data[i][1].split("<");
document.write('<div id="' + data[i][1][0] + '">' + data[i][1][0] + data[i][0] + "</div>");
}
}
//document.body.innerHTML = '';
//console.log(data);
});
});
});
document.write('</script>');
function getshow(url){
alert(url);
document.body.innerHTML = '';
$.get("http://somewebsite" + url, function (dat) {
document.write(dat);
});
}