I am working on building a movie search app. It is my first time using json. I cannot figure out why my code is not working. I have it running on localhost using xampp.
On submit
$('.search-form').submit(function (evt) {
// body...
evt.preventDefault();
var $searchBar = $('#search');
var omdbApi = 'http://www.omdbapi.com/?';
var movieSearchTerm = $searchBar.val();
var searchData = {
s:movieSearchTerm,
r:json
}
Here is the callback function
function displayMovies(data) {
// for each search result
$.each(data.items,function(i,movie) {
movieHTML += '<li class="desc">';
//movie title
movieHTML += '<a href="' + movie.Title + '" class="movie-title">';
//release year
movieHTML += '<a href="' + movie.Year + '" class="movie-year">';
//poster
movieHTML += '<img src="' + movie.Poster + '" class="movie-poster"></li>';
$('#movies').html(movieHTML);
}); // end each
// movieHTML += '</li>';
}
$.getJSON(omdbApi, searchData, displayMovies);
});//end submit
r:json
You made a typo.
You haven't created a variable called json and the service expects the value of r to be json.
String literals need to be surrounded with a pair of " or '.
data.items
And the JSON returned doesn't have items, it has Search.
Related
In this function, the value parameter is being passed down to fill in my URL. This works perfectly.
function showResults(results) {
var html = '';
$.each(results, function(index,value) {
html += '<li><img src="' + value.snippet.thumbnails.medium.url + '">' + value.snippet.title + '(More from ' + value.snippet.channelTitle + ')</li>';
});
$('#results').html(html);
}
In this nearly identical function, the value param loses its value. I can't see how. It's difficult to debug why this is happening because console.log() just returns "ReferenceError: $ is not defined" no matter what I check (it returns this in the first section too, which works well).
function showResults(results) {
var html = '';
$.each(results, function(index,value) {
html += '<li><img src="' + value.snippet.thumbnails.medium.url + '">' + value.snippet.title + ') </li>';
});
$('#results').html(html);
$('#results li a').click(function(){
playVid($(this).attr(value.id.videoId));
});
}
function playVid(vidID) {
var embedVid = 'https://www.youtube.com/embed/'+vidID+'?autoplay=1';
document.getElementById('player').src = embedVid;
}
Here I'm trying to push the value param (in the url again) to an iframe with id="player". The iframe receives an invalid param and the video won't play. Meanwhile the video plays in the first example. Where does value get lost?
value only exists within the scope of the each loop. So, first fix your reference error, and then I suggest the following changes in that second example:
1) Update the href with the videoId value in the each loop like in the first example:
<a href="https://www.youtube.com/watch?v=' + value.id.videoId + '">
2) And then launch the player with that value:
$('#results li a').click(function(e) {
e.preventDefault();
playVid($(this).attr('href'));
});
Please , I have a JQuery code when appends data to a div element sucessfully like this
$('#conversation').append('<div id="receiver"><p><b>' + username + ':</b> ' + data + '</p></div><br>');
Now supposing I want to have an anchor tag which will have a hyperlink inside as an atrribute and I want to pass a variable to that href attribute not the link itself since I don't know the kind of link that will be sent. I have problems tring to append this.
$('#conversation').append('<div id="receiver"><p><b>' + username + ': <a id="link" href="'+ data +"></a></p></div><br>');
This does not work. Any idea how to go about this.
This is my whole code snippet
socket.on('updatechat', function (username, data) {
//showing username and the message sent
var checkifdataisalink=data;
var check=checkifdataisalink.split('://')
if((check[0]=='http')||(check=='https'))
{
$('#conversation').append('<div id="receiver"><p><b>' + username + ': <a id="link" href="'+ data +"></a></p></div><br>');
}else{
$('#conversation').append('<div id="receiver"><p><b>' + username + ':</b> ' + data + '</p></div><br>');
}
});
Apart from the missing quote, your or part of the if condition was missing [0]. See below.
//For demo purposes only
var check = ["http", "other-part-of-the-url"];
var username = "user";
var data = "data";
// --;--
if(check[0] == 'http' || check[0] == 'https') {
$('#conversation').append('<div id="receiver"><p><strong>' + username + ':</strong> <a id="link" href="' + data + '">' + data + '</a></p></div><br/>');
} else {
$('#conversation').append('<div id="receiver"><p><strong>' + username + ':</strong>' + data + '</p></div><br/>');
}
Demo#fiddle
Change
$('#conversation').append('<div id="receiver"><p><b>' + username + ': <a id="link" href="'+ data +"></a></p></div><br>')
into:
$('#conversation').append('<div id="receiver"><p><b>' + username + ': <a id="link" href="'+ data +'"></a></p></div><br>');
Just one ' was missing after data
I am accessing the following JSON data at:
http://veratech.co.nz/blog/?json=1
When I try to access the "url" property that sits within an array on line 4 of the code below, I get an undefined error. Even though it will appear in console.log (line 13) with console.log(val.attachments[0].url);.
Code below:
$.each(data.posts, function(index, val){
output += '<li>';
output += '<a href="#blogpost" onclick = showPost(' + val.id + ')">';
output += '<img src="' + val.attachments[0].url + '" alt="">';
output += '<h3>' + val.title + '</h3>';
//Here we shorten the paragraph to 60 characters.
var str = val.excerpt;
var paraInfo = str.slice(0, 60);
output += '<p>' + paraInfo + '</p>';
//Closing off the the closing html tags
output += '</a>';
output += '</li>';
console.log(val.attachments[0].url);
});//Go through each post
Advice would be greatly appreciated
I think there's something else wrong.
I downloaded the json manually, and wrote this code:
HTML:
Urls:
<ul id="foo">
</ul>
JavaScript:
function extractUrls(data) {
var $foo = $('#foo');
$.each(data.posts, function (i, p) {
$foo.append($('<li></li>').text(p.attachments[0].url));
});
}
var jsonData = { /* code omitted for brevity */ };
extractUrls(jsonData);
My output was:
Urls:
<ul id="foo">
<li>http://veratech.co.nz/blog/wp-content/uploads/2014/03/martial.jpg</li>
<li>http://veratech.co.nz/blog/wp-content/uploads/2013/12/grave.jpg</li>
<li>http://veratech.co.nz/blog/wp-content/uploads/2013/12/GTA5.jpg</li>
<li>http://veratech.co.nz/blog/wp-content/uploads/2013/10/miyagi.jpg</li>
<li>http://veratech.co.nz/blog/wp-content/uploads/2013/08/htc-box.png</li>
<li>http://veratech.co.nz/blog/wp-content/uploads/2013/08/scaffold1.jpg</li>
<li>http://veratech.co.nz/blog/wp-content/uploads/2013/07/barriera.png</li>
<li>http://veratech.co.nz/blog/wp-content/uploads/2013/06/tv.jpg</li>
</ul>
Note: You should be able to replace the var jsonData = line with:
$.get('http://veratech.co.nz/blog/', { json: 1 }, extractUrls, 'json');
Anyway; can't see what's wrong with your code? Are you sure this is the issue?
PS: I even added the following inside the $.each loop:
if (!p.attachments[0].url) {
alert(p.id + ' has undefined url!');
}
And did not see any alert...
See code running in a jsFiddle here
I would like to achieve 2 things with this Code I have been working on so not sure if to separate the Questions:
JS:
function listPosts(data) {
postlimit =
var output='<ul data-role="listview" data-filter="true">';
$.each(data.posts,function(key,val) {
output += '<li>';
output += '<a href="#devotionpost" onclick="showPost(' + val.id + ')">';
output += '<h3>' + val.title + '</h3>';
output += '<p>' + excerpt + '</p>';
output += '</a>';
output += '</li>';
}); // go through each post
output+='</ul>';
$('#postlist').html(output);
} // lists all the posts
Questions:
1: I would like to limit the number of Dynamic List Posts returned to 8
2: While I limit the displayed items, I want to add a 'More...' text at the bottom so another set of 8 items is appended to already displayed list.
I am already trying out some codes but was hoping to get some guidance
function listPosts(data, postlimit) {
var $output = $('<ul class="posts" data-role="listview" data-filter="true">');
$.each(data.posts,function(key, val) {
$("<li>", {id: "post_" + val.id})
.append([
$("<h3>", {text: val.title}),
$("<p>", {text: val.excerpt})
])
.appendTo($output);
return (postlimit-- > 1);
});
$('#postlist').empty().append($output);
}
// exemplary delegated event handler
$(document).on("click", "ul.posts h3", function () {
$(this).show();
});
later ...
listPosts(data, 8);
Notes:
from $.each() you can return true or false. If you return false, the loop stops.
Try not to build HTML from concatenated strings. This is prone to XSS vulnerabilities that are easy to avoid. jQuery gives you the tools to build HTML safely.
Generally, for the same reason, try to avoid working with .html(), especially if you already have DOM elements to work with.
Don't use inline event handlers like onclick. At all. Ever.
I am answering you on basis of pure logic and implementation of logic. there could be API stuff for it , but I don't really know. Secondly; It would be a good solution to find some jQuery plugin if you don't have any problems with using jQuery.
call the function onMoreClick() upon clicking the More... html item
var end = 8;
var start = 1;
function onMoreClick()
{
start = end
end = end+8;
listPosts(data)
}
function listPosts(data) {
postlimit =
var output='<ul data-role="listview" data-filter="true">';
var i = start;
$.each(data.posts,function(key,val) {
if(i<end && i >=start){
output += '<li>';
output += '<a href="#devotionpost" onclick="showPost(' + val.id + ')">';
output += '<h3>' + val.title + '</h3>';
output += '<p>' + excerpt + '</p>';
output += '</a>';
output += '</li>';
i++;
}
}); // go through each post
output+='</ul>';
$('#postlist').html(output);
} // lists all the posts
I am working on a website that uses infinite scroll. There is a function called is_element_in_view() that gets executed on these 3 events:
scroll
load
resize
The function does exactly what it's called, it checks to see if an element with a loading gif image is in view and if so it fires an ajax request to get content from the server.
The server sends back a json object that looks like this:
[{
"url": "\/embed\/182926\/some-slug",
"thumb": "http:\/\/cdn.site.com\/91\/26\/a62c1ad74327321dab78bb194c130da5.jpg",
"type": "video",
"is_original": false,
"is_prank_news": false,
"title": "Hello World",
"description": "\t<p>Enjoy this video!<\/p>",
"teaser": "Click Me!",
"finder": "Found by <strong>Jim<\/strong> yesterday",
"likes": "2 likes",
"ad_img": null,
"media_stats": "<div class=\"media-status\">2000 views<\/div>"
},
more objects...]
There's only one object in this response for clarity sake but in reality I get back 20. This is how I'm building out the html from the json data:
$.ajax({
url: '/some/ajax/url',
type: 'get',
data: 'somedata',
dataType: 'json',
success: function(response) {
if(!$.isEmptyObject(response)) {
for(var i = 0; i < response.length; i++) {
if(response[i]) {
var item = response[i];
var title = item.title.replace(/\\"/g, '"');
var media_label = '';
var item_description_teaser = '';
var likes = '';
var ad_image = '';
var media_stats = '';
if(item.description) {
// description
item_description_teaser = '<div class="description">' + item.description.replace(/\\"/g, '"');
// teaser
item_description_teaser += (item.teaser) ? ''+ item.teaser.replace(/\\"/g, '"') +'<img src="images/teaser-arrow.png" alt="" /></div>' : '</div>';
}
// media label
if(item.type == 'article' && item.is_prank_news || item.is_original && item.is_prank_news) {
media_label = '<span class="media-label prank-news-network">Prank</span>';
}
else {
if(item.type == 'article') {
media_label = '<span class="media-label article">Article</span>';
}
else if(item.is_original) {
media_label = '<span class="media-label original">Original</span>';
}
}
// likes
if(!settings.hide_likes) {
likes = '<span class="likes">' + item.likes + '</span> | ';
}
// ad image
if(item.ad_img) {
ad_image = '<img src="'+ item.ad_img +'" alt="" class="ad-img" />';
}
block += '<article class="block">' +
'<div class="inner-left">' +
media_label +
'<a href="'+ item.url +'" title="" class="thumb">' +
'<img src="'+ item.thumb +'" alt="" width="198" height="111" />' +
'</a>' +
'</div>' +
'<div class="inner-right">' +
'<a href="'+ item.url +'" title="" class="title">' +
title +
'</a>' +
item_description_teaser.replace(/\\"/g, '"') +
'<div class="media-stats">' +
likes +
'<span class="finder">'+ item.finder.replace(/\\"/g, '"') +'</span>' +
'</div>' +
ad_image +
'</div>' +
item.media_stats +
'</article>';
}
}
$('#content').append('<div class="page page-'+ page_num +'">' + block + '</div>');
// update page count
page_num++;
// clear previous listings
block = '';
}
else {
$('#content').append('<div class="page page-1"><p class="nothing-to-show">Nothing found...</p></div>');
}
},
error: function() {
alert('error');
}
});
As you can see I put everything in one giant string stored inside the variable block. I append data to this string with every loop and append it to the page outside the loop at the end.
I feel like there is a faster way to build html from js. I read somewhere a while ago that building giant strings like I'm doing isn't as efficient as some other method the article described that I forgot. So what's the faster way to do this?
Store the blocks in an array say blocks, then
$('#content').append(blocks.join(""));
Edit: that wasn't what the OP wanted. I guess the problem is appending the stuff each time the event is triggered.
I'd say to create a DocumentFragment, put the new stuff in it, then appending to $("#content"). Unfortunately, DocumentFragments don't support innerHTML.
So, create a dummy element, fill it and then put its child nodes into the container:
var dummy = $("<div>").html(block), content = $("#content");
$.each(dummy.children(), function(i, c) {content.append(c);});
Adding html elements to the DOM represents a big performance penalty so it is better to create a big string and append it at the end, this post explains it really well
For most of your uses, the method of creating one really long string and appending it at the end will be the best choice, as it makes the best use of the trade offs of code legibility, ease of programming, and speed.
You could have your server return the values already marked-up in HTML, then:
$('#content').append( response );
You can then handle all of your looping and filtering server side, cutting down on the amount JS in your document.