What’s the best way if I want to get the vaue out of the folowing function:
function displayAll(data){
let holdVar = JSON.parse(data);
}
The holdVar variable contains an array. I was thinking of doing the folowing:
var items = new Array();
function displayAll(data){
let holdVar = JSON.parse(data);
items.push(holdVar);
}
console.log(items);
But this adds another array with [] on top of the existing array and I don’t want to access it like this items[0] outside my function.
let items = [];
function displayAll(data) {
items = JSON.parse(data);
}
console.log(items);
Not entirely sure what you’re doing this for, but if the json is an array, that would at least avoid the extra layer.
Is the JSON data an array, where you are wanting to get just one item from the array?
In that case, a second function parameter can be used for the index.
function displayAll(data, index) {
let array = JSON.parse(data);
return array[index];
}
Thank. I tried what you mentioned and for some reason I am getting an empty array as shown below:
let items = [];
function displayAll(data){
items = JSON.parse(data);
console.log("Printing items inside");
console.log(items);
}
console.log("Printing items outside");
console.log(items);
However, it does print the items inside the function. Here are two screenshots:
For outer console log :
For the inner console log:
Thanks for your response. Please see my above response to m_hutley response get more insight on my problem.
Well yes, because you havent invoked the function yet.
You’ve told it:
“Start with an empty field.”
let items = [];
“Here’s the blueprint for where you’re going to park the cars on the field when I tell you to.”
function displayAll(data){
...
}
“Now show me what’s on the field.”
console.log(items);
You havent told it to park the cars yet. So the field’s empty still.
(“Tell it to park the cars” in this case, would be something like… displayAll(hereissomedata); )
Otherwise, if you are actually wanting to display the whole array on the webpage, you can use something like the following:
<pre id="result">
</pre>
function displayAll(data) {
let array = JSON.parse(data);
let result = document.querySelector("#result");
result.innerHTML = JSON.stringify(array, null, " ");
}
The above code can be played with at https://jsfiddle.net/51xr8zq6/
if you’re wanting to display it in the console, then you can just do console.log(array) instead.
Makes sense. Thanks for the explanation. But what if I want the value of items outside the function without invoking the displayAll function?
function displayAll(data){
items = JSON.parse(data);
console.log("Printing items inside");
console.log(items);
}
The reason I am trying to get the value of items outside the displayAll function is that this function is the first point where I’m getting data back from a Direct Web Remoting call which is similar to Ajax call. Here’s what my function looks like with DWR call before it.
ManageDisplay.displayList(displayAll);
function displayAll(data){
items = JSON.parse(data);
console.log("Printing items inside");
console.log(items);
}
So when I call this displayList method in my ManageDisplay java class like this ManageDisplay.displayList(displayAll); , I am capturing the data for the first time inside displayAll(data) function.
One option I’ve tried is this and it works but has following issue:
let items = new Array();
function displayAll(data){
var parsedData = JSON.parse(data);
items.push(parsedData);
}
And then if I print the following:
console.log("Printing items outside");
console.log(items);
It will print fine except that, there is another array inside an array which I don’t want. It adds an additional [] inside the items array coming from inside of displayAll function. This is how it prints outside with above changes:
Thank you. The problem is I am getting the data for the first time inside the function as explained above and that’s the problem I believe here.
Then, you can log items[0] instead of just items.
Then you get the answer you got. Until you invoke the displayAll function, items has no value.
Consider a simpler function.
function addtwo() {
num += 2;
}
All it does it add 2 to num when addtwo() is called.
Q: What’s the value of num if you dont invoke the function?
A: Whatever you started with. You havent done anything, so nothing has changed. Inertia rules the day!
I need an answer to one thing before I respond to this, to confirm my suspicions:
When you ran the code I gave you, which “Printing items” line showed up first in the log?
In my case, the Printing items outside is always printed first and then the one which is inside.
Right, that’s what i thought.
I’m… going to try not to go too into the weeds on this, but that’s what we call a race condition.
it saying to the code “Go and invoke this command, which (i’m guessing) goes and fetches some data, and then pass it to the displayAll function”.
Javascript, in its efforts not to freeze up the browser while waiting for a fetch request from another server, calls this function asynchronously. Meaning it dispatches a separate process to go do that, while it continues reading your code.
So now we’ve got two bits of code running at the same time:
The trick is that both these pieces of code are going to be interacting with the items variable - the main bit is trying to read it, and the displayList bit is trying to write to it.
One of them gets there first; which one is not guaranteed.
In your case, the main thread got there first, printed out items, which at that point had not been edited and so was empty.
Then the displayList thread got there, and filled it.
So how do you fix that.
Well, basically, you make the displayAll function do anything and everything you want to do with items; or call other functions that use it, after you know you’ve written the array.
Yeah, that’s what I ended up doing. Everything inside displayAll function. Thanks for spending time on my issue and explaining it very nicely.
This was also creating issue and I believe because of what m_hutley explained in his post above since I’m using ManageDisplay.displayList(displayAll);
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.