Simple jQuery if statement, API returns 'null' - javascript

Using the Sunlight Congress API to pull a list of representatives, I'd like to return folks' nicknames if they are used. If a representative doesn't use a nickname, the API returns 'null'.
I'm messing up the syntax for the if statement. Here's my most recent misguided approach:
if (rep.nickname == 'null'){myFolks += rep.first_name + ' ';}
 
Here's the full context:
$(document).ready(function () {
$('#rep-lookup').submit(function(e){
e.preventDefault();
var $results = $('#rep-lookup-results'),
zipcode = $('#txt-zip').val(),
apiKey = '_YOUR_API_KEY';
var requestURL = 'http://congress.api.sunlightfoundation.com/legislators/locate?callback=?';
// collect the data
$.getJSON(requestURL, {
'apikey' : apiKey,
'zip' : zipcode,
}, function(data){
if (data.results && data.results.length > 0) {
var myFolks = '<p>Here are your Congress folk:</p>';
$.each(data.results, function(i, rep) {
myFolks += '<p>';
myFolks += '<a href="' + rep.contact_form + '" target="_blank">';
myFolks += rep.nickname;
if (rep.nickname == 'null'){myFolks += rep.first_name + ' ';}
myFolks += rep.last_name + ' ';
myFolks += '</a>';
myFolks += '</p>';
});
myFolks += '<p>Please write to them in support of this legislation.</p>';
$results.html(myFolks);
} else {
$results.html('<p>None found for zip code ' + zipcode + '. Please try again.</p>');
}
});
});
});

myFolks += (rep.nickname && rep.nickname !== "null") ? rep.nickname : rep.first_name + ' ';
via: #tomcreighton

Related

How to add and if condition into an append() with jQuery

I am finishing up a TwitchTV project but have been struggling to figure out how to append some code with jQuery. This code needs to check the API to see if a user is streaming or not, then, depending on if he or she is or not, append information to an already dynamic, jQuery produced html.
Take a look at my JavaScript code. Right now, under the “status” row, you will see each user has info. If the user is offline, I would simply like to have the html read “offline.” If the user is online, I would like it to read "Online: " plus a short description of what the channel is about (the stream information is stored in a variable called “stream,” and the short description is stored in a variable called “statusWhat”).
I’m sorry if that is a bit confusing. I think seeing the code will make things clear: https://codepen.io/JayDevelopment/pen/bMKrLK 1
$(function() {
var twitchers = [
"ESL_SC2",
"OgamingSC2",
"cretetion",
"storbeck",
"habathcx",
"RobotCaleb",
"noobs2ninjas"
];
//FREECODECAMP STREAM INFO AND API CALL
var url =
"https://api.twitch.tv/kraken/streams/freecodecamp?client_id=jjqkn1xu4g4rx7d3e1o5refrmw5bhd";
$.getJSON(url, function(data) {
if (data.stream === null) {
$("#fccStatus").html("OFFLINE");
} else {
$("#fccStatus").html("FreeCodeCamp is ONLINE");
}
$('#fccGame').html()
});
for (var i = 0; i < twitchers.length; i++) {
$.ajax({
type: "GET",
url: "https://api.twitch.tv/kraken/channels/" +
twitchers[i] +
"?client_id=jjqkn1xu4g4rx7d3e1o5refrmw5bhd",
success: function(dataFor) {
$.getJSON(
"https://api.twitch.tv/kraken/streams/" +
dataFor.name +
"?client_id=jjqkn1xu4g4rx7d3e1o5refrmw5bhd").done(function(data2) {
var name = dataFor.name;
var logo = dataFor.logo;
var statusWhat = dataFor.status;
var stream = data2.stream;
$('#info').append('<div class="row block">' +
'<div class="col-sm">' +
'<h1>' + '<img src=' + logo + '>' + '</h1>' +
'</div>' +
'<div class="col-sm">' +
'<h1>' + name + '</h1>' +
'</div>' +
'<div class="col-sm" id="change">' +
'<a href="https://www.twitch.tv/' + name + '"' + ' target="blank">' +
'<h1 id="status">' + stream + ': ' + statusWhat + '</h1>' +
'</a></div></div></div>')
/* if (stream === null) {
$("#status").append('OFFLINE');
} else {
$("#status").append('ONLINE: ' + statusWhat);
} */
}
);
},
error: function(error) {
$("#logo").append('<img src=' + '#' + '>' + "<br>");
$("#name").append('Invalid' + "<br>");
$('#status').append('Not found');
}
});
}
});
You can do it when you assign to the stream variable:
if (data2.stream) {
stream = data2.stream + " ONLINE: " + statusWhat;
} else {
stream = "OFFLINE";
}

