I am trying to consume data from my API to show it in my HTML templates. I am using knockout.js for the client-server exchange.
The following code contains the file cronologia.js , and an HTML file:
function cronologiaViewModel() {
var self = this;
self.publicaciones = ko.observableArray();
self.current_page = 1;
self.load = function() {
self.cargarCronologia();
}
self.cargarCronologia = function() {
$.ajax({
type: "GET",
url : '/echo/json',
dataType : "json",
success : function(data) {
ko_element = ko.mapping.fromJS({contenido: 'test data'});
self.publicaciones.push(ko_element);
}
});
}
}
var cronologiaVM = new cronologiaViewModel();
cronologiaVM.load();
ko.applyBindings(cronologiaVM);<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/locale/es.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Director/1.2.8/director.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-10 ">
<div class="bubble">
<div class="pointer" data-bind="foreach: publicaciones">
<p data-bind="text: contenido" > A Personal Post</p>
</div>
<div class="pull-left">Publicado hace:</div>
<div class="pointer-border"></div>
</div><!-- bubble end -->
<br/>
<p class="post-actions"> <a href="#">Me Gusta</a> - <a href="#">Compartir</a> </p>
<div class="comment-form">
<form class="form-inline">
<div class="form-group, col-sm-8">
<input type="text" class="form-control" id="exampleInputName2" placeholder="Ingrese su comentario">
</div>
<button type="submit" class="btn btn-default">Comentar</button>
</form>
</div>
</div>Example of JSON data :
{
"id": 1,
"contenido": "Mi primer Post",
"fecha": "2017-02-11T20:46:14.050475Z"
}
When I check the browser console, I get the following error:
Uncaught Syntax Error: Unexpected token < (cronologia.js: 3)