We Keep Coding

JS — how to append Array of Objects with files to FormData?

I'm developing admin dashboard with Vue, Laravel & Axios.
And I have some problems with trying to upload files to api.
I replaced some real data to type of data
On Client-side I have Array of Objects:
[
{
id: random_generated_id,
img: {obj},
img_is_fullwidth: boolean,
site_url: string,
description: string
},
{
id: random_generated_id
img: {obj},
img_is_fullwidth: boolean,
site_url: string,
description: string
}
...
]
Objects can be added to Array:
addObject() {
this.array.push({
id: new Date().valueOf(),
img: null,
img_is_fullwidth: null,
site_url: null,
description: null
})
}
<div v-for="(content, index) in array" :key="content.index">
<input type="file" :ref="'content' + content.id" v-on:change="handleFileUpload(content.id)">
<label class="checkbox">
<input type="checkbox" v-model="content.img_is_fullwidth">
is fullwidth?
</label>
<input type="text" v-model="content.site_url" required>
<input type="text" v-model="content.description" required>
</div>
<button #click.prevent="addContent">Add content</button>
And I'm using random ids to attach image file to object by:
<input class="file-input" type="file" :ref="'content' + content.id" v-on:change="handleFileUpload(content.id)">
handleFileUpload(itemId) {
var itemIndex = this.array.findIndex(i => i.id === itemId)
this.array[itemIndex].img = this.$refs['content' + itemId][0].files[0]
}
So the problem is when I'm trying to post this data to api with axios,
I get error:
Trying to get property 'img' of non-object
It's happened cause I'm using JSON.stringify() and image object transforms to image array:
let fd = new FormData()
fd.append('array', JSON.stringify(this.array))
Part of Laravel Controller:
$array = json_decode($request->array, true);
foreach ($array as $content) {
$newContent = new WorkContent;
$contentImg = $content->img;
$contentName = uniqid();
$contentExt = $contentImg->getClientOriginalExtension();
$contentPath = $contentImg->storeAs('works/'.$request->client.'/'.$request->slug, $contentName.'.'.$contentExt);
$newContent->img_url = $contentPath;
if ($content->img_is_fullwidth == 'true') {
$newContent->img_is_fullwidth = true;
} else if ($content->img_is_fullwidth == 'false') {
$newContent->img_is_fullwidth = false;
}
$newContent->site_url = $content->site_url;
$newContent->description = $content->description;
$newContent->save();
$work->contents()->attach($newContent);
}
So, the question is:
Any ideas how to solve the problem?

Found solution by myself:
$contentArray = json_decode($r->contents, true);
$contentImgs = $r->contentImgs;
$imgIndex = 0;
for ($i = 0; $i < sizeof($contentArray); $i++) {
if($contentArray[$i]['img'] !== null) {
$contentArray[$i]['img'] = $r->contentImgs[$imgIndex];
}
}
foreach ($contentArray as $content) {
$newContent = new WorkContent;
$contentImg = $content['img'];
if ($contentImg !== null) {
$contentName = uniqid();
$contentExt = $contentImg->getClientOriginalExtension();
$contentPath = $contentImg->storeAs('works/'.$r->client.'/'.$r->slug, $contentName.'.'.$contentExt);
$newContent->img_url = $contentPath;
}
if ($content['img_is_fullwidth'] == 'true') {
$newContent->img_is_fullwidth = true;
} else if ($content['img_is_fullwidth'] == 'false') {
$newContent->img_is_fullwidth = false;
}
$newContent->site_url = $content['site_url'];
$newContent->description = $content['description'];
$newContent->work_id = $w->id;
$newContent->save();
}

How do you autocomplete an email address with domain

