After working on this VueJS code snippet with a successful fetch for jokes, I encountered an issue where the div intended to be populated was not displaying anything.
window.onload = function () {
var app = new Vue({
delimiters: ['[[', ']]'],
el: '#app',
data: {
jokes: []
}
});
function postdata(app){
var initial_data = {'id': 1, 'model-name': 'Joke'}
var self = this;
fetch("\start-jokes\/", {
body: JSON.stringify(initial_data),
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
method: 'POST',
mode: 'cors',
redirect: 'follow',
referrer: 'no-referrer',
})
.then(response => response.json()).then((json) => { console.log(json['jokes'])
app.jokes.push(json['jokes'])
})
}
postdata(app)
};
The response jokes is structured as an Array of dictionaries with key-value pairs like key, text, and name.
https://i.sstatic.net/2dstd.png
Upon closer inspection and logging in the console (image sourced from the network tab in inspect element), it appears that nothing is being populated.
https://i.sstatic.net/z4KOk.png
Each element in the dictionary contains a get and set property which seems to be reactive. The challenge now is how to convert it into JSON format.
Despite trying to log app.jokes in the console, the result returned was undefined.