I want to run a search for everything under a give title name for example star wars like this search here http://www.imdb.com/xml/find?json=1&nr=1&tt=on&q=star%20wars
I want to list all the results in a table format
here is the code i have so far i have had to change from using the easy omdb api because that will only allow up to ten results
right now i keep getting javascript errors any help plz i am aware i need to set up a localproxy NEED HELP PLZ
Would Love Examples
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$("#SampleSearchButton").click(function() {
getImdbInfo($("#title").val());
})
});
// The function below takes the entered title and searchs imdb for a match then it displays as followed
function getImdbInfo(Title) {
$.ajax({
url: "http://www.imdb.com/xml/find?json=1&nr=1&tt=on&q=" + Title,
cache: false,
dataType: "json",
success: function(data) {
// you get an object for iteration, the keys are Title, Type, Year, imdbID
console.log(data);
var str = '<table>';
str += "<thead><th>Index</th><th>Title</th><th>Type</th><th>Year</th><th>imdbID</th></thead>"
// iterate over the data result set
$.each(data.Search, function(index, element) {
str += "<tr>";
str += "<td>" + index + "</td>";
str += "<td>" + element.Title + "</td>";
str += "<td>" + element.Type + "</td>";
str += "<td>" + element.Year + "</td>";
str += "<td>" + element.imdbID + "</td>";
str += "</tr>";
});
str += '</table>';
// insert the html
$("#SampleResults").html(str);
},
error: function (request, status, error) { alert(status + ", " + error); }
});
}
</script>
</head>
<body>
<!-- search textbox -->
<input type="text" id="title" placeholder="Enter Name for search">
<!-- do search button -->
<button type="text" id="SampleSearchButton">Search</button>
<!-- display results container -->
<div id="SampleResults"></div>
</body>
</html>
you enter the title
the title is append to a url, which calls your local php file
the local php file accepts the title and attaches it the API url you want to call
the request is made and the content is returned
returned content is then accepted by js
check console.log for exact data structure
to main keys "title_popular" and "title_exact", that's why there are two tables
watch out for "description" and "title_description", both seem to be the same (API BUG?), so they are printed twice!
i don't have the time to structure the table fully
maybe you should ask someone, how to print the multilevel object more elegant
PHP
imdb-fetcher.php
<?php
$title = $_GET['title']; // <- you need to secure this
echo file_get_contents(
'http://www.imdb.com/xml/find?json=1&nr=1&tt=on&q=' . $title
);
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$("#SampleSearchButton").click(function() {
getImdbInfo($("#title").val());
})
});
// The function below takes the entered title and searchs imdb for a match then it displays as followed
function getImdbInfo(title) {
$.ajax({
type: 'GET',
url: "imdb-fetcher.php?title=" + title, // <-- request to PHP data fetcher
dataType: "json",
success: function(data) {
// you get an object for iteration, see console for keys
console.log(data);
// table for title_popular
var str = '<table>';
str += "<thead><th>Index</th><th>id</th><th>title</th><th>title_desc</th><th>year</th><th>description</th></thead>";
$.each(data.title_popular, function(index, element) {
str += "<tr>";
str += "<td>" + index + "</td>";
$.each(element, function(key, element) {
str += "<td>" + element + "</td>";
});
str += "</tr>";
});
str += '</table>';
// table for title_exact
str += '<table>';
str += "<thead><th>Index</th><th>id</th><th>title</th><th>title_desc</th><th>year</th><th>description</th></thead>";
$.each(data.title_exact, function(index, element) {
str += "<tr>";
str += "<td>" + index + "</td>";
$.each(element, function(key, element) {
str += "<td>" + element + "</td>";
});
str += "</tr>";
});
// insert the html
$("#SampleResults").html(str);
},
error: function (request, status, error) { alert(status + " - " + error); }
});
}
</script>
</head>
<body>
<!-- search textbox -->
<input type="text" id="title" placeholder="Enter Name for search">
<!-- do search button -->
<button type="text" id="SampleSearchButton">Search</button>
<!-- display results container -->
<div id="SampleResults"></div>
</body>
</html>
Result
Related
Hi everyone i'm new to Ajax,i'm using ajax to get values from my database in form of an object array from a separate PHP file and displaying them in a table,everything works fine,but i want to create a link and append the ID obtained from the array so that i can send a GET request to another PHP file which will act upon that particular row.
code for the PHP File
<?php
include 'Module/Credentials.php';
$sql="SELECT * FROM queries";
$query= mysqli_query($connection, $sql) or die(mysqli_error($connection));
$data = array();
while ($row = mysqli_fetch_object($query))
{
array_push($data, $row);
}
echo json_encode($data);
`
Ajax code
javascript
` var ajax=new XMLHttpRequest();
var method="GET";
var url="getMessages.php";
var asynchronous=true;
ajax.open(method, url,asynchronous);
ajax.send();
ajax.onreadystatechange=function(){
if(this.readyState==4 && this.status==200){
var data=JSON.parse(this.responseText);
console.log(data);
var html="";
for(var b=0;b<data.length;b++){
var ID=data[b].ID;
var name=data[b].name;
var email=data[b].email;
var subject=data[b].subject;
var message=data[b].message;
var link = "management.php?delete=";
$(document).ready(function(){
$('.link').attr('href', link+ID);
});
console.log(data.length);
html +="<tr>";
html +="<td>"+"<a class='link' href=''>Delete</a>"+"</td>";
html +="<td>" + name + "</td>";
html +="<td>" + email + "</td>";
html +="<td>" + subject + "</td>";
html +="<td>" + message + "</td>";
html +="</tr>";
}
document.getElementById("messages").innerHTML += html;
}
}`
the ID on the link is not changing its just displaying a single ID=6
Solution
` var ajax=new XMLHttpRequest();
var method="GET";
var url="getMessages.php";
var asynchronous=true;
ajax.open(method, url,asynchronous);
ajax.send();
ajax.onreadystatechange=function(){
if(this.readyState==4 && this.status==200){
var data=JSON.parse(this.responseText);
console.log(data);
var html="";
for(var b=0;b<data.length;b++){
var ID=data[b].ID;
var name=data[b].name;
var email=data[b].email;
var subject=data[b].subject;
var message=data[b].message;
var link = `management.php?delete=${ID}`;
html +="<tr>";
html +=`<td><a href='${link}'>Delete</a></td>`;
html +="<td>" + name + "</td>";
html +="<td>" + email + "</td>";
html +="<td>" + subject + "</td>";
html +="<td>" + message + "</td>";
html +="</tr>";
}
document.getElementById("messages").innerHTML += html;
}
}`
but i'm getting error messages in NetBeans IDE 8.0.2 like
Expected an operand but found error
`var link== `management.php?delete=${ID}`;`
Expected an operand but found error
`html +=`<td><a href='${link}'>Delete</a></td>`;`
Expected eof but found error ` }`
Try a Template Literal like so:
var link = `management.php?delete=${ID}`;
And if you want it on the html
html +=`<td><a class='link' href='${link}'>Delete</a></td>`;
Please note that I'm using the back ticks `
More info here
Before selecting a HTML element you have to create it. After creation you can manipulate.
I have my external json and trying to fetch the json values dynamically in my javascript. I am able to fetch the first level values and when I try to fetch the array object, it is showing my result as undefined. However when I try this "alert(data.siteAttribute[0].data[0].label);" its returning the the value.
Here is the following that I have tried
$(document).ready(function() {
$.getJSON("https://api.myjson.com/bins/naqzj", function(data) {
$(".test").html('<div class="card-deck">');
var output = "";
for (var i in data.siteAttribute) {
output += "<div class='col-md-4 col-lg-3'><div class='card site-attribute-card'>";
output += "<span class='sticker sticker-rounded sticker-top-right'><span class='inline-item'><img height='50' width='50' src='"+data.siteAttribute[i].data.imageURL +"'/></span></span>";
output += "<div class='card-body'> <div class='card-row'>"
output +="<div class='card-title text-truncate'>" + data.siteAttribute[i].data.label + "</div>";
output += "<div class='card-text'>" + data.siteAttribute[i].data.value + "</div>";
output +="<div class='card-title text-truncate'>" + data.siteAttribute[i].data.operatinghours + "</div>";
output += "<div class='card-text'>" + data.siteAttribute[i].data.hours + "</div>";
output +="<div class='card-title text-truncate'>" + data.siteAttribute[i].data.areaLabel + "</div>";
output += "<div class='card-text'>" + data.siteAttribute[i].data.areaValue + "</div>";
output +="<div class='card-title text-truncate'>" + data.siteAttribute[i].dateModified + "</div>";
output +="<div class='card-text'>" + data.siteAttribute[i].date + "</div>";
output += "</div></div>";
output += "<div class='card-footer'>";
output += "<div class='card-title text-truncate' title='Card Title'>"+ data.siteAttribute[i].name + "<span class='label label-tag label-category right'><span class='label-item label-item-expand'>"+data.siteAttribute[i].status+"</span></span></div>";
output += "<div class='card-links'><a href='/group/retail/site-management-form'>Edit</a><a class='right' href='#'>View</a></div></div>"
output += "</div></div>";
}
$(".test .card-deck").append(output);
$(".test .card-deck").append('</div>');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="test container">
</div>
Here is my sample fiddle for reference. I am missing the loop fro the array and have no clues on how to figure out. Thanks in advance!
data.siteAttribute[i].data is an array
So you can use data.siteAttribute[i].data[0] to get the first item or you'll have to loop through that data as well.
Looks like you are only having issues with having nested loops. To loop over an array of objects I suggest I suggest using Array.prototype.forEach. To simplify your demo I have removed all the HTML markup and nested two forEach loops to parse over the JSON data. Please review the demo and inline comments below:
$(document).ready(function() {
$.getJSON("https://api.myjson.com/bins/naqzj", function(result) {
// Loop over the top level attributes
result.siteAttribute.forEach(function(attr) {
// Loop over the attribute `data` array
attr.data.forEach(function(attrData) {
// For demo purposes, loop over the inner data object and print its props and values
for (var key in attrData) {
console.log(key, ' -> ', attrData[key]);
}
});
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I want to post the detail of woocommerce orders like id, address, name etc of my woocomerce website to a page of another website of mine. I am getting responses in http://www.baruipurjn.in/wp-json/wc/v2/orders. I want to post the order details. I have successfully included the jQuery file in my functions.php file. My jQuery code is here. I am completely new in json and jquery. Please help.
jQuery(function($){
$.getJSON( "http://www.baruipurjn.in/wp-json/wc/v2/orders", function(data) {
var ordersData='';
$.each(data, function(key,value){
ordersData += "<tr>";
ordersData += "<td>" + value.id + "</td>";
ordersData += "<td>" + value.number + "</td>";
ordersData += "<td>" + value.total + "</td>";
ordersData += "</tr>";
});
$("orders").append(ordersData);
});
});
The id of the table where I want to put the data is "orders"
I have a JSON feed I'm accessing to pull data from and am using a little javascript and jQuery to place the data into a Bootstrap carousel. I am having trouble figuring out how to properly loop the data, to feed the carousel appropriately. What I would like to do, is loop through each JSON value, and sequentially feed three values per row of the carousel. My attempts resulted in three sequential values showing in all iterations of the carousel rows, instead of moving on to the next three values per row.
So, in essence, I seem to be having a loop issue. I am having trouble figuring out the proper way to loop this. I've tried several options, but none have worked appropriately. Again, all I want is to feed the carousel with 3 distinct items/values per row.
I noticed a fairly similar question was posted regarding feeding an unordered list, but my implementation of the response did not work.
Thanks for any help.
<script>
var $ = jQuery.noConflict();
var counter = 1;
// Set the global configs to synchronous
$.ajaxSetup({
cache: true,
async: false
});
$(document).ready(function() {
$.getJSON('http:JSON_feedlocation......', function(data) {
html = "";
// Carousel wrapper divs - exempt from loop
html += "<div class='container carousel carousel-show-one-at-a-time slide' data-interval='6000' data-ride='carousel' id='the-new-marketing-carousel'>";
html += "<div class='carousel-inner'>";
// First Loop - row wrapper
for (var i in data.content) {
html += "<div class='item'>";
html += "<div class='newsblock panel-display etowah-newsblock clearfix etowah-newsblock-trio'>";
html += "<div class='container'>";
html += "<div class='row'>";
// Second loop to pull in specific values, three values per loop
for (var i = 0; i < 3; i++) {
var type = data.content[i]["type"];
var title = data.content[i]["title"];
var url = data.content[i].url;
var created = data.content[i].created;
var teaser = data.content[i]["teaser"];
html += "<div id='carousel-blocks' class='newsblock-col-single newsblock__content--first col-md-4 col-sm-4 col-tiny-4'>";
html += "<div class='panel-pane pane-bundle-etowah-newsblock-item'>";
html += "<div class='news-block news-block--medium'>";
html += "<a href='"+ url +"''>";
html += "<img class='block__img' src='http://img" + data.content[i].thumbnail.split('public/')[1].split('?')[0] + "' />";
html += "</a>";
html += "<h3 class='news-block__title'>"
html += "<a href='"+ url +"'>"+ title +"";
html += "</a>";
html += "</h3>";
html += "</div>";
html += "</div>";
html += "</div>";
}
html += "</div>";
html += "</div>";
html += "</div>";
html += "</div>";
}
html += "</div>";
html += "</div>";
html += "<a class='left carousel-control' href='#the-new-marketing-carousel' data-slide='prev'><i class='glyphicon glyphicon-chevron-left'></i></a>";
html += "<a class='right carousel-control' href='#the-new-marketing-carousel' data-slide='next'><i class='glyphicon glyphicon-chevron-right'></i></a>";
counter = counter + 1;
document.getElementById("api-carousel").innerHTML=html;
$(".carousel div.item").first().addClass("active");
});
});
</script>
<div id="api-carousel">
<!-- Carousel api -->
</div>
I have a table with many checkboxes which is generated with Ajax :
$.ajax({
type: "GET",
url: "jsonDevisUtilisateur.php?ra=" + $('#ra').val(),
success: function(data) {
var table = "<table class='dvs'><tr><td>Numéro</td><td>Client</td><td>Site</td><td>Libellé</td><td>Statut</td><td></td></tr>"
for (var i = 0; i < data.length; i++) {
table += "<tr><td>" + data[i].numDevis + "</td>";
table += "<td>" + data[i].client + "</td>";
table += "<td>" + data[i].site + "</td>";
table += "<td>" + data[i].libelle + "</td>";
table += "<td>" + data[i].statut + "</td>";
table += "<td><input type='checkbox' class='box' value='" + data[i].id + "' name='box[]'></td></tr>"
}
table += "</table>";
document.getElementById('devis').innerHTML = table + "<br/><br/>";
}
});
This part is working well !
The problem is when I'm trying to integrate a "select all" button.
My Javascript for it :
$(document).ready(function() {
$("#selectall").on("change", function(e) {
$("input[type=checkbox]").prop("checked", $(this).prop("checked"));
});
});
When my select all checkbox : <input type='checkbox' id='selectall' name='selectall'> is created on the same time than my HTML, it works.
But if I create my <input type='checkbox' id='selectall' name='selectall'> in my TABLE with my ajax function, it doesn't work, and nothing happens.
I'm pretty sure it is because the event is set to "selectall" at the load of the page but it doesn't exist yet and it doesn't look for it later.
What would be the solution ? Thanks for help
You can use event delegation as follow:
$('#devis').on("change", "#selectall", function(e) {
$("input[type=checkbox]").prop("checked", $(this).prop("checked"));
});
You are right in your thinking :
If your selectall checkbox is created after the document ready code execution, jquery can't find it (as it's not created yet).
I won't recommand using the live function as it is deprecated and can be removed in futur version of jquery.
You can still use the on function but with a little modification :
$("#devis").on("change", "#selectall",function(e) {
Note that #mycontainer MUST exist on document load.
If you can't place a container, this will always work :
$("body").on("change", "#selectall",function(e) {