Search Function Not Working

Code Feedback
1

I know I don’t have to do a search function but I thought it might be easy to integrate, using the code from the Wikipedia Viewer.

It isn’t.

It will not show active channels until the user does a search, and then if you do repeated searches it duplicates the output.

http://codepen.io/jameswinfield/pen/bZmzkJ

This is the particular code for the search:

$("#searchbutton").on(“click”, jsonCall);
$("#search").keypress(function(e){
if(e.which === 13){
jsonCall();
}
});
var searchinput = $("#search").val();

function jsonCall() {
searchinput = $("#search").val();
channels.unshift(searchinput)

Is this something I can easily fix?

If not then I might just forget about it and move on.

Thanks
James

2

Call your function in flow of program, (dont wait to user click that button), so u get content from twitch to show him
I dont know did u want to search through channels that exist in your array, or u want to fetch data info for searched channel from twitch

In first case your mistake is here, u concate all and doesnt fetch data just for searched element
channels.unshift(searchinput)

In second, u dont need to fetch anything from twitch cause u need to implement offline search aka search for content in your array that is once fetched

3

I wanted to fetch data info from Twitch.

Thanks for your advice, I’ve tried putting jsonCall(); in various places - most places it won’t initiate, some places it crashes the browser - where I have it now on line 66 it does run, but then duplicates upon search.

An improvement of sorts! Am I understanding your advice though?

4

I implemented a search function on my Twitch project as well. To make sure I didn’t get duplicate results I did an arr.forEach(jsonCall()) for the initial run through (ex. line 66 where you’re calling it now). When someone searched I checked the term against the array and pushed it to the array of channels, but just sent the individual search term to jsonCall(). Since you’re using the for loop inside your jsonCall function right now it’s going through the entire array every time someone searches - that’s why you’re getting those duplicates. Hope that helps :slight_smile:

5

I need more reply to understand does u understand my advice

First u need to solve it in tasks that u want someone perform, and when u know what u doin, syntax > “doesnt matter”

Js is simple likeany language, just tell him what u want
Tell him to fetch data for listed chanells in your array, and then print
Tell him that u want to fetch data for searched item when user enter text and click search and then to erase data from page for this previous chanells, and print that fatched data

6

I do like your project. I don’t think mine is too dissimilar in structure but I still cannot get the search function to work.

However I think I’m very close!

This one adds the searched for channel to the array as can be seen when I log it to the console, but does not add it to the list on screen.

This one does add it to the list on screen, but not until someone the user does a search.

http://codepen.io/jameswinfield/pen/XKojgq

So so close. Any further hints please?!

7

You are really close! I had an easier time getting your second link to work, so I’ll try to explain that one.

  1. Change your jsonCall to take 1 input at a time (ie, move the for loop out of it, change it to expect a single argument)
  2. Somewhere within your document.ready function (I put it right before the closing bracket) use the for loop you had in jsonCall to call jsonCall once for each index in channels. (This will make sure you get your saved channels when you first open the app)
  3. Move your logic for handling the searchInput from jsonCall to the function in your keypress or click function. From your click/keypress function call jsonCall, but pass in only the searchInput instead of the entire channels array (that way you don’t get the duplicates you were getting before)

Hopefully this isn’t too confusing.

1 Like
8

Hmmmm I seem to have messed it up more?

I moved the for loop out which should have solved points 1 and 2, and I think I did 3 but not sure? Either way it doesn’t add anything to my channels array now.

http://codepen.io/jameswinfield/pen/VjqPKy?editors=1111

9

Ack, I think that’s my bad, I think I changed one other thing that I didn’t mention. I thought your jsonCall function included your $.getJSON() functions (essentially lines 24-55 of your current version), but now that I look at it again doesn’t. My hints assumed that, because that’s what really needs to be run for each channel you wanted to add. Sorry.