How do i iterate through JSON in VueJS? - mysql

Question

I am storing some settings in the database with keys and JSON data but when I get these settings from a Laravel API, it returns an array which becomes a hectic work in reassigning data to the input fields. I want to know if there is an easier way of doing it.
So far I have tried iterating and using the switch statement to identify keys and reassign them. But the problem is I can't access the VueJS data variable in the loop.
Here is a look at the database table:
Database Table
Here are the objects I am using in Vue:
helpful_notification: {
email: false,
sms: false,
push: false,
},
updates_newsletter: {
email: false,
sms: false,
push: false,
},
Here is my Code to Iterate over results:
axios.get('/api/notificationsettings')
.then(response => {
var data = response.data;
let list = [];
console.log(data)
$.each(data, function(i, j){
switch(j.key){
case 'transactional':
var settings = JSON.parse(j.settings)
var x = {
transactional : settings
}
list.push(x)
break;
case 'task_reminder':
var settings = JSON.parse(j.settings)
x = {
task_reminder : settings
}
list.push(x)
break;
}
});
this.transactional = list;
// this.task_reminder= list.task_reminder;
console.log(list);
})
.catch(error => {
});

Answer 1

In JavaScript, functions have their own scope, save for a few exceptions. Which means that, inside your anonymous function (i.e:
$.each(data, function(i, j){
// this here is the function scope, not the outside scope
})
...), this is not the outside scope, it's the function's scope
There are two ways to make the outside scope available inside your function:
a) place it inside a variable
const _this = this;
$.each(data, function(i, j){
// this is function scope,
// _this is outside scope (i.e: _this.list.task_reminder)
})
b) use an arrow function
$.each(data, (i, j) => {
// this is the outside scope
// the arrow function doesn't have a scope.
})
The above is a simplification aimed at helping you access the outside scope inside your function. But this can differ based on the context it is used in. You can read more about this here.