I want to do autocomplete function for email like this Auto fill email
I have tried this with auto complete email address but failed.
My JS for this code written as follows :
var EmailDomainSuggester = {
domains: ["yahoo.com", "gmail.com", "google.com", "hotmail.com", "me.com", "aol.com", "mac.com", "live.com", "comcast.com", "googlemail.com", "msn.com", "hotmail.co.uk", "yahoo.co.uk", "facebook.com", "verizon.net", "att.net", "gmz.com", "mail.com"],
bindTo: $('#email'),
init: function() {
this.addElements();
this.bindEvents();
},
addElements: function() {
// Create empty datalist
this.datalist = $("<datalist />", {
id: 'email-options'
}).insertAfter(this.bindTo);
// Corelate to input
this.bindTo.attr("list", "email-options");
},
bindEvents: function() {
this.bindTo.on("keyup", this.testValue);
},
testValue: function(event) {
var el = $(this),
value = el.val();
// email has #
// remove != -1 to open earlier
if (value.indexOf("#") != -1) {
value = value.split("#")[0];
EmailDomainSuggester.addDatalist(value);
} else {
// empty list
EmailDomainSuggester.datalist.empty();
}
},
addDatalist: function(value) {
var i, newOptionsString = "";
for (i = 0; i < this.domains.length; i++) {
newOptionsString +=
"<option value='" +
value +
"#" +
this.domains[i] +
"'>";
}
// add new ones
this.datalist.html(newOptionsString);
}
}
EmailDomainSuggester.init();
My HTML code snippet look like below :
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="your#email.com">
It doesn't show suggestion when i write.
But it works while i remove character one by one.
IT DOESN'T SHOW SUGGESTIONS WHILE I AM TYPING BUT SHOWS WHEN I REMOVE
CHARACTER ONE BY ONE AFTER '#'

Nativescript ListView load's more on page loading

I use a <ListView> within my project, in view's XML file.
ListView has an attribute which invokes a function whenever you scroll down enough to see last item of ListView.
For more explanation: the listview contains a template item which shows two elements, one is <Label> and other one is an <Image>
The problem: is that when I open the application, it loads multiple times.
¿What is the reason and how could it be prevented?
home.xml
<drawer:rad-side-drawer id="drawer">
<drawer:rad-side-drawer.mainContent>
<!-- Home page contents -->
<stack-layout loaded="contentLoaded">
<ListView items="{{ photoList }}" id="photoList" row="1" colSpan="2" loadMoreItems="loadMorePhotos">
<ListView.itemTemplate>
<GridLayout columns="*, auto" rows="auto,*">
<Label row="0" imageid="{{id}}" text="{{title}}"/>
<Image row="1" stretch="fill" src="{{picture}}"/>
</GridLayout>
</ListView.itemTemplate>
</ListView>
</stack-layout>
</drawer:rad-side-drawer.mainContent>
<drawer:rad-side-drawer.drawerContent>
<widgets:drawer-content />
</drawer:rad-side-drawer.drawerContent>
drawer-content.xml
<grid-layout class="drawer-content">
<stack-layout>
<!-- <label text="Home" tap="navigate" class="{{ selectedPage == 'home' ? 'selected' : '' }}" /> -->
<ListView items="{{ menuList }}" id="menuList" row="1" colSpan="2">
<ListView.itemTemplate>
<GridLayout columns="*, auto">
<Label text="{{ title }}" galleryid="{{id}}" tap="loadPhotos"/>
</GridLayout>
</ListView.itemTemplate>
</ListView>
</stack-layout>
</grid-layout>
home.js
var MenuViewModel = require("../../shared/view-models/menu-view-model");
var PhotoViewModel = require("../../shared/view-models/photo-view-model");
var LoadingIndicator = require("nativescript-loading-indicator").LoadingIndicator;
var BasePage = require("../../shared/BasePage");
var observableModule = require("data/observable")
var ObservableArray = require("data/observable-array").ObservableArray;
var topmost = require("ui/frame").topmost;
var loader = new LoadingIndicator();
var loading_options = {
message: 'دریافت اطلاعات ...',
progress: 1,
android: {
indeterminate: false,
cancelable: false,
progressStyle: 0,
secondaryProgress: 1
},
ios: {
details: "",
square: false,
margin: 10,
dimBackground: true,
color: "#4B9ED6",
mode: 0 // indeterminate
}
};
var menuList = new MenuViewModel([]);
var photoList = new PhotoViewModel([]);
var current_gallery_id = 1;
var current_page = 1;
var isLoading = false;
var pageData = new observableModule.fromObject({
menuList: menuList,
photoList: photoList,
page_title: 'آلبوم عکس',
current_gallery_id: current_gallery_id,
current_page: current_page,
});
var HomePage = function () {
};
HomePage.prototype = new BasePage();
HomePage.prototype.constructor = HomePage;
// Place any code you want to run when the home page loads here.
HomePage.prototype.contentLoaded = function (args) {
}
HomePage.prototype.pageLoaded = function (args) {
page = args.object;
page.bindingContext = pageData;
loader.show(loading_options);
menuList.empty();
menuList.load().then(function () {
loader.hide();
});
};
HomePage.prototype.loadPhotos = function (args) {
var gallery_id = args.object.galleryid.toString();
photoList.empty();
page.getViewById("drawer").toggleDrawerState();
if (current_gallery_id != gallery_id) {
current_gallery_id = gallery_id;
current_page = 1;
console.log("Gallery Changed to : " + current_gallery_id);
}
loader.show(loading_options);
photoList.load(gallery_id, current_page).then(function () {
current_page++;
console.log("Page Changed To : " + current_page);
loader.hide();
return;
});
}
HomePage.prototype.loadMorePhotos = function (args) {
var gallery_id = current_gallery_id;
loader.show(loading_options);
photoList.load(gallery_id, current_page).then(function () {
current_page++;
console.log("Page Changed To : " + current_page);
console.log("Gallery is : " + gallery_id);
loader.hide();
});
}
module.exports = new HomePage();
Debug Console

