create jquery array from php ajax response JSON object - php

Question

I have an en.php file with an array inside, like this:
$lang = array(
// MENÚ LATERAL
"bienvenido" => "Welcome",
"panel_administracion" => "Administration panel",
"administracion" => "Administration",
"gestion_usuarios" => "Users Management",
"roles_permisos" => "Roles and Permissions",
"perfiles" => "Profiles",
"apariencia" => "Appearance",
"configuracion" => "Settings",
"gestion_scripts" => "Script Management",
"gestion_escenarios" => "Scenario Management",
"planificador" => "Planner",
"monitorizacion" => "Monitoring",
"resultados_ejecuciones" => "Executions Results",
"dashboard" => "Dashboard",
// USUARIOS
"usuario" => "User",
"nombre_pagina" => "Users",
"nuevo_usuario" => "New User",
"nombre_usuario" => "User Name",
"perfil" => "Profile",
"rol" => "Role",
"idioma_sitio" => "Language",
"password" => "Password",
"repetir_password" => "Repeat Password",
"guardar" => "Save",
"administracion_usuarios" => "User administration",
"actualizar_usuario" => "Edit user",
"acciones" => "Actions"
);
And I would like store this array in a js array, inside an .js file to access to data always I need, and this code do it this. But I receive this alert: [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental...
var traducciones = function () {
var tmp = null;
var action = "getTraducciones";
$.ajax({
'async': false,
'type': "POST",
'global': false,
'dataType': 'html',
'url': '../egea/lib/egeaAjax/fAjaxUsuarios.php',
'data': { 'action': action },
'success': function (data) {
var datos = JSON.parse(data);
tmp = datos;
}
});
return tmp;
}();
PHP function:
function getTraducciones(){
session_start();
$traducciones = '';
$u = $_SESSION['usuario'];
if (isset($u) === true){
$lang = getLanguage($u);
if(isset($lang) === true){
require "../../lang/".$lang.".php";
}else{
require "../../lang/es.php";
}
}
echo json_encode($lang);
}
NOTE: async: false is deprecated.
How can I do it, without ajax async:false call?.
Thanks.

Answer 1

Return promise instead of the value itself:
var traducciones = function () {
return new Promise((resolve, reject) => {
var action = "getTraducciones";
$.ajax({
'async': true,
'type': "POST",
'global': false,
'dataType': 'html',
'url': '../egea/lib/egeaAjax/fAjaxUsuarios.php',
'data': { 'action': action },
'success': function (data) {
var datos = JSON.parse(data);
resolve(datos);
},
'error': reject
});
});
}();
Then use it like:
traducciones.then(function(datos) {
// the code that uses the data
}, function() {
// code called if data loading failed
});
By the way, if you really need to have the data loaded in a synchronous way, you may consider loading it as a JS code instead of JSON – i.e. replace:
echo json_encode($lang);
in your PHP code with:
Header('Content-type: text/javascript; charset=utf-8');
// or whatever other charset you are using ^^^^^
echo "var traducciones = " . json_encode($lang) . ";\n";
And then load it as a normal script:
<script src="../egea/lib/egeaAjax/fAjaxUsuarios.php"></script>