I have just started learning angularjs, I'm trying to load data from my json file on view. json file has a list of houses. But does not get showed on my view when I load the index.html file.
Data.json
[
{
"type": "Condo",
"price": 220000,
"address": "213 Grove Street",
"description": "Excellent place! Really nice view!"
},
{
"type": "House",
"price": 410500,
"address": "7823 Winding Way",
"description": "Beautiful home with lots of space for large family."
},
{
"type": "Duplex",
"price": 395000,
"address": "834 River Lane",
"description": "Great neighourhood and lot's of nice green space."
},
]
cribsFactory.js
angular
.module('ngCribs')
.factory('cribsFactory', function($http) {
function getCribs() {
return $http.get('data/data.json');
}
return {
getCribs: getCribs
}
});
cribsController.js
angular
.module('ngCribs')
.controller('cribsController', function($scope, cribsFactory) {
$scope.cribs;
cribsFactory.getCribs().success(function(data) {
$scope.cribs = data;
}).error(function(error) {
console.log(error);
});
});
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ng-cribbs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-app="ngCribs" ng-controller="cribsController">
<div class="well" ng-repeat="crib in cribs">
<h3>{{ crib.address }}</h3>
<p>
<strong>Type: </strong>{{ crib.type }}</p>
<p>
<strong>Description: </strong>{{ crib.description }}</p>
<p>
<strong>Price: </strong>{{ crib.price | currency }}</p>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"/>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"/>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"/>
</script>
<script src="app.js"/>
</script>
<script src="scripts/cribsController.js"/>
</script>
<script src="scripts/cribsFactory.js"/>
</script>
</html>
I'm trying to run the above code in htdocs folder of XAMPP. The folder structure is in the screen shot below.
The json file is inside the data folder and the files cribsFactory.js & cribsController.js are in scripts folder. When i type the URL "http://localhost/ng-cribbs/" in Firefox the output is a completely blank page with no error message of any sort hence the difficulty in debugging.
I was able to load data using an array but facing problem while using JSON file.. Can't understand what I'm doing wrong. Please help!!
Your json data was not valid, validate any json data before and you can use the below corrected json. Hope it helps! validate json here
[{
"type": "Condo",
"price": 220000,
"address": "213 Grove Street",
"description": "Excellent place! Really nice view!"
}, {
"type": "House",
"price": 410500,
"address": "7823 Winding Way",
"description": "Beautiful home with lots of space for large family."
}, {
"type": "Duplex",
"price": 395000,
"address": "834 River Lane",
"description": "Great neighourhood and lot's of nice green space."
}]
Your http call gives you a json string, you should convert it to a javascript array like so: $scope.cribs = JSON.parse(data)
Related
I am using https://www.npmjs.com/package/grunt-mustache-render to render a HTML file using a layout file and json file.
Here is the Grunt task:
mustache_render: {
json_data: {
files: [
{
data: 'output.json',
template: 'test.mustache',
dest: 'tmp/hello_json.html'
}
]
}
}
Output JSON looks like this:
[
{
"name": "John Doe",
"age": "30"
},
{
"name": "Alex Len",
"age": "27"
},
{
"name": "Debbie John",
"age": "36"
}
]
test.mustache looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mustache Sample</title>
</head>
<body>
<h2>Titles</h2>
<ul id="talktitles">
<script id="speakers-template" type="text/template">
{{#options}}
<li>{{{name}}}, {{{age}}}</li>
{{/options}}
</script>
</ul>
</body>
</html>
When I run grunt it created the tmp/hello_json.html file but the values are not populated. It looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mustache Sample</title>
</head>
<body>
<h2>Titles</h2>
<ul id="talktitles">
<script id="speakers-template" type="text/template">
</script>
</ul>
</body>
</html>
What am I doing wrong here?
Your output.json doesn't conform with template. Template waits options value in json file, but there is not such key.
Correct output json should be like this one:
{
options: [{
"name": "John Doe",
"age": "30"
}, {
"name": "Alex Len",
"age": "27"
}, {
"name": "Debbie John",
"age": "36"
}]
}
Addition
Also you have an ability to refer root of the json file with .
So you can change your template part to this
{{#.}}
<li>{{{name}}}, {{{age}}}</li>
{{/.}}
I am new to JSON and also AngularJS. I'm trying to access data elements in a deeply nested remote json file. I can manage to render the whole JSON results in my view. However, I can't seem to target the elements that are in an array deep inside the JSON. It's from Yahoo Currency.
This is my controller and view that renders the entire JSON file:
controller
var app = angular.module('app', []);
app.controller('DataCtrl', function ($scope, $http) {
$http.jsonp('https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22http%3A%2F%2Ffinance.yahoo.com%2Fwebservice%2Fv1%2Fsymbols%2Fallcurrencies%2Fquote%3Fformat%3Djson%22&format=jsonp&callback=JSON_CALLBACK').success(function (data) {
$scope.data = data;
});
});
view
<!doctype html>
<html ng-app="app" >
<head>
<meta charset="utf-8">
<title>LIVE</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="DataCtrl">
<h1>Live from JSON feed</h1>
<ul>
<li ng-repeat="row in data">
{{ data }}
</li>
</ul>
</body>
</html>
I tried writing the controller like this:
var app = angular.module('app', []);
app.controller('DataCtrl', function ($scope, $http) {
$http.jsonp('https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22http%3A%2F%2Ffinance.yahoo.com%2Fwebservice%2Fv1%2Fsymbols%2Fallcurrencies%2Fquote%3Fformat%3Djson%22&format=jsonp&callback=JSON_CALLBACK').success(function (data) {
var pair = { name };
// $scope.data = data;
if(data) {
if (data.results) {
pair.name = data.results.list.resources[0].resource.fields.name;
}
}
});
});
But that doesn't work. Here is the JSON (partial) .. I'm trying to access the "name", "price", and "utctimestamp" fields for each resource:
{
"query": {
"count": 1,
"created": "2015-11-07T05:42:03Z",
"lang": "en-US",
"diagnostics": {
"publiclyCallable": "true",
"url": {
"execution-start-time": "0",
"execution-stop-time": "23",
"execution-time": "23",
"content": "http://finance.yahoo.com/webservice/v1/symbols/allcurrencies/quote?format=json"
},
"user-time": "25",
"service-time": "23",
"build-version": "0.2.311"
},
"results": {
"list": {
"meta": {
"type": "resource-list",
"start": "0",
"count": "173"
},
"resources": [
{
"resource": {
"classname": "Quote",
"fields": {
"name": "USD/KRW",
"price": "1152.994995",
"symbol": "KRW=X",
"ts": "1446874620",
"type": "currency",
"utctime": "2015-11-07T05:37:00+0000",
"volume": "0"
}
}
},
{
"resource": {
"classname": "Quote",
"fields": {
"name": "SILVER 1 OZ 999 NY",
"price": "0.068046",
"symbol": "XAG=X",
"ts": "1446850711",
"type": "currency",
"utctime": "2015-11-06T22:58:31+0000",
"volume": "100"
}
}
},
{
"resource": {
"classname": "Quote",
"fields": {
"name": "USD/VND",
"price": "22364.000000",
"symbol": "VND=X",
"ts": "1446874620",
"type": "currency",
"utctime": "2015-11-07T05:37:00+0000",
"volume": "0"
}
}
},
...
For what it's worth, jsonp seems to return some kind of xml-looking stuff when I append the callback=JSON_CALLBACK to the url, like this:
JSON_CALLBACK({"query":{"count":"1","created":"2015-11-07T16:08:29Z","lang":"en-US"},"results":["<list><meta><type>resource-list</type><start>0</start><count>173</count></meta><resources><resource><classname>Quote</classname><fields><name>USD/KRW</name><price>1152.994995</price><symbol>KRW=X</symbol><ts>1446900900</ts><type>currency</type><utctime>2015-11-07T12:55:00+0000</utctime><volume>0</volume></fields></resource></resources><resources><resource><classname>Quote</classname><fields><name>SILVER 1 OZ 999 NY</name><price>0.068046</price><symbol>XAG=X</symbol><ts>1446850711</ts><type>currency</type><utctime>2015-11-06T22:58:31+0000</utctime><volume>100</volume></fields></resource></resources><resources><resource>
...
Is there a problem with how I'm using JSONp? I'm getting the data set rendered to my view (above) but it's all in the funky xml syntax. How to go about grabbing the 3 values I need from that to an array and rendering in a <ul>??
You can use your original controller, you only had problems in the view. It would work if you substitute it by this one:
<!doctype html>
<html ng-app="app" >
<head>
<meta charset="utf-8">
<title>LIVE</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="DataCtrl">
<h1>Live from JSON feed</h1>
<ul>
<li ng-repeat="res in data.query.results.list.resources">
{{ res.resource.fields.name }}: {{ res.resource.fields.price }}, {{ res.resource.fields.utctime }}
</li>
</ul>
</body>
</html>
Here is the Plunker using your JSON example: http://plnkr.co/edit/wzF5t9dTZt49n5eq9N1L?p=preview
Below, are the following three files which I believe is where the issue originates. I know I could have probably used POST, GET, PUT, DELETE, but I am deliberately trying it with $http.
mansionsController.js file:
angular
.module('ngMansions')
.controller('mansionsController', function($scope, mansionsFactory) {
$scope.mansions;
mansionsFactory.getMansions().success(function(data) {
$scope.mansions = data;
}).error(function(error) {
console.log(error);
});
});
mansionsFactory.js file:
angular
.module('ngMansions')
.factory('mansionsFactory', function($http) {
function getMansions() {
return $http.get('data/data.json');
}
return {
getMansions: getMansions
}
});
data.json file:
[
{
"type": "Condo",
"price": 220000,
"address": "214 Grove Street",
"description": "Excellent place, really nice view!"
},
{
"type": "House",
"price": 410500,
"address": "7823 Winding Way",
"description": "Beautiful home with lots of space for a large family."
},
{
"type": "Duplex",
"price": 395000,
"address": "834 River Lane",
"description": "Great neighborhood and lot's of nice green space."
}
];
I had a semicolon at the end of the square bracket in my json file. These small details always get the best of me. Thank you all for your efforts.
I have a workflow where I have audio content. I need to access for this content in other application (with javascript). I am trying with a GET method to this URL:
http://localhost:8086/alfresco/service/cmis/s/SpacesStore/i/1a7be6f8-0c50-4995-a211-1736642db06a/children?alf_ticket=TICKET_f9906d69befbc49668b92ddf372d62532a29ce7d
(In this URL, the id "1a7be6f8-0c50-4995-a211-1736642db06a" is the identificator of the package of the workflow task.)
But, the response is the next XML:
<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:app="http://www.w3.org/2007/app" xmlns:cmisra="http://docs.oasis-open.org/ns/cmis/restatom/200908/" xmlns:cmis="http://docs.oasis-open.org/ns/cmis/core/200908/" xmlns:alf="http://www.alfresco.org" xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/">
<author><name>admin</name></author>
<generator version="4.2.0 (r56674-b4848)">Alfresco (Community)</generator>
<icon>http://localhost:8086/alfresco/images/logo/AlfrescoLogo16.ico</icon>
<id>urn:uuid:1a7be6f8-0c50-4995-a211-1736642db06a-children</id>
<link rel="service" href="http://localhost:8086/alfresco/service/cmis"/>
<link rel="self" href="http://localhost:8086/alfresco/service/cmis/s/SpacesStore/i/1a7be6f8-0c50-4995-a211-1736642db06a/children?alf_ticket=TICKET_f9906d69befbc49668b92ddf372d62532a29ce7d"/>
<link rel="via" href="http://localhost:8086/alfresco/service/cmis/s/workspace:SpacesStore/i/1a7be6f8-0c50-4995-a211-1736642db06a"/>
<link rel="up" href="http://localhost:8086/alfresco/service/cmis/s/workspace:SpacesStore/i/13dd8d00-4ccd-4894-87fc-0b055cf41a4b/children" type="application/atom+xml;type=feed"/>
<link rel="down" href="http://localhost:8086/alfresco/service/cmis/s/workspace:SpacesStore/i/1a7be6f8-0c50-4995-a211-1736642db06a/descendants" type="application/cmistree+xml"/>
<link rel="http://docs.oasis-open.org/ns/cmis/link/200908/foldertree" href="http://localhost:8086/alfresco/service/cmis/s/workspace:SpacesStore/i/1a7be6f8-0c50-4995-a211-1736642db06a/tree" type="application/atom+xml;type=feed"/>
<title>1a7be6f8-0c50-4995-a211-1736642db06a Children</title>
<updated>2015-05-27T11:18:13.600-04:00</updated>
<opensearch:totalResults>0</opensearch:totalResults>
<opensearch:startIndex>0</opensearch:startIndex>
<opensearch:itemsPerPage>-1</opensearch:itemsPerPage>
<cmisra:numItems>0</cmisra:numItems>
</feed>
I don't know how to use this XML for my purpose. I need to hear the content (mp3 audio file) and modify its properties in my custom application.
Also I am trying with the next URL (GET):
http://localhost:8086/alfresco/service/api/node/content/workspace/SpacesStore/1a7be6f8-0c50-4995-a211-1736642db06a
But the result is: Web Script Status 404 - Not Found
How to retrieve a content of a workflow? There is some RESTful URL for this ?
Thanks for any help.
Greetings,
Pablo.
Finally, I resolve my questions using other RESTful URL. So, the steps to retrieve a content of a workflow is the next:
1. I get the package ID (this is a folder node) of the task of workflow:
GET /alfresco/service/api/task-instances/activiti$taskID
{
"data":
{
"id": "activiti$taskID",
"url": "api\/task-instances\/activiti$taskID",
"name": "wf:taskName",
"title": "Task for this",
"description": "Hello World !",
"state": "IN_PROGRESS",
"path": "api\/workflow-paths\/activiti$workflowID",
"isPooled": false,
"isEditable": true,
"isReassignable": true,
"isClaimable": false,
"isReleasable": false,
"outcome": null,
"owner":
{
"userName": "admin",
"firstName": "Admin",
"lastName": "istrator"
},
"properties":
{
"bpm_percentComplete": 0,
"bpm_description": "Hello World !",
"bpm_hiddenTransitions": [],
"bpm_package":"workspace:\/\/SpacesStore\/1a7be6f8-0c50-4995-a211-1736642db06a",
...........................................................
}
So, the package ID is: 1a7be6f8-0c50-4995-a211-1736642db06a
2. With the package ID, I get the content which I need of this package:
GET /alfresco/service/slingshot/node/workspace/SpacesStore/1a7be6f8-0c50-4995-a211-1736642db06a
.............................................
"children": [
{
"name": {
"name": "{http:\/\/www.alfresco.org\/model\/content\/1.0}grabacion1.mp3",
"prefixedName": "cm:grabacion1.mp3"
},
"nodeRef": "workspace://SpacesStore/9ed7905d-7017-40e9-9514-93244b0a9a6a",
"type": {
"name": "{http:\/\/www.alfresco.org\/model\/content\/1.0}content",
"prefixedName": "cm:content"
},
"assocType": {
"name": "{http:\/\/www.alfresco.org\/model\/bpm\/1.0}packageContains",
"prefixedName": "bpm:packageContains"
},
"primary": false,
"index": 0
}
],
.............................................
So, the content ID is: 9ed7905d-7017-40e9-9514-93244b0a9a6a
3. Finally, I get the content which I need:
GET /alfresco/service/api/node/content/workspace/SpacesStore/9ed7905d-7017-40e9-9514-93244b0a9a6a
If you need access to the properties of the content, you can use the URL of the step two with the content ID (in this example: 9ed7905d-7017-40e9-9514-93244b0a9a6a).
Greetings :)
I'm creating a basic web app using the Echo Nest API to get used to templating and fetching data from APIs. I was just wondering how I would access the 'artist_name' & 'title' objects inside 'song' from the JSON object and use Handlebars.js to insert this data inside my template? When I do the {{#each songs}} as I've written below, it doesn't work.
Thanks in advance!
PS. Jeanie Tracy does not reflect my music taste. It's just the JSON object that came up when I was testing it!
<main>
<section>
<input type="text" id="genre-name" placeholder="Enter the Genre Here." />
<input type="number" id="bpm" placeholder="Enter the BPM here." id="bpm">
Fetch
</section>
<section id="results">
</section>
</main>
<template id="results-template">
<article>
<header>
{{#each songs}}
<h1>{{ this.artist_name }}</h1> {{/each}}
</template>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="handlebars.js"></script>
<script type="text/javascript">
$('#fetch-albums').on('click', function() {
var genre = $('#genre-name').val();
var bpm = $('#bpm').val();
var source = $('#results-template').html();
var template = Handlebars.compile(source);
$.get('http://developer.echonest.com/api/v4/song/search?api_key=[hidden]&style=' + genre + '&min_danceability=0.65&min_tempo=' + bpm + '&results=5', function(data) {
$('#results').append(template(data));
});
});
</script>
JSON OBJECT
{
"response": {
"status": {
"version": "4.2",
"code": 0,
"message": "Success"
},
"songs": [{
"artist_id": "AR8COOH1187B990D7D",
"id": "SOGMVZZ1393A2A9142",
"artist_name": "Jeanie Tracy",
"title": "I'm Gonna Get You"
}, {
"artist_id": "AR8COOH1187B990D7D",
"id": "SOGMIVN14248BD9E88",
"artist_name": "Jeanie Tracy",
"title": "Feel Like Dancing [Joey Negro Dubbed Out]"
}, {
"artist_id": "AR8COOH1187B990D7D",
"id": "SOIMUFZ1315CD4CDEC",
"artist_name": "Jeanie Tracy",
"title": "Do You Believe In Wonder (Stone & Nick Late Nite Diner Mix)"
}, {
"artist_id": "AR8COOH1187B990D7D",
"id": "SOEQTUW1315CD4FAB2",
"artist_name": "Jeanie Tracy",
"title": "Intro"
}, {
"artist_id": "AR8COOH1187B990D7D",
"id": "SOENYBA12A6D4F46C0",
"artist_name": "Jeanie Tracy",
"title": "Rosabel's Disco Diva Mix"
}]
}
}
Your <article> and <header> don't have closing tags. While the HTML specifications may allow some tags to omit closing (like <td>, afaik), and while some browsers are forgiving enough, I don't know if the Handlebars compiler is the same.
Your songs is still under response. I think it should be {{#each response.songs}}. Also, I think you can go with {{ artist_name }} too.