Try to use a timeoutto prevent loadMorePhotos from being called too many times..
var timeout = setTimeout(loadMorePhotos, 100);
clearTimeout(timeout);
In your case :
function getMorePhotos(){
var gallery_id = current_gallery_id;
loader.show(loading_options);
photoList.load(gallery_id, current_page).then(function () {
current_page++;
console.log("Page Changed To : " + current_page);
console.log("Gallery is : " + gallery_id);
loader.hide();
});
};
HomePage.prototype.loadMorePhotos = function (args) {
var timeout = setTimeout(getMorePhotos, 100);
clearTimeout(timeout);
}

Jquery .autocomplete not working

I have a jquery autocomplete which is not doing anything. I have used the code from here. It works in their example.
There are some changes... First, array is created from a viewModelList and it works. here is a small part of it:
var suburbs = [
{
id: "17023",
suburb: "Epsom",
postCode: "3551",
state: "VIC"
},
{
id: "17024",
suburb: "Muskerry",
postCode: "3557",
state: "VIC"
}
I have endeavoured to use messages to indicate the respose - what it is but even the messages dont work... I cannot even get the response value..
I created a div below the form for the messages and they work having been tested using a click function.. I did try a ".change" function on the "#Suburbs" id and also got nothing..
Here is the code:
<script>
(function ($) {
$(function () {
var suburbs = [
#for (var i = 0; i < Model.SuburbAndPostcodesList.Count; i++) {
<text>{
id: "#Model.SuburbAndPostcodesList[i].SuburbsAndPostcodesId",
suburb: "#Model.SuburbAndPostcodesList[i].Suburb",
postCode: "#Model.SuburbAndPostcodesList[i].PostCode",
state: "#Model.SuburbAndPostcodesList[i].State.ShortName"
}#(i == Model.SuburbAndPostcodesList.Count - 1 ? "" : ",")</text>
}
];
$("#Suburb").autocomplete({
source: function (req, responseFn) {
addMessage("search on: '" + req.term + "'<br/>");
var re = $.ui.autocomplete.escapeRegex(req.term);
var matcher = new RegExp("^" + re, "i");
var a = $.grep(suburbs, function (item , index) {
//addMessage(" sniffing: '" + item + "'<br/>");
return matcher.test(item.suburb);
});
addMessage("Result: " + a.length + " items<br/>");
responseFn(a);
},
select: function (value, data) {
if (typeof data == "undefined") {
addMessage('You selected: ' + value + "<br/>");
} else {
addMessage('You selected: ' + data.item.value + "<br/>");
}
}
});
function addMessage(msg) {
$('#msgs').append(msg);
}
});
});
</script>
The id "#Suburb" is correct and worked for a simple version of .autocomplete.
EDIT: here is page code for the javascript.. Hope this is what you were after..
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/site.js?v=EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo"></script>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script src="/lib/jquery-ui/jquery-ui.js"></script>
<script>
(function ($) {
$(function () {
var suburbs = [
{
id: "17023",
suburb: "Epsom",
postCode: "3551",
state: "VIC"
},
{
id: "17024",
suburb: "Muskerry",
postCode: "3557",
state: "VIC"
},
...
{
id: "17055",
suburb: "Bonnet Hill",
postCode: "7053",
state: "TAS"
},
{
id: "17056",
suburb: "Wellington Park",
postCode: "7054",
state: "TAS"
}
];
$("#Suburb").autocomplete({
source: function (req, responseFn) {
addMessage("search on: '" + req.term + "'<br/>");
var re = $.ui.autocomplete.escapeRegex(req.term);
var matcher = new RegExp("^" + re, "i");
var a = $.grep(suburbs, function (item , index) {
//addMessage(" sniffing: '" + item + "'<br/>");
return matcher.test(item.suburb);
});
addMessage("Result: " + a.length + " items<br/>");
responseFn(a);
},
select: function (value, data) {
if (typeof data == "undefined") {
addMessage('You selected: ' + value + "<br/>");
} else {
addMessage('You selected: ' + data.item.value + "<br/>");
}
}
});
function addMessage(msg) {
$('#msgs').append(msg);
}
});
});
</script>
EDIT2: Here is the div element "suburb" as I think its probably a good idea to see what the autocomplete is working on.
<div class="form-group">
<label class="col-md-2 control-label" for="Suburb">Suburb:</label>
<div class="col-md-10">
<input class="form-control" type="text" data-val="true" data-val-required="A suburb name is required" id="Suburb" name="Suburb" value="Eaglehawk" />
<span class="text-danger field-validation-valid" data-valmsg-for="Suburb" data-valmsg-replace="true" />
</div>
</div>

