angularjs infinite scroll from external json - json

how to implement infine scroll as json data is large file. i have a bit of trouble as creating an infinite scroll in angularjs from a JSON file generated on an external site. How to I get the infinite scroll to work relative to the inner content div scrollbar? below is my code
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="table.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(window).resize(function() {
if ($(window).width() < 960) {
window.location = "http://www.stackoverflow.com";
}
else {
window.location = "http://www.google.com";
}
});
</script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body class="body" ng-app="myApp" ng-controller="customersCtrl">
<header class="mainHeader">
<nav>
<ul>
<li class="active">Sokranti Data Analytics</li>
</ul>
</nav>
</header>
<div class="mainContent">
<div class="content">
<article class="topcontent">
<content>
<div class="mytable">
<table >
<tr>
<td>eng_rev_type</td>
<td>year_start</td>
<td>year_end</td>
<td>type</td>
<td>amount</td>
</tr>
<tr ng-repeat="x in names | filter:test">
<td>{{ x.eng_rev_type }}</td>
<td>{{ x.year_start }}</td>
<td>{{ x.year_end }}</td>
<td>{{ x.type }}</td>
<td>{{ x.amount }}</td>
</tr>
</table>
</div>
</content>
</article>
</div>
<aside class="top-sidebar">
<article>
<h2>Filter</h2>
<p><input type="text" ng-model="test"></p>
</article>
</aside>
</div>
<footer class="mainFooter">
<p>Copyright © 2015 </p>
</footer>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("data.json")
.success(function (response) {$scope.names = response.data;});
});
</script>
</body>
</html>


You can create a directive that will bind on the scroll event. Then you can increase the size of the scroll height.

Related

Get data from JSON with Axios

My localhost:8080/omdb displays this :
and I want to get Titles, Years and imdbIDs from it.
Here's my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<title>Web Project 2018</title>
<link rel="stylesheet" href="">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="searchResult">
<h2>List of movies</h2>
<table>
<tr>
<td><b>Title</b></td>
<td><b>Year</b></td>
<td><b>imdbID</b></td>
</tr>
<tr v-for="film in films">
<td>{{ film.Title }}</td>
<td>{{ film.Year }}</td>
<td>{{ film.imdbID }}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#searchResult',
data: {
films: [],
errors: [],
},
created() {
axios.get('http://localhost:8080/omdb')
.then(response => {
this.films = response.data;
})
.catch(error => {
this.errors.push(error);
});
}
});
</script>
</body>
</html>
and the view displays nothing but this :
Any ideas why I can't get the values please ?
Thanks

How to display an array of objects on the html page when using angularjs?

I have a json file which i will be fetching using $http service.
The sample json is added.
I am saving the json to angularjs scope variable.
How to display the dat in html.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>English Premier League</title>
</head>
<body ng-controller="mainController">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">Premier League</a>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/soccer-bg.jpg')">
</header>
<div ng-repeat="blog in array">
<ul class "nav nav-pills">
<li><a href ng-click ="tab"={{$index+1}}>{{blog.matches}}</a></li>
</ul>
</div>
</body>
</html>
JSON file->
{"name":"English Premier League 2015/16","rounds":[{"name":"Play-Off um 1 Premierleague-Platz:","matches":[{"date":"2015-08-08","team1":{"key":"manutd","name":"Manchester United","code":"MUN"},"team2":{"key":"tottenham","name":"Tottenham Hotspur","code":"TOT"},"score1":1,"score2":0},{"date":"2015-08-08","team1":{"key":"bournemouth","name":"Bournemouth","code":"BOU"},"team2":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"score1":0,"score2":1}]},{"name":"Matchday 2","matches":[{"date":"2015-08-14","team1":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"team2":{"key":"manutd","name":"Manchester United","code":"MUN"},"score1":0,"score2":1},{"date":"2015-08-15","team1":{"key":"southampton","name":"Southampton","code":"SOU"},"team2":{"key":"everton","name":"Everton","code":"EVE"},"score1":0,"score2":3}]}]}
IN the output whole array is displaying.Below is the app.js file
app.js
var myApp = angular.module('blogApp', []);
myApp.controller('mainController',['$http','$scope',function($http,$scope) {
$http.get('https://xxxxx.json').success(function(data){
$scope.array=data;
console.log(data);
console.log($scope.array);
});
}]);

