I'm working with an array of objects and here is what it looks like:
const default_apps = [
{
'post_title': 'Excel',
}, {
'post_title': 'Word',
}, {
'post_title': 'SharePoint',
}];
console.log(default_apps);
const test = get_array_of_post_objects('application_launcher');
console.log(test);
Check out the console log for both: default_apps at the top and test at the bottom:
https://i.sstatic.net/nrvAI.png
Important note: Both arrays have post_title: "..." defined within them.
I'm wondering why, when I use the default_apps array in my vue app, I get a specific result as shown below:
https://i.sstatic.net/8FYPU.png
But if I switch out default_apps.map with test.map, I end up with an empty array like this:
https://i.sstatic.net/GzEvR.png
These arrays are quite similar so I'm a bit confused - any help would be appreciated!
new Vue({
name: 'o365-edit-modal-wrapper',
el: '#o365-modal-edit-wrapper',
data: function() {
return {
available_list: [],
selected_list: default_apps.map((name, index) => {
return {
name: name.post_title,
order: index + 1,
fixed: false
};
}),
editable: true,
isDragging: false,
delayedDragging: false,
}
},
});
If you're interested, here's the get_array_of_objects function:
function get_array_of_post_objects(slug)
{
let items = [];
wp.api.loadPromise.done(function () {
const Posts = wp.api.models.Post.extend({
url: wpApiSettings.root + 'menus/v1/locations/' + slug,
});
const all_posts = new Posts();
all_posts.fetch().then((posts) => {
items.push(...posts.items);
});
});
return items;
}