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.
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> ```
enter image description here
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>ContactApp</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>Contact app</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlist">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>
Not so long time ago i started to learn MEAN stack and stuck in this problem.
As you can see on picture controller receive data from server but don't display it. What should I do to fix it? Thanks for any help. Sorry for poor English =D
controller code:
var myApp = angular.module('myApp',[]);
myApp.controller('AppCtrl',['$scope','$http',function($scope,$http){
console.log("hi");
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response;
});
}]);[enter image description here][1]
server code:
var express = require("express");
var app =express();
app.use (express.static(__dirname + "/public"));
app.get ('/contactlist',function(req,res){
console.log ('waitnig for my lovely request');
person1 = {
name: 'HBN1',
email: 'HB1#robo.com',
number: '(111) 111-1111'
}
person2 = {
name: "HBN2",
email: "HB2#robo.com",
number: "(222) 222-2222"
}
person3 = {
name: "HBN3",
email: "HB3#robo.com",
number: "(333) 333-3333"
}
var contactlist = [person1,person2,person3];
res.json(contactlist);
})
app.listen(3000);
console.log ('server runing on port 3000');
Make sure your rest api returns a json array.
DEMO
var app = angular.module('todoApp', []);
app.controller("AppCtrl", ["$scope",
function($scope) {
$scope.contactlist = [{
name: 'HBN1',
email: 'HB1#robo.com',
number: '(111) 111-1111'
},
{
name: "HBN2",
email: "HB2#robo.com",
number: "(222) 222-2222"
}
, {
name: "HBN3",
email: "HB3#robo.com",
number: "(333) 333-3333"
}];
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="AppCtrl">
<div class="container">
<h1>Contact app</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlist">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Change:
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response;
});
To:
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response.data; // note the .data part
});
The response object properties can be found at : https://docs.angularjs.org/api/ng/service/$http
I cant comment because my reputation is too low but what do you see if you console.log(response) in your controller?
if the data is coming through intact, it your page is likely loading before the data arrives, hence displaying as empty. If that is the case the following will work.
<div class="container" ng-controller="AppCtrl" ng-show='isLoaded'> // add this ng-show
<h1>Contact app</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlist">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
Controller:
var myApp = angular.module('myApp',[]);
myApp.controller('AppCtrl',['$scope','$http',function($scope,$http){
console.log("hi");
$scope.isLoaded = false // add this
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response.data; //make response.data as Daniel said above
$scope.isLoaded = true; // add this
});
}]);[enter image description here][1]
I'm trying to pass form data between html pages without using services.
Here is my code link --> http://plnkr.co/edit/E6LM5Oq67XRcvVuMIv9i?p=preview
Below is my contacts.html page.
<html>
<head>
<title>Contacts Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" >
<table>
<tr>
<th>User ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone Number</th>
</tr>
<tr ng-repeat="contact in contacts">
<td>{{contact.uid}}</td>
<td>{{contact.fname}}</td>
<td>{{contact.lname}}</td>
<td>{{contact.pphone}}</td>
</tr>
</table>
</body>
</html>
The data is not getting passed to contacts.html.How to do this ?
Using rootScope we can archive this.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.carname = "Volvo";
$rootScope.car=$scope.carname;
});
app.controller('controllerTwo', function($scope, $rootScope) {
$scope.getcarname = $rootScope.car;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
<div ng-controller="controllerTwo">
<h1>Using rootscope: {{getcarname}}</h1>
</div>
</div>
The header 'Speedruns' keeps getting repeated. How can I fix this?
Also, if there is a better way to do this please let me know.
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='styles.css'>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
<script>
var app = angular.module('player2', []);
app.controller('MainController', function($scope, $http) {
$scope.data0 = null;
$scope.urls = [ // List of REST api calls with with all the streams we want.
'http://api.speedrunslive.com/test/teamK',
];
$http.get($scope.urls[0]).success(function(data) {
$scope.data0 = angular.fromJson(data);
console.log(angular.fromJson(data))
});
});
</script>
</head>
<body ng-app='player2'>
<div ng-controller="MainController">
<table class="table-size" ng-repeat="chan in data0.channels">
<tr>
<th class="text-center" colspan="2">Speedruns</th>
</tr>
<tr>
<td class="text-left">{{chan.channel.display_name}}</td>
<td class="text-left">{{chan.channel.current_viewers}}</td>
</tr>
</table>
</div>
</body>
</html>
Attached a plunker with the code in it.
Plunker
The thing you want to repeat is the tr, so put your repeat on there. At the moment you are repeating whole the table. The following should work:
<table class="table-size" >
<tr>
<th class="text-center" colspan="2">Speedruns</th>
</tr>
<tr ng-repeat="chan in data0.channels">
<td class="text-left">{{chan.channel.display_name}}</td>
<td class="text-left">{{chan.channel.current_viewers}}</td>
</tr>
</table>