Data shows in console but cannot display in browser. I almost tried in all browser but same result. row's are creating according to search result but nothing appears inside rows, all rows are blank. Any help will be appreciable.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IMDB</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="imdb.js"></script>
</head>
<body>
<div class="container">
<h1>Search IMDB</h1>
<input type="text" id="movieTitle" class="form-control" placeholder="Ex: Titanic"/>
<button id="searchMovie" class="btn btn-primary btn-block">Search Movie</button>
<table class="table table-striped" id="results">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Rating</th>
<th>Image</th>
</tr>
</thead>
<tbody id="container">
<tr id="template">
<td></td>
<td class="plot"></td>
<td class="rating"></td>
<td><img src="" class="poster"/></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
imdb.js
(function(){
$(init);
function init(){
$("#searchMovie").click(searchMovie);
var movieTitle = $("#movieTitle");
var tbody = $("#container");
var template = $("#template").clone();
function searchMovie(){
var title = movieTitle.val();
$.ajax({
url: "http://api.myapifilms.com/imdb/idIMDB?title="+title+"&limit=3&token=1ec543f9-d889-4865-8aab-62a2515f24e8",
dataType: "jsonp",
success: renderMoviesWithTemplate
}
);
function renderMoviesWithTemplate(movies){
console.log(movies);
tbody.empty();
for(var m in movies){
var movie = movies[m];
var title = movie.title;
var plot = movie.plot;
var rating = movie.rating;
var posterUrl = movie.urlPoster;
var movieUrl = movie.urlIMDB;
var tr = template.clone();
tr.find(".link")
.attr("href",movieUrl)
.html(title);
tr.find(".plot")
.html(plot);
tr.find(".rating")
.html(rating);
tr.find(".poster")
.attr("src",posterUrl);
tbody.append(tr);
}
}
}
}
})();
Related
This question already has answers here:
How can I access and process nested objects, arrays, or JSON?
(31 answers)
Closed 8 months ago.
Whenever I run the HTML this is what shows up:the table shows up fine but the data from the API site doesn't show up.
Javascript
async function fetchData() {
const res = await fetch('https://api.covidtracking.com/v1/us/current.json');
const record = await res.json();
document.getElementById('date').innerHTML = record.data[0].date;
document.getElementById('positive').innerHTML = record.data[0].positive;
document.getElementById('death').innerHTML = record.data[0].death;
document.getElementById('deathIncrease').innerHTML =
record.data[0].deathIncrease;
}
fetchData();
HTML
<!DOCTYPE html>
<html>
<head>
<title>US Covid Cases</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3" style="width: 450px;">
<h2 class="text-center">US Covid Cases</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>positives</th>
<th>deaths</th>
<th>Death increase</th>
</tr>
</thead>
<tbody>
<tr>
<td id="date"></td>
<td id="positive"></td>
<td id="death"></td>
<td id="deathIncrease"></td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript" src="MY PATH"></script>
</html>
Is it a problem that the API URL ends in a .json? I am very new to this type of code. I'm not sure what is wrong in my code, is it a problem with the API website?
You can try to print out the record object, you will find that the data type is an array.
[
{
...,
"date": 20210307,
"positive": 28756489,
"death": 515151,
"deathIncrease": 842
}
]
So just replace record.data[0] with record[0]
async function fetchData() {
const res = await fetch("https://api.covidtracking.com/v1/us/current.json");
const record = await res.json();
document.getElementById("date").innerHTML = record[0].date;
document.getElementById("positive").innerHTML = record[0].positive;
document.getElementById("death").innerHTML = record[0].death;
document.getElementById("deathIncrease").innerHTML = record[0].deathIncrease;
}
fetchData();
<!DOCTYPE html>
<html>
<head>
<title>US Covid Cases</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3" style="width: 450px;">
<h2 class="text-center">US Covid Cases</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>positives</th>
<th>deaths</th>
<th>Death increase</th>
</tr>
</thead>
<tbody>
<tr>
<td id="date"></td>
<td id="positive"></td>
<td id="death"></td>
<td id="deathIncrease"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I am using a asp.net mvc web app. I have created a table and now I am wanting to use the plugin in datatables. I saw you only needed 3 lines of code to make this work. I attempted to do exactly what it required in order for it to work and give me the desired datatable, but it does not give me the table I am expecting. I even went to examples -> HTML (DOM) source data -> and under Javascript tab I entered the lines required.
Is there something I am doing incorrect here with the script tags or is the plug in just not working? I do not have the files downloaded and imported to my project.
Expecting a standard look like this
But am getting this... so I am missing the look of the datatable plugin and the following Error.
Cannot set properties of undefined (setting '_DT_CellIndex')
my view:
#model List<Fright>
#{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
#foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=#url>#item.Key</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html>
Your problem is a mismatch in the number of <td> </td>. You are just rendering 1 <td> in foreach loop but you have two <th></th> in the table header
#model List<Fright>
#{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
#foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=#url>#item.Key</a>
</td>
<td>
<a href=#url>#item.Option</a> /* output you Option value*/
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html> ```
I am trying to get my variable I have saved to display on a table I have created on another page. I get the information from the user from a form, and have a button that is clicked and fires off to save the values into variables. My problem is that I can't change the inner html on the other page with the variable I have saved. I am using 1 js file and 2 html files. I can only use js/jquery, html, and css. here is my code:
loanpage.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Super Awesome Loan Guys</title>
<link rel="stylesheet" type="text/css" href="loanpage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="loanpage.js"></script>
</head>
<body>
<div class="bg" id="text-center">
<div class="companytitle"><span class="dollar">$</span>uper Awe<span class="dollar">$</span>ome Loan Guy<span class="dollar">$</span></div>
<div>
<form action="infopage.html">
<h4>Loan Amount:</h4>
<input type="text" id="loanamount" name="loanamount"><br>
<input type="radio" id="12month" name="time">12 Months
<input type="radio" id="18month" name="time">18 Months
<input type="radio" id="24month" name="time">24 Months
<h4>Name:</h4><input id="namefield" type="text" name="firstlastname">
<h4>Phone:</h4><input id="phonefield" type="text" name="phonennumber">
<h4>Email:</h4><input id="emailfield" type="text" name="email">
<h4>Zip Code:</h4><input id="zipfield" type="text" name="zipcode"><br>
</form>
<button type="button">Submit</button>
</div>
</div>
</body>
</html>
infopage.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Super Awesome Loan Guys Loan Information</title>
<link rel="stylesheet" type="text/css" href="loanpage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="loanpage.js"></script>
</head>
<body>
<div class="bg" id="text-center">
<h1>Here is the info you submitted!</h1>
<table>
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>Email Address</th>
<th>Zip Code</th>
<th>Loan Amount</th>
<th>Loan Duration</th>
<th>Interest</th>
</tr>
<tr>
<td id="displayName">1</td>
<td id="displayPhone">1</td>
<td id="displayEmail">1</td>
<td id="displayZip">1</td>
<td id="displayAmount">1</td>
<td id="displayDuration">1</td>
<td id="displayInterest">1</td>
</tr>
</table>
</div>
</body>
</html>
loanpage.js
//js code
var name = "";
var phone="";
var email="";
var zip="";
var loan=0;
var loanrate=12.0;
var loanlen=0;
//Jquery code
$(document).ready(function (){
$("#submitbutton").click(function(){
loan = parseFloat($("#loanamount").val());
if ($("#12month").is(':checked')){
loanlen = 12;
}
else if ($("#18month").is(':checked')){
loanlen = 18;
}
else if ($("#24month").is(':checked')){
loanlen = 24;
}
name = $("#namefield").val();
phone = $("#phonefield").val();
email = $("#emailfield").val();
zip = $("#zipfield").val();
document.getElementById("displayName").innerHTML(name);
document.getElementById("displayPhone").innerHTML(phone);
document.getElementById("displayEmail").innerHTML(email);
document.getElementById("displayZip").innerHTML(zip);
document.getElementById("displayAmount").innerHTML(loan);
document.getElementById("displayDuration").innerHTML(loanlen);
document.getElementById("displayInterest").innerHTML(loanrate);
});
});
Local Storage is your best bet.
// Save data to the current local store
localStorage.setItem("username", "John");
// Access some stored data
alert( "username = " + localStorage.getItem("username"));
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
I am creating an application related to cricket match information in angular. Am getting problem in fetching api response. you can check api response here.
Console is showing error, please check
Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container" ng-app="cricApp" ng-controller="cricCtrl">
<div class="form-group">
<h2>Your result</h2>
<table class="table table-striped">
<thead>
<tr><th colspan="4"><h4>Cricket Match Info</h4></th></tr>
<tr>
<th>Sno</th>
<th>unique_id</th>
<th>description</th>
<th>title</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="match in matchList | filter: nameFilter">
<td>{{$index + 1}}</td>
<td>
{{match.unique_id}}
</td>
<td>{{match.description}}</td>
<td>{{match.title}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
angular.module('cricApp', []).
controller('cricCtrl', function($scope, $http) {
$scope.matchList = [];
$http.get("http://cricapi.com/api/cricket").then(function (response) {
console.log(response);
$scope.matchList = response.data;
});
}
);
</script>
</body>
</html>
your code is fine just replace
$scope.matchList = response.data;
with
$scope.matchList = response.data.data;
because actual data is coming in data inside response.data.
I'm very frustrated trying to insert and show a JSON within a table. I'm using jQuery DataTable to do it.
I have the following jQuery and HTML code but without success:
<table id="sectorsTable">
<thead>
<tr>
<th><b>Numero</b></th>
<th><b>Nombre</b></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var jsonArray = { layersSelected: temporaryArraySectors };
var jsonString = JSON.stringify(jsonArray, null, 2);
$('#sectorsTable').dataTable({
'ajax': jsonString
});
</script>
By the way, the content of the vars is:
temporaryArraySectors = [ [19,"Cordillera"], [10,"Guaiquillo"], [34,"Zapallar"], [27,"Rural Poniente"], [1,"Aguas Negras"], [24,"La Obra"], [28,"Rural Sur"] ];
jsonString = '{"layersSelected": [ [19,"Cordillera"], [10,"Guaiquillo"], [34,"Zapallar"], [27,"Rural Poniente"], [1,"Aguas Negras"], [24,"La Obra"], [28,"Rural Sur"] ] }';
What is wrong?
You don't need to create JSON string with JSON.stringify, just set data option equal to temporaryArraySectors.
See example below for code and demonstration.
$(document).ready(function() {
var temporaryArraySectors = [ [19,"Cordillera"], [10,"Guaiquillo"], [34,"Zapallar"], [27,"Rural Poniente"], [1,"Aguas Negras"], [24,"La Obra"], [28,"Rural Sur"] ];
var table = $('#sectorsTable').DataTable({
data: temporaryArraySectors
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
</head>
<body>
<table id="sectorsTable" class="display">
<thead>
<tr>
<th><b>Numero</b></th>
<th><b>Nombre</b></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>