I'm trying to get all "Title", "Year" and "imdbID" from this link.
I'm using Vuejs and Axios to do so. But I'm not sure how it's done ?
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="app">
<h2>Liste of films</h2>
<ul>
<li v-for="film in films">{{ film.Title }}, {{ film.Year }}, {{ film.imdbID }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data : {
films: [],
errors: []
},
created() {
axios.get('http://www.omdbapi.com/?apikey=xxxxx&s=iron%20man')
.then(function(response) {
this.films = response.data;
})
.catch(function(error) {
this.errors.push(error);
});
}
})
</script>
</body>
</html>
With this, I only get a page with {{ film.Title }}, {{ film.Year }}, {{ film.imdbID }}
I'm sure it's simple but I can't figure it out... Any help please ?
Worked with arrows :
axios.get('http://www.omdbapi.com/?apikey=xxxx&s=iron%20man')
.then(response => {
this.films = response.data.Search;
})
.catch(error => {
this.errors.push(error);
});
Related
I am writing because i have an issue using vue.js,
this is my index.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<h1> Prova VUE </h1>
<div id="app">
<p> Login:</p>
<button v-on : click="getInfo">OK</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
cordocs: [],
docenti: [],
link : '/newProvaTweb/hello-servlet'
},
methods:{
getInfo:function(){
var self = this;
$.get(this.link,{
action: "initialization"
}, function (data) {
self.cordocs = data[0];
});
}
}
});
</script>
I have included the script but, working with intellij doesn't recognize the vue component like this,
and it doesn't work. Someone know how to solve this problem?
I'm pretty new to the express/nodejs and would like to apply a route such that routes are dynamically adapted based on the article name.
The articles are saved within articles.js consisting of
const articles = [{
title: 'article1',
link: 'article2',
creator: 'Anna',
createdAt: '17/10/2021',
description: 'Test description',
publish: 'True'
},
{
title: 'article2',
link: 'article2',
creator: 'Sascha',
createdAt: '17/10/2021',
description: 'Test description',
publish: 'True'
},
{
title: 'article3',
link: 'article3',
creator: 'Anna',
createdAt: '17/10/2021',
description: 'Test description',
publish: 'True'
}]
exports.articles = articles;
In a seperate file I'm defining my routes in index.js:
const express = require('express')
const router = express.Router()
//load arcticles
const Articles = require('../articles/articles');
// ----Routing----
router.get("/", async (req, res) => {
const articles = await Articles.articles.filter(all => all.publish ==='True')
res.render("index", {articles: articles});
});
router.get("/route1", async (req, res) => {
const articles = await Object.values(Articles.articles).filter(all => all.publish ==='True');
res.render("route1", {articles: articles});
});
router.get("/route1/:link", async (req, res, next) => {
const articles = await Object.values(Articles.articles).filter(all => all.publish ==='True');
var name = req.params.link;
return res.json({ message: 'Users Show', Articles: name});
});
module.exports = router
However, when trying to access these via my HTML file, this doesnt seem to work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Clean Blog - Start Bootstrap Theme</title>
<link href="../css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Main Content-->
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<!-- Post preview-->
<div class="post-preview">
<% articles.forEach(article => { %>
<h2 class="post-title" style="margin-bottom: -1.41rem"><%= article.title %></h2>
</div>
</div>
</div>
</div>
<!-- Footer-->
<footer class="border-top">
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>
I suppose that within the HTML file the routes cannot be catched properly, however I cannot tell how why this is the case.
I have a really simple code. I'm trying to learn Vue by following this tutorial on youtube
https://www.youtube.com/watch?v=4deVCNJq3qc
I am stuck at 31:30 with this code:
Vue.component('car-list', {
template:
<ul>
<li v-for="car in cars">{{ car }}</li>
</ul>
})
for some reason it breaks the whole code and when i inspect the page on google chrome i get the error
Uncaught SyntaxError: Unexpected token '<'
screenshot of the error: https://ibb.co/CnzRFtZ
I am using Atom as my editor.
my whole code
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
</head>
<body>
<div id="root">
{{ carzName }}
<br>
<input v-model="newCar" #keyup.enter="addCar">
<button #click="addCar">+ Add</button>
<li v-for="car in cars">
{{ car }}
</li>
<car-list :cars="cars" />
</div>
</body>
</html>
<script>
Vue.component('car-list', {
template:
<ul>
<li v-for="car in cars">{{ car }}</li>
</ul>
})
const app = new Vue({
el: '#root',
component: [
'car-list'
],
data: {
cars: [
'audi',
'bmw',
'mercu'
],
newCar: ''
},
methods: {
addCar: function() {
this.cars.push(this.newCar)
this.newCar = ''
}
},
computed: {
carzName: function() {
if (this.newCar.length > 1) {
return this.newCar + 'y'
}
}
}
})
</script>
Thanks to anyone who is willing to explain me where the problem is at.
Template needs to be string. Add backtick quotes around it.
Vue.component('car-list', {
template: `
<ul>
<li v-for="car in cars">{{ car }}</li>
</ul>`
})
Edit: To iterate more on #Lawrence Cherone comment there is no need to register the component globally with Vue.component if you are gonna register it within your vue app.
Version 1: Register globally
Vue.component('car-list', {
template: `
<ul>
<li v-for="car in cars">{{ car }}</li>
</ul>`
})
and then remove component property from vue app
const app = new Vue({
el: '#root',
data: {}
})
Verison 2: Register within app
const carList = {
template: `
<ul>
<li v-for="car in cars">{{ car }}</li>
</ul>`
}
And then
const app = new Vue({
el: '#root',
component: {
carList
},
data: {}
})
I want map to my module with help of Knockoutjs and requrejs.
Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script data-main="js/index2" src="js/libs/require/require.js"></script>
</head>
<body>
<div id="review"></div>
</body>
</html>
index2.js (my main js)
requirejs.config({
// Path mappings for the logical module names
paths: {
'knockout': 'knockout/knockout-3.3.0',
'jquery': 'jquery/jquery-2.1.3.min',
'jqueryui-amd': 'jquery/jqueryui-amd-1.11.4.min',
'signals': 'js-signals/signals.min',
'crossroads': 'crossroads/crossroads.min'
},
shim: {
'jquery': {
exports: ['jQuery', '$']
},
'crossroads': {
deps: ['signals'],
exports: 'crossroads'
}
},
});
require([
'test'
'knockout',
'jquery'
],
function (test, oj, ko, $)
$(document).ready(function () {
ko.applyBindings(test,
document.getElementById('review'));
}
);
);
test.js (Module)
alert("Test done!!!");
I'm just starting out with Angular and most of programming in general. I'm trying to make a separate view1.html file appear on my index.html page but it won't, so I'm assuming it's a routing problem. I tried pasting the view1.html content in the body of my index.html to test it and it wasn't showing the controller content either. I'm sure they're simple mistakes but I can't find them. view.html is in a separate folder called views. I only have the javascript in the index.html page for convenience.
index.html
<!DOCTYPE html>
<html lang="en" ng-app='demoApp'>
<head>
<meta charset="UTF-8">
<title>First Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<body>
<div>
<div ng-view></div>
</div>
<script>
// create module called "demoApp" under the variable name "demoApp"
var demoApp = angular.module('demoApp', []);
// ROUTING
demoApp.config(function ($routeProvider) {
$routeProvider
.when ('/',
{
controller: 'SimpleController',
templateUrl: 'views/view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'views/view2.html'
})
.otherwise({ redirectTo: '/' });
});
// CONTROLLERS
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Caleb', city: 'Indianapolis' },
{ name: 'Samantha', city: 'Zionsville' },
{ name: 'Tim', city: 'Palo Alto' }
];
$scope.addCustomer = function () {
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
}
</script>
</body>
</html>
view1.html
<h2>View 1</h2>
Name:
<input type="text" ng-model="name" />
<ul>
<li ng-repeat="cust in customers"></li>
</ul>
Customer Name:
<input type="text" ng-model="newCustomer.name" />
<br>Customer City:
<input type="text" ng-model="newCustomer.city" />
<br>
<button ng-click="addCustomer()">Add Customer</button>
View 2
</div>
You need to include the script for angular's router.
<head>
<meta charset="UTF-8">
<title>First Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.min.js"></script>
Also, looks like you're missing a closing </head> tag.
Here's a working version of your HTML file:
<!DOCTYPE html>
<html lang="en" ng-app='demoApp'>
<head>
<meta charset="UTF-8">
<title>First Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.js"></script>
</head>
<body>
<div>
<div ng-view></div>
</div>
<script>
// create module called "demoApp" under the variable name "demoApp"
var demoApp = angular.module('demoApp', ['ngRoute']);
// ROUTING
demoApp.config(function ($routeProvider) {
$routeProvider
.when ('/',
{
controller: 'SimpleController',
templateUrl: 'view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'view2.html'
})
.otherwise({ redirectTo: '/' });
});
// CONTROLLERS
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Caleb', city: 'Indianapolis' },
{ name: 'Samantha', city: 'Zionsville' },
{ name: 'Tim', city: 'Palo Alto' }
];
$scope.newCustomer = { name: "", city: ""};
$scope.addCustomer = function () {
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
});
</script>
</body>
</html>