This is how you need to be displaying in html page.
Instead of getting the json over http request i have hardcoded the value and made the following example.
Hope it helps
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script>
(function() {
angular.module("blogApp", []).controller('mainController', ['$http', '$scope', function($http, $scope) {
$scope.array = {"name":"English Premier League 2015/16","rounds":[{"name":"Play-Off um 1 Premierleague-Platz:","matches":[{"date":"2015-08-08","team1":{"key":"manutd","name":"Manchester United","code":"MUN"},"team2":{"key":"tottenham","name":"Tottenham Hotspur","code":"TOT"},"score1":1,"score2":0},{"date":"2015-08-08","team1":{"key":"bournemouth","name":"Bournemouth","code":"BOU"},"team2":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"score1":0,"score2":1}]},{"name":"Matchday 2","matches":[{"date":"2015-08-14","team1":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"team2":{"key":"manutd","name":"Manchester United","code":"MUN"},"score1":0,"score2":1},{"date":"2015-08-15","team1":{"key":"southampton","name":"Southampton","code":"SOU"},"team2":{"key":"everton","name":"Everton","code":"EVE"},"score1":0,"score2":3}]}]};
}]);
}());
</script>
<style></style>
</head>
<body ng-app="blogApp">
<div ng-controller="mainController">
<div>
<h1>Test: {{array.name}}</h1>
<div ng-repeat="round in array.rounds">
<h3>Round: {{round.name}}</h3>
<table class="table">
<tr>
<th>Date</th>
<th>Team 1</th>
<th>Team 2</th>
<th>Score 1</th>
<th>Score 2</th>
</tr>
<tr ng-repeat="match in round.matches">
<td>{{ match.date | date}}</td>
<td>{{ match.team1.name }}</td>
<td>{{ match.team2.name }}</td>
<td>{{ match.score1 }}</td>
<td>{{ match.score2 }}</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

Can't get Boostrap CSS to load in a React App

This is my HTML file:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="{{ url_for('static',filename='styles/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href= "{{ url_for('static',filename='styles/style.css') }}">
<script src="https://npmcdn.com/react#15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.7/react-bootstrap.js"></script>
<meta charset="utf-8">
<title>Dashboard</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="/static/js/dashboard.js"></script>
</body>
</html>
The file is located in:
/Simple_flask_app
-hello.py
/static
-js
/styles
-boostrap.min.css
-style.css
I created a simple component just to try to get the CSS to load:
var Dashboard = React.createClass({
render: function(){
return (
<div>
<div class="jumbotron">
<h1>Test</h1>
</div>
</div>
)
ReactDOM.render(<Dashboard />, document.getElementById('content'));
I was trying to get this giant grey box to load - https://getbootstrap.com/examples/navbar/
Do I have to do something special because I'm in React?

Within JSX in React, you must use 'className' instead of 'class'.
So you should change <div class="jumbotron"> to <div className="jumbotron">

How to display json data in datepicker calendar using Angularjs

I am new to Angularjs and quite not sure where to start from,i need to display data(coming from a json) under each date in datepicker.
I have my datepicker calendar ready.
<!doctype html>
<html ng-app="720kb">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://720kb.github.io/csshelper/assets/ext/src/helper.css">
<link rel="stylesheet" type="text/css" href="src/css/angular-datepicker.css">
<title>Angularjs Datepicker</title>
</head>
<body>
<div class="separator50"></div>
<div class="col6 offset-left2">
<div class="col3">
<div class="datepicker"
date-format="MMMM d, y"
button-prev='<i class="fa fa-arrow-circle-left"></i>'
button-next='<i class="fa fa-arrow-circle-right"></i>'>
<input ng-model="date2" type="text" class="angular-datepicker-input"/>
</div>
Date 2 is: {{date2}}
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.min.js"></script>
<script type="text/javascript" src="src/js/angular-datepicker.js"></script>
<script type="text/javascript" src="assets/js/index.js"></script>
</body>
</html>

This is an example of getting JSON Data in Angular Js , can u give us some more information about what the structure of the Json ?
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function (response) {$scope.names = response.records;});
});
</script>

