1

I've run into an issue where I'm unable to get the value I need from inside a callback that's passed to an instantiation of a JavaScript class.

let value;
const mutationObserver = new MutationObserver((mutations) => {
  return values.map((mutation) => {
    value = mutation.target.childElementCount;
    return value;
  })
})
console.log("value", value) <= undefined

const element = document.getElementsByClassName('pac-container')[0];
if (element) {
  mutationObserver.observe(element, {
    childList: true,
    subtree: true
  });
}

I'm using the MutationObserver because I'd like a way to know, in real-time, how the DOM is being mutated by the results from the googlePlaces API. Since I don't have control over that markup - this seems like the next best thing.

I have explored using the AutoCompleteService - but that would require us to re-implement the existing googlePlaces using the AutoCompleteService call, instead of the AutoComplete API endpoint.

The approach I'm using here is in perfect sync with the results.

I don't think I've run into before - and the difference here is that the value is set inside this instance of a class.

How do you allow the value retrieved inside the class to be defined outside the scope of the function inside the class where it's handled?

We're making the call to the googlePlaces API like this:

const autoComplete = new this.googleApi.places.Autocomplete(
  this.props.inputRef,
  INIT_OPTIONS
);

An object is returned after the call - and I can see the request being made - and there is new data after each search - but there is no clean JSON response - and the data is embedded in some optimized way deep in the object.

zero_cool
  • 3,960
  • 5
  • 39
  • 54
  • 1
    If that class is a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), use [`.then()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) instead of trying to access it in the outer scope. – Patrick Roberts Jan 22 '19 at 23:05
  • 1
    Although, looking at your code, it seems possible that you're using a [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver). Don't try to access it in the outer scope. This question is an XY problem. You're describing your failed attempt at a solution instead of describing what your actual problem is. See [What is the XY Problem?](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) – Patrick Roberts Jan 22 '19 at 23:07
  • First question is, what is the actual class you are passing this callback to? Second question is, what are you trying to do with the value in the outer scope? Can it be used directly in the callback instead? – Patrick Roberts Jan 22 '19 at 23:09
  • I am using a MutationObserver - and it does what I want it to - but I need access to the value from the innerScope in the outerScope - is it possible? – zero_cool Jan 22 '19 at 23:11
  • @PatrickRoberts This is in a react component - I don't want to wrap the output of my react component in this MutationObserver - just need the value – zero_cool Jan 22 '19 at 23:16
  • 1
    It's not possible. `MutationObserver` callbacks are asynchronous, and you're expecting the value to be updated synchronously. If you want a better understanding of why this doesn't work, read [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/q/23667086/1541563). It's still not clear why you need the value synchronously. If you're using react, can't you use `this.setState()` when the value changes? – Patrick Roberts Jan 22 '19 at 23:20
  • Also be aware that your using the `MutationObserver` implies you are not in control of the source that is manipulating the DOM you're observing. If you _are_ in control of that source, you should be updating the value _there_ instead of watching the DOM for side-effects of other code. – Patrick Roberts Jan 22 '19 at 23:25
  • Do you know a simple way to get the number of results that the googlePlaces API is current displaying using their autoComplete API? – zero_cool Jan 22 '19 at 23:27
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187146/discussion-between-zero-cool-and-patrick-roberts). – zero_cool Jan 22 '19 at 23:29
  • 1
    They have a [REST API](https://developers.google.com/places/web-service/autocomplete#place_autocomplete_responses). You can just use `predictions.length`. – Patrick Roberts Jan 22 '19 at 23:37

0 Answers0