Okay, a few things:
first: your jQuery .ready() function isn't running at all. You are combining several shorthand and advanced techniques, and they are not working. (More details on this in the comments below) Until you can do some research and get the concepts down, probably better to use the long-hand method, and just do
$(document).ready(function() {
});
Second: when you do $('#Suburb'), that means you have to have an element with id="Suburb" someplace in your document. Your input didn't have that.
Third: your a array that you are returning is an array of objects which your autocomplete won't recognize. You either need to return an array of strings, or an array of objects in this format: { label: "Choice1", value: "value1" }. The easiest way to accomplish this was just to add .map into your existing code, right after the .grep:
source: function (req, responseFn) {
addMessage("search on: '" + req.term + "'<br/>");
var re = $.ui.autocomplete.escapeRegex(req.term);
var matcher = new RegExp("^" + re, "i");
var a = $.grep(suburbs, function (item , index) {
return matcher.test(item.suburb);
});
a = $.map(a, function(x){
return x.suburb;
});
addMessage("Result: " + a.length + " items<br/>");
responseFn(a);
},
That being said, I have made some mods to your code (making some assumptions) and here is a working fiddle. Sorry, I had already started working on my own fiddle by the time you added yours. It was easier to just continue with the fiddle that I created than it was to modify yours.

StackOverflow API - Trouble Displaying Results

