Develop Reference

How to display detail view on separate page using Vuejs

I have a page where there is multiple cases and when i click on case it shows the detail against this case on same page.
I have attached the screen shot
as you can see two cases are showing 1) ublox and 2) test case when i click any of them you can see on top detail against this case is appeared.
But I do not want to display these detail on this page I wan to display these detail on separate page when i click any of these case. I am new to vuejs can anyone please help me on this?
Your help will be really appreciated.
My code of vue:
<template>
<div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 300px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- /.card-header -->
<div class="col-lg-6">
<div class="card">
<div class="card-body table-responsive p-0" style="height: 300px;">
<table class="table table-hover">
<thead>
<tr>
<th>Case Name</th>
</tr>
</thead>
<tbody>
<tr v-for="kase in cases" :key="kase.id" v-on:click="clickList(kase)">
<td>{{kase.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-info">
<div class="card-header">
<h3 class="card-title">Add New Case</h3>
</div>
<!-- /.card-header -->
<!-- form start -->
<form class="form-horizontal" #submit.prevent="onSubmit" #keydown="form.errors.clear()">
<div class="card-body" style="height: 239px;">
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" required autocomplete="name" autofocus placeholder="Name" v-model="form.name">
<span class="invalid-feedback d-block" role="alert" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-info" :disabled="form.errors.any()">Add Group</button>
</div>
<!-- /.card-footer -->
</form>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
</template>
<script>
export default {
data() {
return {
cases: [],
lists: [],
form: new Form({
'name': ''
})
}
},
created() {
axios.get('/new-case')
.then(({data}) => this.cases = data);
},
methods: {
clickList (Kase) {
axios.get(`/case-log/${Kase.id}`).then(response => this.lists = response.data);
},
onSubmit(){
this.form
.post('/new-case')
.then(kase => this.cases.push(kase));
}
}
}
</script>
and my web.php
Route::get('/case-log/{id}', 'CaseLogController#index');
My Controller:
class CaseLogController extends Controller
{
public function index($id)
{
$case = kase::with('sockets')->find($id);
return $case->sockets;
}
}
your help will be appreciated.
Thanks in advance
<template>
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 300px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
lists: [],
}
},
created() {
const uniqueIdentifierToFetchTheDetailsFromTheDatabase this.$route.params.id
axios.get(`/case-log/${Kase.id}`).then(response => this.lists = response.data);
},
}
</script>
This is updated:
<template>
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 300px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
lists: [],
}
},
created() {
const id = this.$route.params.id
axios.get(`/case-log/${Kase.id}`).then(response => this.lists = response.data);
},
}
</script>

