$.i18n().load({
'en': 'assets/i18n/en.json',
'ar': 'assets/i18n/ar.json',
}).done(function () {
$('body').i18n();
});
This made the code work. I think the translation should only take place after the json file is loaded.
The script is going to traverse all elements inside body and replace their contents with the messages under the provided translation keys. If the key cannot be found, the initial content will be displayed as a fallback. -- source -