Combine Two Broadcasters to Compare Values
We are both fetching a word from an API and type in text into an input box. We need a way to compare those two values to know if our guess is correct. We can do this by combining the two initial broadcasters And using operators to compare their values as each new value is pushed through. In this lesson, we write a combine operator that takes values from two broadcasters and pushes each value through in the form of an array with two values.
John Lindquist: [0:00] Let's move our share operator over into our operators, paste it down here and export it. Go back and make sure we import it. Let's bring back our input box within onInput event bound to an onInput listener -- I'm going to ditch the button, we don't need that for our game -- and bring in an onInput instead.
[0:34] The last bit of cleanup is we don't need another word, and we don't need this onClick anymore, so we don't need the map broadcaster anymore, which means remove the share back into here and remove all of this.
[0:50] With our input and a word to guess, we're set up to build our game. What we need is a way to combine our word and our onInput, so that we can compare them together. If we looked at our broadcasters, I'm going to go back to merge.
[1:07] This was a way of taking two broadcasters and pushing out one value or the other value to the same listener. That's pretty close to what we need. Let's build something called combine, which can take two broadcasters, a broadcaster1 and a broadcaster2, return the listener. We're going to keep track of value1 and value2.
[1:35] As the values come into the broadcasters, so broadcaster1 will receive values, and broadcaster2 will receive values, we can assign value1 to that value, and value2 to this value. Then for the listener, we can send in an array of values, one being value1, and one being value2.
[2:02] We can just copy and paste this down here, so that this time, when either broadcaster fires, it's going to push out both values. It will do that to the same listener.
[2:13] We'll go ahead and set up the cancels here. We'll have a cancel1 and a cancel2. Then we can just copy and paste the cancel from merge and return that one.
[2:27] Now, let's bring in combine into our game up here. We'll go ahead and import combine. Right now, our game broadcaster can be a combination of the target value. Let's import that onInput, and the getWord broadcaster.
[2:50] We can define our game as a use broadcaster of game broadcaster, and let's go ahead and render that out. We'll render out our game. As I type something, right now this is rendering out an array with this and this.
[3:08] Let's make sure that's working right by wrapping this in JSON.stringify. I'll type something and you'll see we're now in a place where we can compare two values.