Trying to using HTML data attribute to match data from two databases

I have code below that renders a few products on a page. Each of these products shares the same data attribute "data-item-upc". There is also a button that is rendered for each product on the page (6 total buttons to be exact). They all share this same data-item-upc data attribute.
I am able to successfully grab the value of the data atrribute and match it to the item with the same UPC value in the second database. But for some reason only the first button works and shows the modal. Not sure whats going on. Hoping someone can help me out would really appreciate it.
//declare variable to store JSON data
var product_data = {};
var nutritional_data = {};
$(document).ready(function() {
'use strict';
//grab product data
$.ajax({
dataType: "jsonp",
url: 'path to URL',
cache: true,
success: function(data){
//assign JSON to product data variable
product_data = JSON.parse(JSON.stringify(data).replace(/"\s+|\s+"/g,'"'));
//grab nutrional data
$.ajax({
dataType: "jsonp",
url: 'path to URL',
cache: true,
success: function(json){
//assign JSON to product data variable
nutritional_data = JSON.parse(JSON.stringify(json).replace(/"\s+|\s+"/g,'"'));
//declare divs to store data
var productDivOne = '';
var productDivTwo = '';
$.each(product_data, function(i, item) {
//convert JSON strings to uppercase for comparison
var brandLetter = item.itemBrandLetter.toUpperCase();
var foodService = item.itemDeli.toUpperCase();
var brandItem = item.itemName;
if (brandLetter == "LB" && foodService == "N") {
if (brandItem.indexOf("Panettone") >= 0) {
productDivOne +=
'<div class="item col-xs-12 col-sm-4 col-md-4 col-lg-4">' +
'<div class="thumbnail">' +
'<img class="scale-down-seperate-prods" src="' + item.imageURL + '" alt="' + item.itemName + '" />' +
'<div class="caption">' + '<br>' +
'<h3 class="group inner list-group-item-heading">' + item.itemName + '</h3>' +
'<h4 class="group inner list-group-item-text">' + item.itemFullUPC.slice(1, -1) + ' • ' + item.itemPackSize.toLowerCase().substring(item.itemPackSize.lastIndexOf("/") + 1) + '</h4>' +
'<button type="button" class="btn btn-info btn-lg showNutritionFacts" data-item-upc="' + item.itemFullUPC + '" value="itemFullUPC">Nutrition Facts</button>' +
'</div>' +
'</div>' +
'</div>';
}
if (brandItem.indexOf("Egg") >= 0) {
productDivTwo +=
'<div class="item col-xs-12 col-sm-4 col-md-4 col-lg-4">' +
'<div class="thumbnail">' +
'<img class="scale-down-seperate-prods" src="' + item.imageURL + '" alt="' + item.itemName + '" />' +
'<div class="caption">' + '<br>' +
'<h3 class="group inner list-group-item-heading">' + item.itemName + '</h3>' +
'<h4 class="group inner list-group-item-text">' + item.itemFullUPC.slice(1, -1) + ' • ' + item.itemPackSize.toLowerCase().substring(item.itemPackSize.lastIndexOf("/") + 1) + '</h4>' +
'<button type="button" class="btn btn-info btn-lg showNutritionFacts" data-item-upc="' + item.itemFullUPC + '" value="itemFullUPC">Nutrition Facts</button>' +
'</div>' +
'</div>' +
'</div>';
}
}
});
//show nutritional information on button click
$("body").on('click', ".showNutritionFacts", function(event){
//get passed data from other function
var clickedItemUPC = $(this).data('item-upc');
alert(clickedItemUPC);
//declare variables to store data
var servingSize = '';
var servingPerContainer = '';
var calories = '';
var caloriesFat = '';
var totalFatGrams = '';
var totalFatPercentage = '';
var saturatedFatGrams = '';
var saturatedFatPercentage = '';
var transFatGrams = '';
var polyunsaturatedFatGrams = '';
var monounsaturatedFatGrams = '';
var cholesterolGrams = '';
var cholesterolPercentage = '';
var sodiumGrams = '';
var sodiumPercentage = '';
var totalCarbohydrateGrams = '';
var totalCarbohydratePercentage = '';
var dietaryFiberGrams = '';
var dietaryFiberPercentage = '';
var sugarGrams = '';
var sugarGramsAdded = '';
var sugarGramsAddedPercentage = '';
var proteinGrams = '';
var vitaminAPercentage = '';
var vitaminCGrams = '';
var vitaminCPercentage = '';
var vitaminDGrams = '';
var vitaminDPercentage = '';
var calciumGrams = '';
var calciumPercentage = '';
var ironGrams = '';
var ironPercentage = '';
var potassiumGrams = '';
var potassiumPercentage = '';
var thiamineGrams = '';
var thiaminePercentage = '';
var riboflavinGrams = '';
var riboflavinPercentage = '';
var niacinGrams = '';
var niacinPercentage = '';
var ingredients = '';
//comparison UPC variable
var compareNutUPC;
$.each(nutritional_data, function (i, item) {
//assign comparison UPC to itemNum
compareNutUPC = item.itemNum;
//compare product UPC in nutritional and product data
if (clickedItemUPC == compareNutUPC) {
servingSize += item.servingSize;
servingPerContainer += item.itemServings;
calories += item.itemCalories;
caloriesFat += item.itemCaloriesFromFat;
transFatGrams += item.itemTransFat + 'g';
polyunsaturatedFatGrams += item.itemPolyUnsatFat + 'g';
monounsaturatedFatGrams += item.itemMonoUnsatFat + 'g';
saturatedFatGrams += item.itemSaturFat + 'g';
saturatedFatPercentage += item.itemSaturFatPerc + '%';
totalFatGrams += item.itemTotalFat + 'g';
totalFatPercentage += item.itemTotalFatPerc + '%';
cholesterolGrams += item.itemCholesterol + 'mg';
cholesterolPercentage += item.itemCholesterolPerc + '%';
sodiumGrams += item.itemSodium + 'mg';
sodiumPercentage += item.itemSodiumPerc + '%';
totalCarbohydrateGrams += item.itemTotalCarb + 'g';
totalCarbohydratePercentage += item.itemTotalCarbPerc + '%';
sugarGrams += item.itemSugars + 'g';
sugarGramsAdded += item.itemSugarsAdded + 'g';
sugarGramsAddedPercentage += item.itemSugarsAddedPerc + '%';
dietaryFiberGrams += item.itemDietFiber + 'g';
dietaryFiberPercentage += item.itemDietFiberPerc + '%';
proteinGrams += item.itemProtein + 'g';
vitaminAPercentage += item.itemVitaminA + '%';
vitaminCPercentage += item.itemVitaminC + '%';
vitaminDGrams += item.itemVitaminDMeasure;
vitaminDPercentage += item.itemVitaminD + '%';
calciumGrams += item.itemCalciumMeasure;
calciumPercentage += item.itemCalcium + '%';
ironGrams += item.itemIronMeasure;
ironPercentage += item.itemIron + '%';
thiaminePercentage += item.itemThiamin + '%';
riboflavinPercentage += item.itemRiboflavin + '%';
niacinPercentage += item.itemNiacin + '%';
potassiumGrams += item.itemPotassium;
potassiumPercentage += item.itemPotassiumPerc + '%';
ingredients += item.itemIngredients;
}
});
$(".servingSize").html(servingSize.replace(/\s+(?=g)/g, '').toLowerCase());
$(".servingPerContainer").html(servingPerContainer);
$(".calories").html(calories);
$(".caloriesFat").html(caloriesFat);
$(".transFatGrams").html(transFatGrams);
$(".polyunsaturatedFatGrams").html(polyunsaturatedFatGrams);
$(".monounsaturatedFatGrams").html(monounsaturatedFatGrams);
$(".saturatedFatGrams").html(saturatedFatGrams);
$(".saturatedFatPercentage").html(saturatedFatPercentage);
$(".totalFatGrams").html(totalFatGrams);
$(".totalFatPercentage").html(totalFatPercentage);
$(".cholesterolGrams").html(cholesterolGrams);
$(".cholesterolPercentage").html(cholesterolPercentage);
$(".sodiumGrams").html(sodiumGrams);
$(".sodiumPercentage").html(sodiumPercentage);
$(".totalCarbohydrateGrams").html(totalCarbohydrateGrams);
$(".totalCarbohydratePercentage").html(totalCarbohydratePercentage);
$(".sugarGrams").html(sugarGrams);
$(".sugarGramsAdded").html(sugarGramsAdded);
$(".sugarGramsAddedPercentage").html(sugarGramsAddedPercentage);
$(".dietaryFiberGrams").html(dietaryFiberGrams);
$(".dietaryFiberPercentage").html(dietaryFiberPercentage);
$(".proteinGrams").html(proteinGrams);
$(".vitaminAPercentage").html(vitaminAPercentage);
$(".vitaminCPercentage").html(vitaminCPercentage);
$(".vitaminDGrams").html(vitaminDGrams);
$(".vitaminDPercentage").html(vitaminDPercentage);
$(".calciumGrams").html(calciumGrams);
$(".calciumPercentage").html(calciumPercentage);
$(".ironGrams").html(ironGrams);
$(".ironPercentage").html(ironPercentage);
$(".thiaminePercentage").html(thiaminePercentage);
$(".riboflavinPercentage").html(riboflavinPercentage);
$(".niacinPercentage").html(niacinPercentage);
$(".potassiumGrams").html(potassiumGrams);
$(".potassiumPercentage").html(potassiumPercentage);
$(".ingredients").html(ingredients.toUpperCase());
//determine which modal to show
if ($('.vitaminDGrams:contains("mcg")').length > 0 && $('.calciumGrams:contains("mg")').length > 0 && $('.ironGrams:contains("mg")').length > 0) {
$('.nutritionPopupAlternate').modal('show');
} else if (servingSize == 0) {
$('.nutritionPopupNoInfo').modal('show');
} else {
$('.nutritionPopupStandard').modal('show');
}
});
//append to appropriate div
$('#productDivOne').html(productDivOne);
$('#productDivTwo').html(productDivTwo);
}
});
//end of prod data
}
});
//end of nut data
});
Thanks to Sandy i was able to minify my code and find the issue. Turns out it was looking for something that was added later from a different source code that I took, after editing the DIV it works perfectly now.