You will have to define your routes using Vue-router. The documentation shows you how to get started.
Then you need to extract the template of the details into a component, say DisplayDetailView.vue
So you will have:
DisplayDetailView.vue
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 300px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
.....
When you click on the detail, it will navigate you to the component where details are shown.
Clicking on Ublox for example, may have code attached to it as follows
ComponentWithCaseName.vue
<div class="col-lg-6">
<div class="card">
...
<tr v-for="kase in cases" :key="kase.id" v-on:click="handleCaseClick"> // add click handler
<td>{{kase.name}}</td>
</tr>
......
</div>
</div>
And you have a method in the component where the case name is clicked
methods: {
handleCaseClick() { // this pushes it to the component that has the display view details i.e DisplayDetailView.vue
this.$router.push(`/path-to-component-for-view-details/${uniqueIdentifierToFetchTheDetailsFromTheDatabase}')
}
}
In the DisplayDetailView.vue component, you have to grab the unique identifier from the url, using the created/mounted hook, (in this case, I use the created lifecycle hook, but mounted will also work) that you will use to make the database call that will populate the template.
DisplayDetailView.vue
export default {
data() {
return {
cases: [],
lists: [],
}
},
created() {
const uniqueIdentifierToFetchTheDetailsFromTheDatabase this.$route.params.uniqueIdentifierToFetchTheDetailsFromTheDatabase // whatever name you put in the route `e.g if the route is `/path-to-component-for-view-details/:caseId`, you do this.$route.params.caseId
axios.get(`/case-log/${uniqueIdentifierToFetchTheDetailsFromTheDatabase}`).then(response => this.lists = response.data);
},
}
This is the general gist of things. You can figure the rest from here. This will provide you more details.

Duplicate data in table's row, Angular

Why am I getting same value in all rows of table. Table has rows and when row is clicked another row opens with additional information and every row contains same data like last clicked row. Probably it is cos I am saving data in same object, but I really don't know how to solve it. I am getting data from json files with factor, so you don't get confused, where my data is coming from. Here is the code. Thank you very much.
'use strict';
angular.module('sbAdminApp')
.controller('TreeTableCtrl', TreeTableCtrl);
function TreeTableCtrl($scope, $http, factor) {
$scope.nonCollapsedUser = [];
var getUsers = function () {
factor.getUse().then(function (response) {
$scope.users = response.data;
});
};
getUsers();
var getUsersInfo = function () {
factor.getChi().then(function (response) {
$scope.child = response.data;
console.log($scope.child);
});
};
getUsersInfo();
$scope.togglePerson = function (index) {
$scope.nonCollapsedUser.push(index);
$scope.newObj=$scope.child[index];
console.log($scope.newObj);
};
$scope.hidePerson = function (index)
{
for(var i=0; i<$scope.nonCollapsedUser.length; i++){
if($scope.nonCollapsedUser[i] === index){
$scope.nonCollapsedUser.splice(i, 1);
}
}
};
}
<div class="panel panel-default" style="background: #fcf8e3">
<div class="panel-body">
<table st-safe-src="leads" class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody ng-repeat="user in users track by $index">
<tr>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.lastName}}</td>
<td>
<button ng-if="nonCollapsedUser.indexOf($index) == -1" class="btn" ng-click="togglePerson($index)">
<i class="fa fa-arrow-down"></i></button>
<button ng-if="nonCollapsedUser | contains:$index" class="btn" ng-click="hidePerson($index)"><i
class="fa fa-arrow-up"></i></button>
</td>
</tr>
<tr ng-if="nonCollapsedUser | contains:$index">
<div>
<td>{{newObj.address}}</td>
<td>{{newObj.mobNumb}}</td>
</div>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>

According to your description,
I assume your users, child arrays like this
$scope.users =[
{"id":1,"name":"Mirko","lastName":"Spriko"},
{"id":2,"name":"Pero","lastName":"Peric"},
{"id":3,"name":"Marko","lastName":"Prezime"}
];
$scope.child =[
{"address":"Address1","mobNumb":"47423756324"},
{"address":"Address2","mobNumb":"73454635545"},
{"address":"Address3","mobNumb":"87464343648"}
];
First you need to map child to users
angular.forEach($scope.users, function(value,key){
value.child =$scope.child[key];
});
Now you can achive your target
<table st-safe-src="leads" class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Last Name</th>
<th></th>
</tr>
</thead>
<tbody ng-repeat="user in users" >
<tr>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.lastName}}</td>
<td>
<button ng-show="nonCollapsedUser.indexOf($index) == -1" class="btn" ng-click="togglePerson($index)">
<i class="fa fa-arrow-down"></i>veiw</button>
<button ng-show="nonCollapsedUser.indexOf($index) > -1" class="btn" ng-click="hidePerson($index)"><i
class="fa fa-arrow-up"></i>hide</button>
</td>
</tr>
<tr ng-show="nonCollapsedUser.indexOf($index) > -1">
<td></td>
<td>{{user.child.address}}</td>
<td>{{user.child.mobNumb}}</td>
<td
</tr>
</table>
This is working JSFiddle

Create dynamic column and row with ng-repeat