I am kind of new to API's and I have the hang of some of it, but not quite all of it yet. When I type in a tag, such as "HTML" or "JavaScript", I am trying to write a program that will give me the top answerers for that tag. When I type in my result, it says "20 results for undefined," so for some reason, I don't think my code is "communicating" propertly.
I think it has to do with my "Tagged: answered" part, but I'm not sure. What do you guys think?
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stack Overflow AJAX Demo</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="intro">
<div class="left stack-image"></div>
<div class="explanation">
<h1>StackOverflow Reputation Builder</h1>
<p>This app lets you search by topic for unanswered questions on Stack Overflow to help you build your reputation. Find unanswered questions for a topic you know about, write quality answers, and watch your reputation go up.</p>
<p>Sometimes, you also need some inspiration. This page also lets you search for the top answerers for a tag. If you want to rise to the top ranks for a topic, see how many reputation points you'll need to aim for!</p>
</div>
</div>
<hr>
<div class="stack">
<h3>Get Unanswered Questions</h3>
<p>Find unanswered questions by tag. For multiple tags, use a semi-colon to separate.</p>
<form class="unanswered-getter" onsubmit="return false;">
<input type="text" placeholder='e.g., "HTML" or "HTML;CSS"' name="tags" size="30" autofocus required>
<input type="submit" value="Submit">
</form>
<h3>View the Top Answerers for a Tag</h3>
<form class="inspiration-getter" onsubmit="return false;">
<input type="text" placeholder="e.g., jQuery" name="answerers" size="30" required>
<input type="submit" value="Submit">
</form>
</div>
<div class="results-container">
<div class="search-results"></div>
<div class="results"></div>
</div>
</div>
<div class="templates hidden">
<dl class="result question">
<dt>Question</dt>
<dd class="question-text"></dd>
<dt>Asked</dt>
<dd class="asked-date"></dd>
<dt>Viewed</dt>
<dd class="viewed"></dd>
<dt>Asker</dt>
<dd class="asker"></dd>
</dl>
<dl class="resultAnswerer">
<dt>Name of Answerer:</dt>
<dd class="answererName"></dd>
<dt>Score:</dt>
<dd class="scoreAmount"></dd>
<dt>Reputation:</dt>
<dd class="reputationAmount"></dd>
</dl>
<div class="error">
<p>Uh-oh! Something went wrong with your request. Here's what we know:</p>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Javascript:
var showQuestion = function(question) {
var result = $('.templates .question').clone();
var questionElem = result.find('.question-text a');
questionElem.attr('href', question.link);
questionElem.text(question.title);
var asked = result.find('.asked-date');
var date = new Date(1000*question.creation_date);
asked.text(date.toString());
var viewed = result.find('.viewed');
viewed.text(question.view_count);
var asker = result.find('.asker');
asker.html('<p>Name: <a target="_blank" '+
'href=http://stackoverflow.com/users/' + question.owner.user_id + ' >' +
question.owner.display_name +
'</a>' +
'</p>' +
'<p>Reputation: ' + question.owner.reputation + '</p>'
);
return result;
};
var topScorers = function(score){
var result = $('.templates .resultAnswerer').clone();
var answererDisplayName = result.find('answererName');
answererDisplayName.text(score.display_name);;
var answererScore = result.find('scoreAmount');
answererScore.text(score.score);
var answererReputation = result.find('reputationAmount');
answererReputation.text(score.reputation);
return result;
}
var showSearchResults = function(query, resultNum) {
var results = resultNum + ' results for <strong>' + query + '</strong>';
return results;
};
var showError = function(error){
var errorElem = $('.templates .error').clone();
var errorText = '<p>' + error + '</p>';
errorElem.append(errorText);
};
var getUnanswered = function(tags) {
var request = { tagged: tags,
site: 'stackoverflow',
order: 'desc',
sort: 'creation'};
$.ajax({
url: "http://api.stackexchange.com/2.2/questions/unanswered",
data: request,
dataType: "jsonp",//use jsonp to avoid cross origin issues
type: "GET",
})
.done(function(result){ //this waits for the ajax to return with a succesful promise object
var searchResults = showSearchResults(request.tagged, result.items.length);
$('.search-results').html(searchResults);
$.each(result.items, function(i, item) {
var question = showQuestion(item);
$('.results').append(question);
});
})
.fail(function(jqXHR, error){
var errorElem = showError(error);
$('.search-results').append(errorElem);
});
};
var getAnswerers = function(answered){
var request = {
tagged: answered,
site: 'stackoverflow',
order: 'desc',
sort: 'score',
};
$.ajax({
url: "http://api.stackexchange.com/2.2/tags/" + answered + "/top-answerers/all_time",
data: request,
dataType: "jsonp",
type: "GET",
})
.done(function(result){
var searchResults = showSearchResults(request.tagged, result.items.length);
$('.search-results').html(searchResults);
$.each(result.items, function(i,item){
var score = topScorers(item);
$('.results').append(score);
});
})
.fail(function(jqXHR, error){
var errorElem = showError(error);
$('.search-results').append(errorElem);
});
}
$(document).ready( function() {
$('.unanswered-getter').submit(function(){
$('.results').html('');
var tags = $(this).find("input[name='tags']").val();
getUnanswered(tags);
});
$('.inspiration-getter').submit(function(){
$('.results').html('');
var answered = $(this).find("input[name='tags']").val();
getAnswerers(answered);
});
});