Filtering results for twitch API once you make an API call in jquery

I'm trying to build viewer that pulls from the twitch API to show which channels are online / offline.
I have 3 buttons: All (displays online and offline results), Online(displays only online results), and Offline (you guessed it...displays only offline results).
My code to display all results is as follows:`
var getAll = function () {
$(".twitch-viewer-information").empty()
twitchUsernames.forEach(function (elem) {
$.when($.getJSON(twitchApi + elem + apiCallback), $.getJSON(twitchStreamApi + elem + apiCallback)).done(function(data1,data2) {
var twitchChannel = elem;
var twitchLogo = data1[0].logo ? data1[0].logo : "https://www.skillsilo.com/images/profile-photo-default-256.png";
var twitchStatus = checkStatus(data2);
var twitchUrl = data1[0].url;
var twitchStreamMessage = data2[0].stream ? data2[0].stream.channel.status.substring(0,33)+"..." : "";
tableRow =$(
'<tr class="twitch-viewer-channel-data" data-href="'+ twitchUrl +'">' +
'<td class="channel-pic"> <img class="channel-image" src="' + twitchLogo + '"</td>' +
'<td class="twitch-viewer-channel-name">' + twitchChannel + '<br> <span class="twitch-stream-message">' + twitchStreamMessage +'</span></td>' +
'<td class="twitch-viewer-channel-status">' + twitchStatus + '</td>' +
'<tr>'
);
$(".twitch-viewer-information").append(tableRow);
tableRow.click(function() {
window.location.href = $(this).data("href");
});
});
});
}
I'd like to now build a function that only returns the channels that are online, using as little code as possible. I have been rewriting the entire function, along with an if statement at the end to accomplish this...but there has got to be a simpler way:
var getOnline = function () {
$(".twitch-viewer-information").empty()
twitchUsernames.forEach(function (elem) {
$.when($.getJSON(twitchApi + elem + apiCallback), $.getJSON(twitchStreamApi + elem + apiCallback)).done(function(data1,data2) {
var twitchChannel = elem;
var twitchLogo = data1[0].logo ? data1[0].logo : "https://www.skillsilo.com/images/profile-photo-default-256.png";
var twitchStatus = checkStatus(data2);
var twitchUrl = data1[0].url;
var twitchStreamMessage = data2[0].stream ? data2[0].stream.channel.status.substring(0,33)+"..." : "";
tableRow =$(
'<tr class="twitch-viewer-channel-data" data-href="'+ twitchUrl +'">' +
'<td class="channel-pic"> <img class="channel-image" src="' + twitchLogo + '"</td>' +
'<td class="twitch-viewer-channel-name">' + twitchChannel + '<br> <span class="twitch-stream-message">' +twitchStreamMessage +'</span></td>' +
'<td class="twitch-viewer-channel-status">' + twitchStatus + '</td>' +
'<tr>'
);
if(twitchStatus === "Online") {
$(".twitch-viewer-information").append(tableRow);
tableRow.click(function() {
window.location.href = $(this).data("href");
});
}
});
});
}
What is the shortest amount of code that I can user to duplicate my getAll function, while allowing me to filter for just the twitchStatus's that are online?

How to use other parameters with an exception included

I have this function:
function searchItem(e, pageNumber){
e.preventDefault();
searchString = searchBox.value;
article = document.getElementById("homeSection");
var xmlhttp = getXmlHttpRequestObject();
var string = '';
if(xmlhttp){
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var response = JSON.parse(xmlhttp.responseText);
for(var i=0; i<response.length; i++){
var price = parseFloat(response[i].Price);
string += '<section class="searchResult">';
string += '<p class="photo"><img src="' + response[i].Photo + '"></p>';
string += '<section>';
string += '<h1 class="name">' + response[i].Name + '</h1>';
string += '<p class="price">£' + price.toFixed(2) + '</p>';
string += '<p class="description">' + response[i].Description + '</p>';
string += '<p class="productID">ID: ' + response[i].ID + '</p>';
string += '<p class="quantity">Quantity: ' + response[i].Quantity + '</p>';
string += '</section>';
string += '</section>';
if(pageNumber != 1){
string += '<section><button id=previousPage>Previous</button><button id=nextPage>Next</button></section>';
}
}
article.innerHTML = '<h1>Search</h1><section><h1 class="bottomBorder">You searched for: "' + searchString + '"</h1></section>';
article.innerHTML += string;
}
};
xmlhttp.open("POST", "search.php?search=" + searchString, false);
xmlhttp.send("&rpp=" + rowsPerPage + "&last=" + lastPage + "&page=" + pageNumber);
}
}
What i am curious about is how to call the function because it has an exception in it.
It worked fine when i was using it in a javascript event:
searchButton.addEventListener("click", searchItem);
but when i tried calling the function with parameters like this it didn't work, it tells me that e is not defined:
searchButton.addEventListener("click", function(){
searchItem(1);
});
Which i do understand because i haven't passed through a parameter for e but i want to know is why it works as an event without a pseudo function and how i should call it with a pseudo function.
The function requires the event as the first argument. This is set when using the function itself as the click handler, but when you create your own click handler, you need to capture the event and explicitly pass it:
searchButton.addEventListener("click", function(e){
// capture the event object--^
searchItem(e, 1);
// ^ pass it to the function
});

Need help with Flickr/JSON/Javascript issue when displaying gallery images

Wondering if anyone can help me. I'm trying to put together a weekly photo competition page by pulling in photos from a Flickr gallery, but I can't get the images to display. It works OK for groups, but having some problems with the gallery code. Getting the correct JSON response, but can't get the results to display on the page as good as the group images do.
Here's my Javascript:
$(function() {
var map;
var markers = [];
var infowindow;
// Get gallery photos
var visibleGallery;
$.getJSON("http://api.flickr.com/services/rest/" +
"?method=flickr.galleries.getPhotos" +
"&api_key=XXXX" +
"&photoset_id=XXXX" +
"&extras=geo,tags,url_sq,url_t,url_s,url_m,url_o" +
"&format=json&jsoncallback=?", function(data, textStatus) {
var htmlString = '<div id="weekContainer">';
var weeks = sortIntoWeekArrays(data.photos.photo);
$.each(weeks, function(i, week)
{
var weekNumber = i + 1;
var numberOfWeeks = weeks.length - 1;
htmlString += '<div id="week' + weekNumber + '">';
htmlString += '<ul class="weeks">';
if(i < numberOfWeeks)
{
htmlString += '<li><a class="weekLinksNext" href="#"><span>Next</span></a></li>';
}
var sunday = new Date(week.monday.toUTCString());
sunday.setDate(week.monday.getDate() + 6);
htmlString += '<li class="weekTitle">Week ' + weekNumber + ':</li><li class="weekDate"> ' + week.monday.format("ddd d mmm") + ' — ' + sunday.format("ddd d mmm") + '</li>';
if(i > 0)
{
htmlString += '<li><a class="weekLinksPrev" href="#"><span>Previous</span></a></li>';
}
htmlString += '</ul>';
if(week.winner !== undefined)
{
htmlString += '<p class="galleryTitleFirst">Photo of the Week</p>';
htmlString += '<ul class="imagesWinners">';
htmlString += '<li class="winner"><a href="http://www.flickr.com/photos/' + week.winner.owner + '/' + week.winner.id + '" target="_blank">';
htmlString += '<img title="' + week.winner.title + '" src="' + week.winner.url_m + '" alt="' + week.winner.title + '" />';
htmlString += '</a></li>';
htmlString += '<li class="name">' + week.winner.title + '</li>';
htmlString += '<li class="owner">' + 'by ' + week.winner.ownername + '</li>';
htmlString += '</ul>';
}
htmlString += '<p class="galleryTitle">Our other favourites this week</p>';
htmlString += '<ul class="imagesRunnersUp">';
$.each(week.images, function(i, item)
{
htmlString += '<li><a href="http://www.flickr.com/photos/' + item.owner + '/' + item.id + '" target="_blank">';
htmlString += '<img title="' + item.title + '" src="' + item.url_sq + '" alt="' + item.title + '" />';
htmlString += '</a></li>';
if(item.longitude == "0" && item.latitude == "0")
{
return true;
}
var latlng = new google.maps.LatLng(item.latitude, item.longitude);
var marker = new google.maps.Marker(
{
position: latlng,
map: map,
title:item.title
});
marker.content = '<img title="' + item.title + '" src="' + item.url_s + '" alt="' + item.title + '" />';
markers.push(marker);
});
htmlString += '</ul>';
htmlString += '</div>';
});
htmlString += '</div>';
$('div#weekViewer').append(htmlString);
$('div#weekContainer > div').css('float', 'left').css('margin-right', '30px');
$('div#weekContainer').width(weeks.length * 450);
$('div#weekContainer .weekLinksPrev')
.click(function(){
$('div#weekViewer').animate({scrollLeft: '-=450'}, 'slow');
return false;
});
$('div#weekContainer .weekLinksNext')
.click(function(){
$('div#weekViewer').animate({scrollLeft: '+=450'}, 'slow');
return false;
});
});
});
function sortIntoWeekArrays(items)
{
var weeks = [];
// Returns single dimension array containing single dimension arrays
$(items).each(function(i, item)
{
var monday = new Date(item.dateadded * 1000);
monday.setDate(monday.getDate() - monday.getDay() + 1);
monday.setHours(0,0,0,0);
var week, thisWeek;
for (i in weeks)
{
week = weeks[i];
if(week.monday - monday == 0)
{
thisWeek = week;
break;
}
}
if(thisWeek === undefined)
{
thisWeek =
{
monday: monday,
images: []
};
weeks.push(thisWeek);
}
if($.inArray('winner', item.tags.split(" ")) > -1)
{
thisWeek.winner = item;
}
else
{
thisWeek.images.push(item);
}
});
return weeks.sort(function(first, second)
{
return (first.monday > second.monday) - (first.monday < second.monday);
});
}
Any help would be fantastic :)
Regards,
David
Worked it out after some help from a friend. I was missing the date_upload value in the extras argument and item.dateadded needed to change to item.upload.

Categories

Resources