I am using angularjs and i want to create dynamic row with ng-repeat but unable to achieve. I will clear after see my code. Here is my code and jsfiddle:-
td.controllers.js
function TodoCtrl($scope) {
$scope.products = [{
name: 'Abc'
}, {
name: 'Bil'
}, {
name: 'Smart'
}];
}
td.html
<div ng-app>
<div ng-controller="TodoCtrl">
<table class="table">
<thead>
<tr>
<th rowspan="2">Month</th>
<th ng-repeat="product in products" colspan="2">{{product.name}}</th>
</tr>
<tr>
<th>A</th> //I want to dynamic it
<th>B</th> //
</tr>
</thead>
</table>
</div>
</div>
My desire output is:-
-----------------------------
Month | Abc | Bil | Smart
| A|B | A|B | A|B
----------------------------

<div ng-app>
<div ng-controller="TodoCtrl">
<table class="table">
<thead>
<tr>
<th rowspan="2">Month</th>
<th ng-repeat="product in products">{{product.name}}</th>
</tr>
<tr>
<th></th> <!--I want to dynamic it-->
<th ng-repeat="product in products">A|B</th>
</tr>
</thead>
</table>
</div>
</div>
Try this code
Here table header is created dynically and table data also.
Let me know if you are getting nay problem

try this
<html>
<head>
<script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script>
var app=angular.module("myapp", []);
app.controller("namesctrl", function($scope){
$scope.products = [{
name: 'Abc'
}, {
name: 'Bil'
}, {
name: 'Smart'
}];
});
</script>
</head>
<body ng-app="myapp" ng-controller="namesctrl">
<div>
<table class="table">
<thead>
<tr>
<th rowspan="2">Month</th>
<th ng-repeat="product in products">{{product.name}}</th>
</tr>
<tr>
<th></th>
<th ng-repeat="product in products">A|B</th>
</tr>
</thead>
</table>
</div>
</body>
</html>

How to save dynamic html-code in database for specific user