You're probably calling the getAnswer on submit of a form. Form submission will destroy the Javascript context. To make it work correctly, you should use simple click instead of submit.
Check code below:
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<style>
img {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<input class="tag"/><button class="search">Search</button>
<div class="search-results"></div>
<script>
var topScorers = function(score){
//Clone result template ode
var result = $('.templates .resultAnswerer').clone();
//set the display name in result
var answererDisplayName = result.find('answererName');
answererDisplayName.text(score.display_name);;
//set the user score amount in result
var answererScore = result.find('scoreAmount');
answererScore.text(score.score);
//set the user reputation amount in result
var answererReputation = result.find('reputationAmount');
answererReputation.text(score.reputation);
return result;
}
var getAnswerers = function(answered){
//the parameters I need to pass in our request to StackOverflow's API
var request = {
tagged: answered,
site: 'stackoverflow',
order: 'desc',
sort: 'score',
};
$.ajax({
//the parameters I need to pass in our request to stackOverFlow's API
//this is the endpoint that I want to use
url: "http://api.stackexchange.com/2.2/tags/" + answered + "/top-answerers/all_time",
data: request,
dataType: "jsonp",
type: "GET",
})
//what the function should do if successful
.done(function(result){
//this gives you the search result description
//var searchResults = showSearchResults(request.tagged, result.items.length);
showResults(result.items);
})
//what the function should do if it fails
.fail(function(jqXHR, error){
$('.search-results').text(JSON.stringify(error));
});
}
function showResults (result) {
var tbody = "";
var thead = "";
var firstEl = result[0];
var propArr = [];
for(var prop in firstEl) {
if(typeof firstEl[prop] !== "object") {
thead += "<th>" + prop + "</th>";
propArr.push(prop);
} else {
var obj = firstEl[prop]
for(var propdeep in obj) {
thead += "<th>" + propdeep + "</th>";
propArr.push(propdeep);
}
}
}
result.forEach(function (rowEl) {
var row = "<tr>";
var currentEl = null;
for(var i = 0; i < propArr.length; i++) {
currentEl = rowEl[propArr[i]];
if(currentEl === undefined) {
currentEl = rowEl["user"][propArr[i]]
}
if(propArr[i] !== "profile_image") {
row += "<td>"+ currentEl + "</td>";
} else {
row += "<td><img src='"+ currentEl + "'></img></td>";
}
}
row += "</tr>";
tbody += row;
});
var table = "<table><thead>" + thead + "</thead><tbody>" + tbody + "</tbody></table>";
$('.search-results').html(table);
}
$('.search').click(function(){
//zero out results if previous search has run
$('.search-results').html('');
//separate line of code
var answered = $(".tag").val();
getAnswerers(answered);
});
</script>
</body>
</html>
*Edit***********************
Since you're using "return false;" in submit of the forms, it's not submitting. That's actually clever as it saves us from having to attach both mouse and key events
There were 3 bugs in the code you posted last.
1> Input text field name is "answerers" but in the submit() function it's used as "tags".
var answered = $(this).find("input[name='tags']").val();
// should be
var answered = $(this).find("input[name='answerers']").val();
2> Data returned from the inspiration-getter form call has different structure than used. Actual structure of each item is as below.
{
post_count: 0,
score: 0,
user: {
display_name: "",
link: "",
profile_image: "",
reputation: 0,
user_id: 0,
user_type: ""
}
}
3> There should be a . (dot) before the selectors used in the topScorers() function.
var answererDisplayName = result.find('answererName'); //should be '.answererName'
answererDisplayName.text(score.display_name);;
var answererScore = result.find('scoreAmount'); //should be '.scoreAmount'
answererScore.text(score.score);
var answererReputation = result.find('reputationAmount'); //should be '.reputationAmount'
That's it,
Here is the working code after corrections,
app.js
var showQuestion = function(question) {
var result = $('.templates .question').clone();
var questionElem = result.find('.question-text a');
questionElem.attr('href', question.link);
questionElem.text(question.title);
var asked = result.find('.asked-date');
var date = new Date(1000*question.creation_date);
asked.text(date.toString());
var viewed = result.find('.viewed');
viewed.text(question.view_count);
var asker = result.find('.asker');
asker.html('<p>Name: <a target="_blank" '+
'href=http://stackoverflow.com/users/' + question.owner.user_id + ' >' +
question.owner.display_name +
'</a>' +
'</p>' +
'<p>Reputation: ' + question.owner.reputation + '</p>'
);
return result;
};
var topScorers = function(item){
var user = item.user;
var result = $('.templates .resultAnswerer').clone();
var answererDisplayName = result.find('.answererName');
answererDisplayName.text(user.display_name);;
var answererScore = result.find('.scoreAmount');
answererScore.text(item.score);
var answererReputation = result.find('.reputationAmount');
answererReputation.text(user.reputation);
return result;
}
var showSearchResults = function(query, resultNum) {
var results = resultNum + ' results for <strong>' + query + '</strong>';
return results;
};
var showError = function(error){
var errorElem = $('.templates .error').clone();
var errorText = '<p>' + error + '</p>';
errorElem.append(errorText);
};
var getUnanswered = function(tags) {
var request = { tagged: tags,
site: 'stackoverflow',
order: 'desc',
sort: 'creation'};
$.ajax({
url: "http://api.stackexchange.com/2.2/questions/unanswered",
data: request,
dataType: "jsonp",//use jsonp to avoid cross origin issues
type: "GET",
})
.done(function(result){ //this waits for the ajax to return with a succesful promise object
var searchResults = showSearchResults(request.tagged, result.items.length);
$('.search-results').html(searchResults);
$.each(result.items, function(i, item) {
var question = showQuestion(item);
$('.results').append(question);
});
})
.fail(function(jqXHR, error){
var errorElem = showError(error);
$('.search-results').append(errorElem);
});
};
var getAnswerers = function(answered){
var request = {
tagged: answered,
site: 'stackoverflow',
order: 'desc',
sort: 'score',
};
$.ajax({
url: "http://api.stackexchange.com/2.2/tags/" + answered + "/top-answerers/all_time",
data: request,
dataType: "jsonp",
type: "GET",
})
.done(function(result){
var searchResults = showSearchResults(request.tagged, result.items.length);
$('.search-results').html(searchResults);
$.each(result.items, function(i,item){
var score = topScorers(item);
$('.results').append(score);
});
})
.fail(function(jqXHR, error){
var errorElem = showError(error);
$('.search-results').append(errorElem);
});
}
$(document).ready( function() {
$('.unanswered-getter').submit(function(){
$('.results').html('');
var tags = $(this).find("input[name='tags']").val();
if(!tags || $.trim(tags) === "") {
alert("input is empty");
} else {
getUnanswered(tags);
}
});
$('.inspiration-getter').submit(function(){
$('.results').html('');
var answered = $(this).find("input[name='answerers']").val();
if(!answered || $.trim(answered) === "") {
alert("input is empty");
} else {
getAnswerers(answered);
}
});
});

I figured out part of what I did wrong.
I had name 'tags" instead of name 'answerers', so part of my problem is fixed.
Now if I get results, it will say "20 results of HTML" or "20 results of CSS" or whatever tag I use.
Now I just need to figure out why all of my results are blank. For some reason, it works for one button, but not the other.
JavaScript:
$('.inspiration-getter').submit(function(){
$('.results').html('');
var answered = $(this).find("input[name='tags']").val();
getAnswerers(answered);
});
HTML:
<form class="inspiration-getter" onsubmit="return false;">
<input type="text" placeholder="e.g., jQuery" name="answerers" size="30" required>
<input type="submit" value="Submit">
</form>