My server is currently hosting a Vue.js app. When I enter http://localhost:9999/ into my browser, the browser fetches 4 crucial files: post.js, get.js, vue.js, and index.HTML containing the Vue code.
I have successfully implemented a dynamic ordered list where each list item includes buttons to add or remove elements, along with a debug button that logs variables to the console.
Now, I need to send a GET request to my server to retrieve an array of JSON data which will populate another ordered list.
I've attempted the following approaches without success:
//get("http://localhost:9999/text/1", inputData)
//get("http://localhost:9999/text/1").then(inputData)
//inputData = get("http://localhost:9999/text/1")
The content of get.js looks like this:
// This file is correctly included in the vue.js index.HTML
//<script SRC="get.js"> </script>
function get(url, params) {
// Return a new promise.
return new Promise(function(resolve, reject) {
// Perform XHR operations
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.setRequestHeader('Content-type', 'application/json');
req.onload = function() {
// Check for successful status
if (req.status == 200) {
resolve(JSON.parse(req.response));
}
else {
reject(req.statusText);
}
};
// Handle network errors
req.onerror = function() {
reject("Network Error");
};
// Send the request
req.send(params);
});
}
Following the Vue.js method block, I call:
mounted() {
this.$nextTick(function () {
var inputData=[]
inputData = get("http://localhost:9999/text/1")
app.vueData = inputData
console.log(inputData)
console.log(JSON.stringify(inputData))
console.log(';)')
})
}
Although the Promise contains the data, I'm unable to transfer it to the variable.
Promise {<pending>}
__proto__: Promise
catch: ƒ catch()
constructor: ƒ Promise()
finally: ƒ finally()
then: ƒ then()
Symbol(Symbol.toStringTag): "Promise"
__proto__: Object
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Array(4)
0: {text: "This List"}
1: {text: "was pulled"}
2: {text: "from the"}
3: {text: "server"}
length: 4
__proto__: Array(0)
To keep comments intact, I had to be creative:
@Apal Shah I appreciate your response. Your code appears cleaner than the then() alternative. Before reading your solution, I actually identified the issue through extensive console logging.
console.log('app.vueData prior assignment from inputData: ')
console.log(app.vueData)
app.vueData = inputData
console.log('inputData after assignment: ')
console.log(inputData)
console.log('JSON.stringify(inputData)')
console.log(JSON.stringify(inputData))
console.log(';)')
Console Output:
get block:
app.vueData prior assignment from inputData:
[__ob__: Observer]
length: 0
__ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__: Array
inputData after assignment:
[__ob__: Observer]
length: 0
__ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__: Array
JSON.stringify(inputData)
[]
;)
https://github.com/vuejs/vue-devtools
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
(4) [{…}, {…}, {…}, {…}]
0: {text: "This List"}
1: {text: "was pulled"}
2: {text: "from the"}
3: {text: "server"}
length: 4
__proto__: Array(0)
Excited to test the solution now.
The corrected solution is as follows:
mounted() {
this.$nextTick(async function () {
console.log('get block: ')
console.log('app.vueData before assigning from get() ')
console.log(app.vueData)
app.vueData = await get("http://localhost:9999/text/1")
console.log('app.vueData after assignment: ')
console.log(app.vueData)
console.log('JSON.stringify(app.vueData)')
console.log(JSON.stringify(app.vueData))
})
console.log(';)')
}
Note that the "async" keyword needed to be placed before the function declaration, not inside mounted() or this.$nextTick to work effectively.