I have javascript code that works a lot like this fiddle: http://jsfiddle.net/nj4N4/7/
On my page it looks like this: image.
When you click on the "add a year" button, a table that looks like year2 pops upp above the previous year.
I now want this to be saved in the database so when you update the page, the specific user that is logged in still have the same quantity of years shown as before he/she updated the site (or logged out). My question is how I could do that, and where to begin. I am using the mean stack (mongodb, node, express, angular).
I have created a database named year and when you click on the "add a year" button it adds a new year in that database, but it only has an Id for now. This is the code:
HTML:
<div class="row">
<button class="btn btn-default addyear" ng-click="vm.addYear();" onclick="add_fields();">Add a year</button><br><br><br>
<div class="row" >
<div id="year6"></div>
<div id="year5"></div>
<div id="year4"></div>
<div id="year3"></div>
<div id="year2"></div>
<div class="panel panel-default" >
<div class="panel-heading "><B> YEAR 1</B>
<a href="#" class= "show" id="hide" >Show less</a>
</div>
<div class="panel-body hideyear1 " >
<div class="col-xs-6">
<table class="table table-striped">
<tr >
<td><b>Course code</b></td>
<td><b>Course name</b></td>
<td><b>Block</b></td>
<td><b>Level</b></td>
<td><b>HP</b></td>
</tr>
<tr>
<td>TDDD27</td>
<td>Webprog</td>
<td>1</td>
<td>A</td>
<td>6</td>
</tr>
<tr>
<td>TEIE06</td>
<td>IFP</td>
<td>4</td>
<td>A</td>
<td>6</td>
</tr>
</table>
</div>
<div class="col-xs-6">
<table class="table table-striped">
<tr>
<td><b>Course code</b></td>
<td><b>Course name</b></td>
<td><b>Block</b></td>
<td><b>Level</b></td>
<td><b>HP</b></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
<script>
var year = 1;
var limit = 7;
function add_fields() {
year++;
if (year == limit) {
exit;
}
else {
var newdiv = document.createElement('div');
if(year==2) {
newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR ' +year+'</B> Show less </div> <div class="panel-body hideyear1 "> <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
document.getElementById('year2').appendChild(newdiv);
}
if(year==3) {
newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR ' +year+'</B> <a href="#" class= "show" id="hide" >Show less</a> </div> <div class="panel-body hideyear1 " > <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr></table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
document.getElementById('year3').appendChild(newdiv);
}
if(year==4) {
newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR ' +year+'</B> <a href="#" class= "show" id="hide" >Show less</a> </div> <div class="panel-body hideyear1 " > <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
document.getElementById('year4').appendChild(newdiv);
}
if(year==5) {
newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR ' +year+'</B> <a href="#" class= "show" id="hide" >Show less</a> </div> <div class="panel-body hideyear1 " > <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> <tr> </table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
document.getElementById('year5').appendChild(newdiv);
}
if(year==6) {
newdiv.innerHTML = '<div class="panel panel-default" ><div class="panel-heading "><B>YEAR ' +year+'</B> <a href="#" class= "show" id="hide" >Show less</a> </div> <div class="panel-body hideyear1 "> <div class="col-xs-6"> <table class="table table-striped"> <tr > <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> <tr> </table> </div> <div class="col-xs-6"> <table class="table table-striped"> <tr> <td><b>Course code</b></td> <td><b>Course name</b></td> <td><b>Block</b></td> <td><b>Level</b></td> <td><b>HP</b></td> </tr> </table> </div> </div> </div> </div> </div> ';;
document.getElementById('year6').appendChild(newdiv);
$(".addyear").hide();
index.controller:
(function () {
'use strict';
angular
.module('app')
.controller('Home.IndexController', Controller);
function Controller(UserService, YearService, FlashService) {
var vm = this;
vm.user = null;
vm.addYear = addYear;
initController();
function initController() {
UserService.GetCurrent().then(function (user) {
vm.user = user;
});
}
function addYear() {
YearService.Create()
.then(function () {
FlashService.Success('Year saved!');
})
.catch(function (error) {
FlashService.Error(error);
});
}
}
})();
year.service.js
(function () {
'use strict';
angular
.module('app')
.factory('YearService', Service);
function Service($http, $q){
var service = {};
service.Create = Create;
return service;
function Create() {
return $http.post('/api/year').then(handleSuccess, handleError);
}
api/year.controller
var YearService = require('services/year.service');
router.post('/', createYear);
module.exports = router;
function createYear(req, res){
YearService.create(req.body)
.then(function(){
res.sendStatus(200);
})
.catch(function(err) {
res.status(400).send(err);
});
}
services/year.service
var db = mongo.db(connectionString, { native_parser: true });
db.bind('years');
var service = {};
service.create = create;
module.exports = service;
function create(yearParam) {
var deferred = Q.defer();
createYear();
function createYear() {
var year = yearParam;
db.years.insert(
year,
function (err, doc) {
if (err) deferred.reject(err);
deferred.resolve();
});
}
return deferred.promise;
}
Im sorry if this is to much code but since I don't know where to start or how to do this, I also don't know which code that is relevant.

Ok ,you need to separate the concerns, the Angular way.
It looks like you are only leveraging the $http resource requests of Angular where you could have generated the whole table with very little effort.
The goal you should have is to build a single Object of nested arrays (which we call a Model) that will hold each year's data which can easily be converted to JSON or back to an javascript Object.
Structure that can hold all of the information you need. Having a Model like this you can start building your visual elements. Based on this model. To add another year you would simply push an array of variables onto this model and your tables and visual elements update automatically through ng-repeat and ng-model directives.
Since it is much easier to manipulate a Model you can focus on the visual elements and styling instead of trying to remember if you copied all the table elements or if you have missing tags which will break the page.
Lastly a model like this can be used without any conversion directly in your $http resource request to update your database. The JSON conversion happens automatically.
You dont need the YearService, year.service, createyear deffered callbacks, or the massive javascript add_fields function.
You can simplify your whole app into two files: index.html and app.js.
Hold the fetch and save data in your main app controller as $scope functions that can be called directly from buttons on the page.
Get rid of the services and factories, just write one function saveModel(); and getModel(); and to add a year addYear() to manipulate the model.
Lastly in your html body you only need one table of one line of headers and the rows are generate from an ng-repeat. Wrap this table with a div for the years which you also ng-repeat on the years top level array.
Your array will look something like this:
[ "2000" : [{ course : "code", coursename : "webprog", block : "1"},
{ course : "code1", coursename : "webprog1", block : "2"}],
"2001" : [{ course : "code", coursename : "webprog", block : "1"},
{ course : "code1", coursename : "webprog1", block : "2"}]
]

How to call jsonp with angular js [duplicate]

This question already has answers here:
How to make a jsonp request
(2 answers)
Closed 7 years ago.
I am trying to get data in my table by using jsonp. I really don't know what I am doing wrong. I think it has something to do with the contents of my url. Or that I am not getting the data correctly. I have tried to do callback= JSON_callback. Still does not work.
This is my url http://jbossews-themaopdracht78.rhcloud.com/rest/json/org/JSONP/Organisaties?callback=JSON_CALLBACK
with contents:
callback([{"naam":"Hogeschool InHolland","docenten":null,"id":null},{"naam":"Hogeschool Utrecht","docenten":null,"id":null},{"naam":"Universiteit Utrecht","docenten":null,"id":null}])
app.js:
angular.module('OrganisatieApp', [
'OrganisatieApp.controllers',
'OrganisatieApp.services'
]);
services.js:
angular.module('OrganisatieApp.services', [])
.factory('organisatieAPIservice', function($resource,$http) {
var organisatieAPIservice = [];
organisatieAPIservice.getOrganisaties = function(){
return $http({
method: 'jsonp',
url: 'http://jbossews-themaopdracht78.rhcloud.com/rest/json/org/JSONP/Organisaties?callback=callback'
});
}
return organisatieAPIservice;
});
my Html div:
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Organisatie naam</th>
<th>Organisatie plaats</th>
<th>Organisatie Curriculum</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="organisatie in organisatieList">
<td>{{$index + 1}}</td>
<td>
<img src="/img/logos/{{organisatie.Organisatie.logo}}.png" />
{{organisatie.Organisatie.naam}} {{organisatie.Organisatie.docenten}}
</td>
<td>{{organisatie.Constructors[0].provincie}}</td>
<td>{{organisatie.curriculum}}</td>
</tr>
</tbody>
</table>
<ng-view></ng-view>
</div>
</div>
</div>
<div class="col-md-6">
<div class="page-header">
<h1>Opleidingsprofiel</h1>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<ul class="nav nav-pills" role="tablist">
<li role="presentation">Aantal Organisaties<span class="badge">3</span></li>
</ul>
</h3>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Organisatie naam</th>
<th>Organisatie plaats</th>
<th>Organisatie Curriculum</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="organisatie in organisatieList">
<td>{{organisatie.Organisatie.id}}</td>
<td>
<img src="/img/logos/{{organisatie.Organisatie.logo}}.png" />
{{organisatie.Organisatie.naam}} {{organisatie.Organisatie.docenten}}
</td>
<td>{{organisatie.Constructors[0].naam}}</td>
<td>{{organisatie.naam}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
controller.js:
angular.module('OrganisatieApp.controllers', []).
controller('organisatieController',function($scope, organisatieAPIservice) {
$scope.organisatieList = [];
organisatieAPIservice.getOrganisaties().success(function (response) {
//Assign response in Callback
$scope.organisatieList = response.docenten;
});
});

The name of the callback should be "JSON_CALLBACK"
https://docs.angularjs.org/api/ng/service/$http#jsonp