Datatables not rendering on my table in MVC project

I want to improve the look and feel of my tables and jQuery datatables looks great for doing that but I can not work out why it is not rendering on my table. I have registered the plugin correctly on my bundle config. Followed the tutorial and ensured everything was in correct place, but no effect.
Here is my generated code from browser.
I have put an alert in the JavaScript which calls dataTable(), this is being called.
the head and body of document are in a different file _layout.cshtml to my index page which is where my table is. Not that this should effect anything.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.5.3.js"></script>
<script src="/Content/DataTables-1.9.4/media/css/demo_table.css"></script>
<script src="/Scripts/DataTables-1.9.4/media/js/jquery.js"></script>
<script src="/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p>
<a class="site-title" href="/">
<img src="../../Content/Images/TrakMan_white240.png" ,alt="sort", style="border-style:none"/></a>
</p>
</div>
<div class="float-right">
<section id="login">
Hello, <a class="username" href="/SGAccount/Manage" title="Manage">simon</a>!
<form action="/SGAccount/LogOff" id="logoutForm" method="post">
<input name="__RequestVerificationToken" type="hidden" value="qouuJJI98XkICybk1UEozbZayptmhHh1zgsHQfTcu9kz6PJrZ_TObkO8Yhkkqv06jtklWRKOSAhUs3w1Bqm58Y-cy7Q8I5dl_loxDuU6AqReCRtWRHg7p4ipeTVKzNzGG50b7D-x3562Hj2q2In_m-LctFmsLIQ1qpM_iYv0MSQ1" />
Log off
</form>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<br />
<br />
<br />
<li>Change Password</li>
<li>Servers</li>
<li>Security Guard</li>
<li>Connections</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<script src="/Scripts/jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var el = doucument.getElementByName("customerIndex")
el.dataTable({ "sScrolly": "200px", "bPaginate": false });
});
</script>
<h2>Customers</h2>
<p>
<a class="createButton" href="/Customer/Create">Create New</a>
</p>
<table id="customerIndex" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
</section>
</div>
</body>
</html>

There are a few problems:
Your code says "var el = doucument..." but that should be "document".
Also you are using "getElementByName" when your table doesn't have the name attribute set, just the ID set.
But why not use the built in jQuery function to select by ID:
$('#customerIndex').dataTable({ "sScrolly": "200px", "bPaginate": false });

you load two different jquery version:
<script src="/Scripts/DataTables-1.9.4/media/js/jquery.js"></script> // in the header
<script src="/Scripts/jquery-2.0.2.js"></script> // in the body
another small correction:
<script src="/Content/DataTables-1.9.4/media/css/demo_table.css"></script>
// should be
<link href="/Content/DataTables-1.9.4/media/css/demo_table.css" rel="stylesheet" />
maybe this will correct your error
Edit:
change
$(document).ready(function () {
var el = doucument.getElementByName("customerIndex")
el.dataTable({ "sScrolly": "200px", "bPaginate": false });
});
to
$(document).ready(function () {
$("#customerIndex").dataTable({ "sScrolly": "200px", "bPaginate": false });
});

had an extra script src="/Scripts/jquery-2.0.2.js"
at bottom of page.....