Get data from JSON with Axios - json

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

Related

html: How to display/toggle a table after a button is clicked

I am currently trying to display/toggle a table once a button is clicked. When this table appears on the page, all previously loaded tables should remain visible.
Once the button is clicked, the variable called proceed is initialized. The table is displayed based on a conditional "if than" statement that is dependent on variable proceed.
Below is a snippet of the actual html script:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.w3-button {width:150px;}
</style>
<body>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script>
var proceed = "";
</script>
<input type="button" class="w3-button w3-white w3-small w3-border w3-border-green w3-round-large" value="Recommend" onclick="display()">
<script>
function display() {
alert("Hello world!");
var proceed = "proceed";
}
</script>
{% if proceed == "proceed" %}
<body>
<div class="w3-container">
<h4>Recommended products</h4>
<p>List of products recommended for this client:</p>
<table class="w3-table-all w3-tiny">
<tr>
<th>Recommendations</th>
</tr>
<tr>
<td>Product</td>
</tr>
</table>
</div>
</body>
{% endif %}
</body>
</html>
Using the above code ( when the html script is called in a python flask api), table does not display once the button is clicked.
When the if then condition {% if proceed == "proceed" %} is replaced with {% if 1 == 1 %} , the table is displayed ( when the html script is called in a python flask api). This implies that the variable proceed is not being set to "proceed" since {% if proceed == "proceed" %} is always false when the button is clicked. Why is the variable proceed not being updated and how can one rectify the code to display the table?
NB: To test this snippet code above, kindly copy code and paste in https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_buttons_colors
you could give a button an id and use document.getElementFromId() function to reference that button
here's the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="e">Click me</button>
<button id="e2">Don't Click me</button>
<script defer src="./e.js"></script>
</body>
</html>
and here's my javascript:
var button = document.getElementById("e")
var button2 = document.getElementById("e2")
button2.hidden = true
button.onclick = function(){
button2.hidden = false
button.hidden = true
}
so the javascript file gets the button with the id of "e" and "e2" and runs a function that when "e" is clicked, sets the hidden variable for itself true and the hidden variable of the button with the id of "e2" to false
i think it might work if you instead add an id to a table
Updated code - once button clicked table is displayed.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.w3-button {width:150px;}
</style>
<body>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
#myDIV{ display:none; }
</style>
<button class="w3-button w3-white w3-small w3-border w3-border-green w3-round-large" onclick="myFunction()">Recommend</button>
<div id="myDIV">
<h4>Recommended products</h4>
<p>List of products recommended for this client:</p>
<table class="w3-table-all w3-tiny">
<tr>
<th>Recommendations</th>
</tr>
<tr>
<td>Product</td>
</tr>
</table>
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
This will toggle the div which contains the table. An example is shown in https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show. You can copy and paste the code above into the link and view the results.

Vue not rendering into html

I'm new to Vue.js, and I am having trouble in rendering vue data to html.
The html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue</title>
<script src="https://unpkg.com/vue#2.6.11/dist/vue.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
<h1>{{ name }}</h1>
</div>
<script src="apps.js"></script>
</body>
</html>
Here's the JS file:
new VUE({
el: '#app',
data: {
name : 'Dhruv'
}
});
As comment, it is new Vue not new VUE.
Also, data needs to return an object.
new Vue({
el: '#app',
data: function () {
return {
name: 'Dhruv',
};
}
});

angularjs infinite scroll from external 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.

link html page to html page

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>My App</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/topcoat-mobile-onsen-ios7.css">
<link rel="stylesheet" href="styles/app.css"/>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="js/app.js"></script>
<script src="controller.js"></script>
<script src="data.js"></script>
<script src="master.js"></script>
<script src="detail.js"></script>
</head>
<body>
<ons-screen>
<ons-navigator title="Page 1">
<ons-page class="center">
<div ng-controller="MasterController">
<ons-list>
<ons-list-item
class="topcoat-list__item--tappable topcoat-list__item__line-height"
ng-repeat="item in items"
ng-click="showDetail($index)">
<ons-row>
<ons-col size="10">
<ons-icon
icon="{{item.icon}}"
fixed-width="true">
</ons-icon>
</ons-col>
<ons-col class="left">
{{item.title}}
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</div>
</ons-page>
</ons-navigator>
</ons-screen>
</body>
</html>
here is js file
var myApp = angular.module('myApp');
myApp.factory('Data', function(){
var data = {};
data.items = [
{
title: 'aducational',
icon: 'comments-o',
description: 'Item 1 Description',
href: 'tp.html'
},
{
title: 'dance',
icon: 'desktop',
description: 'Item 2 Description',
href: 'dance.html'
},
{
title: 'singing',
icon: 'heart-o',
description: 'Item 3 Description',
href: 'tp.html'
}
];
return data;
});
i am not able reach dance.html,where tp.html working properly.when i change dance to tp it works properly.once i click on dance after that i am not able to get tp also :(.where my dance.html working properly alone

Uncaught syntax error in angularjs

I am using below code to populate data from Parse api into table using Angularjs and bootstrap.But the Javascript in which i defined the controller is not executing. The html code is given below.
index.js
<!DOCTYPE html>
<html data-ng-app="parseApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body >
<div class= "container" data-ng-controller="ParseController" >
<table class="table" >
<thead>
<tr>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="temp in user">
<td>{{temp.email}}</td>
<td>{{temp.phone}}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var parse = angular.model('parseApp',[]);
function ParseController($scope, $http)
{
$http({method : 'GET',url :'https://api.parse.com/1/classes/User',
headers: {'X-Parse-Application-Id': 'XXXXXXX',
'X-Parse-REST-API-Key':'XXXXXX',
}}).success(function(data,status) {
console.log(data);
$scope.user = data;
}).error(function(data,status)
{
}
parse.controller('ParseController',ParseController);
}
</script>
</body>
</html>
You have a syntax error
.error(function(data,status)
{
});
Also, it is angular.module, not angular.model
I think the syntax error is in the error handler:
.error(function(data,status)
{
});