This is my first time to use vue.js, I'm following the youtube video: https://youtu.be/qOK6bOflZv0
This video showed how to use an external JSON and put data in the table.
I believed my code is the same as the video, but I could not get the object like the video from an external JSON.
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container mt-4" id="app">
<a v-bind:href="href">{{message}}</a>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users">
<th scope="row">1</th>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'test',
href: 'javascript:void(0)',
users: []
},
mouted: function() {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
this.users = response.data;
console.log(response);
})
.catch(error => {
// handle error
console.log(error);
})
}
});
</script>
</html>
This is my result: the table should loop the JSON (or at least, the console should show my object, but either is blank.
This is the screen snap from the video, it has already shown the data in the table.
Really appreciate it if anyone could help.
Related
I am trying to convert laravel blade file to doc but it's show an error DOMDocument::loadXML(): Opening and ending tag mismatch: link line 1 and head in Entity, line: 1.
Controller
$admin = \App\Admin::all();
$content = view('usersadmin.pdf', ['admin' => $admin])->render();
$dom = new \DOMDocument();
$dom->loadHTML($content);
$dom->saveHTML();
$phpWord = new \PhpOffice\PhpWord\PhpWord();
\PhpOffice\PhpWord\Shared\Html::addHtml($phpWord->addSection(), $dom->saveHTML(), true);
$objWriter = \PhpOffice\PhpWord\IOFactory::createWriter($phpWord, 'Word2007');
//$objWriter->save('doc_index_'.Carbon::now()->format('d-m-y h-i').'.docx');
$objWriter->save('list-admin.docx', 'Word2007', true);
blade file
<!DOCTYPE html>
<html>
<head>
<title>List Admin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
</head>
<body>
<style type="text/css">
table tr td,
table tr th{
font-size: 9pt;
}
</style>
<center>
<h4>List Admin</h4>
</center>
<table class='table table-bordered'>
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Email</th>
<th>Alamat</th>
<th>Telepon</th>
<th>Status</th>
</tr>
</thead>
<tbody>
#php $i=1 #endphp
#foreach($admin as $p)
<tr>
<td>{{ $i++ }}</td>
<td>{{$p->name}}</td>
<td>{{$p->email}}</td>
<td>{{$p->address}}</td>
<td>{{$p->phone}}</td>
<td>{{$p->status}}</td>
</tr>
#endforeach
</tbody>
</table>
</body>
</html>
I am wondering, is it not possible with this way?
You are providing HTML format to your DOMDocument while it is expecting XML.
Rewrite your code in proper XML and the conversion will work.
When I use this HTML template in my server, the head is copied on the body. I get in
<table id="myTable">
the whole head repeated.
<title>IndoorLoc App</title>
That title tag is the first that appears after the table tag and I don't understand wht thid happens and following that comes all the head tag including js scripts.
<!DOCTYPE>
<html>
<head>
<title>IndoorLoc App</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script type="text/javascript">
function ajax(){
var req = new XMLHttpRequest();
req.onreadystatechange = function(){
if (req.readyState == 4 && req.status == 200) {
document.getElementById('myTable').innerHTML = req.responseText;
}
}
req.open('GET', 'http://localhost:8080/data', true);
req.send();
}
setInterval(function(){ajax();}, 1000);
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header id="head">
<h1>IndoorLoc</h1>
</header>
<table id="myTable">
<tr>
<td>MAC address</td>
<td>RSSI</td>
</tr>
%for row in rows1:
<tr>
<td>{{ row[1] }}</td>
<td>{{ row[2] }}</td>
</tr>
%end
<tr>
<td>MAC address</td>
<td>RSSI</td>
</tr>
%for row in rows2:
<tr>
<td>{{ row[1] }}</td>
<td>{{ row[2] }}</td>
</tr>
%end
</table>
</body>
</html>
The response you are getting and directly inserting inside table tag, what kind of data is that, If it is table body markup then it will work otherwise it will just add string or response whatever you are getting.
I created a rest web api and using AngularJS, I want to receive those json data and store them in a table. I am new to AngularJS. I was able to get all the json data but I want to split them up into each row. I am not sure if I am doing to correctly or not but here is my code:
index.html
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="UTF-8">
<title>Angular</title>
<script src="lib/angular.js"></script>
<script src="angularDemo.js"></script>
</head>
<body>
<div ng-controller="demoController">
<table>
<tr>
<th>Id</th>
<th>Question</th>
</tr>
<tr ng-repeat=" quiz values">
<td>{{result.id}}</td> <!-- Does not get any value-->
<td>{{result.question}}</td> <!-- Does not get any value-->
</tr>
</table>
<h1>{{result}}</h1> <!-- gets all the json data -->
</div>
</body>
</html>
js
var app = angular.module("demoApp", []);
app.controller("demoController", function($scope, $http) {
$http.get("http://localhost:8080/quiz/webapi/quiz")
.then(function(response) {
$scope.result = response.data;
});
});
Your ng-repeat is not good,
If i understand your array of results is in $scope.result, so you have to do this kind of ng-repeat :
<tr ng-repeat="row in result">
<td>{{row.id}}</td>
<td>{{row.question}}</td>
</tr>
I have array of scope.students inside the controller. And the data is shown in my view form using ng-repeat in the table. What I want to do now is when I click the button, it should alert the parent index of the specific object. For example I click the button for 1 Brick Med then it should alert 0 because he is in section A. Then when I click the button in 3 it should alert 1 because he is sectionB. I am really new in angularjs any help is millions appreciated thanks
var stud = angular.module("stud", []);
stud.controller("StudentsController", function ($scope) {
'use strict';
$scope.alertMe = function (key){
alert(0);
};
$scope.sectionA = [
{
no:1,
name:'Brick Med',
},
{
no:2,
name: 'Colin Christopher',
},
];
$scope.sectionB = [
{
no:3,
name: 'Frank Joemar Timbang',
},
{
no:4,
name: 'Curtis Zaymond',
}
];
$scope.students = [
$scope.sectionA,
$scope.sectionB
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html data-ng-app="stud">
<head lang="en">
<meta charset="utf-8">
<title>Tally Boxes</title>
</head>
<body data-ng-controller="StudentsController" data-ng-init="init()">
<div id="container">
</div>
<div class="container-table">
<table border="1" width="100%">
<thead>
<tr>
<td>Students</td>
<td>Alert</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key,value) in students[0]">
<td>{{value.no}} {{value.name}}</td>
<td><button ng-click="alertMe(key)">Alert me!</button></td>
</tr>
<tr ng-repeat="(key,value) in students[1]">
<td>{{value.no}} {{value.name}}</td>
<td><button ng-click="alertMe(key)">Alert me!</button></td>
</tr>
</tbody>
</table>
</div>
<script src="angular.min.js"></script>
<script src="tallyboxController.js"></script>
<script src="tallyboxDirective.js"></script>
</body>
</html>
Your ng-repeat is a bit of a mess, but I'm guessing this is what you want to do:
<tbody ng-repeat="studentGroup in students">
<tr ng-repeat="student in studentGroup">
<td>{{student.no}} {{student.name}}</td>
<td><button ng-click="alertMe($parent.$index)">Alert me!</button></td>
</tr>
</tbody>
Note that (key, value) is for when you're iterating over an object's properties, but students is an array.
For the $parent.$index, see Access index of the parent ng-repeat from child ng-repeat
For the tbody ng-repeat see How to use ng-repeat without an html element
You could avoid using $parent.$index by changing the ng-click to alertMe(studentGroup) and $scope.alertMe to
$scope.alertMe = function (studentGroup) {
alert($scope.students.indexOf(studentGroup));
};
But it depends on your final usage which one you'd prefer.
I am using jQuery mobile and Knockout.js to test the first example on http://knockoutjs.com/documentation/foreach-binding.html but nothing is displayed and error console of FireFox reveals this error:
Timestamp: 9/10/2012 1:13:16 PM
Error: NotFoundError: Node was not found
Source File: http:///kotest/Scripts/knockout-2.1.0.js
Line: 46
Note that this is the latest knockout-2.1.0.js downloaded today.
The code is below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js" type="text/javascript"></script>
<script src="Scripts/knockout-2.1.0.js" type="text/javascript"></script>
</head>
<body>
<h4>People</h4>
<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
ko.applyBindings({
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
});
</script>
</body>
</html>
I should mention that it works as expected if references to the jQuery mobile js files are deleted.
Update:
You can try the jQuery mobile pageinit function.
<script type="text/javascript" >
$(document).on('pageinit','[data-role=page]', function(){
ko.applyBindings({
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
});
});
</script>
include a div Tag with the data-role="page" binding from jquery mobile:
<div data-role="page" >
<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
</div>
Your document is not in the ready state. Since you're using jQuery mobile, you'll want to listen for the pageinit event, then apply your KO bindings in that:
$(document).bind('pageinit', function() {
// Use KO here
});
Note that Daniel's answer suggests to use document.ready, however, that doesn't work in the jQuery mobile bits where page contents are loaded asynchronously via AJAX. Instead, you must use pageinit event.