I have a MEAN stack application in which I am accessing the node backend as an API. I am able to set the response message and am also able to see it in the response object in my browser. How will I be able to access this message and display it in my HTML?
Screenshot of Network tab in browser showing the response object:
[
This is a very broad question. Really, what you've said is - "I've got the server-side, how do I do the client-side."
Anyway, you can use Angular. With Angular, you can do this:
$http.get('/items').then(function(response) {
$scope.data = response.data;
});
That gets the data to Angular(mind you, this is simplified), which can then show it in the html through templates like this:
<div ng-repeat="item in data">{{ item.name }}</div>
In your example, you're actually showing a null result. I would actually be managing the messaging for this in the Angular template something like this:
<div ng-if="!data">No items</div>
Actually, you're showing a result that appears to be an unsuccessful user lookup. For that, you'd be creating a script like this(again, this is simplified):
$http.get('/users/' + id).then(function(response) {
$scope.user = response.data.user;
});
and a template like this:
<div ng-if="user">
<h1>{{ user.name }}</h1>
<h3>Favorite Books<h3>
<div ng-repeat="book in user.books">{{ book }}</div>
</div>
<div ng-if="!user">Couldn't find user</div>
Hope this helps.
Related
I've got a json list like this in Angular:
vm.allnews = actualNews;
I checked it on console.log and it works. Getting all news by array list.
Every list has title and I can shot it on Angular template:
<div class="card" ng-repeat="news in newsPage.allnews">
{{news.title}}
..
And it works too. But I have a form and must be send news title in data and I tried like that:
function sendTitle () {
var title = $scope.news.title;
..
But its getting 'title undefined' error.
Whats the problem? How can I solve it? Thanks.
You need to send a parameter with relevant object from array.
<div class="card" ng-repeat="news in newsPage.allnews">
<div>{{news.title}}</div>
<div ng-click="sendTitle(news.title)">Submit</div>
</div>
This ng-repeat shows me data but not {{ ...}}
ng-repeat WORKS
<div ng-repeat="x in confirm.booking.flightData">
{{x.DestinationAirport}}
</div>
Template Binding DOES NOT WORK
{{confirm.booking.flightData.DestinationAirport}}
is this because of the Arrays of data?
console.log shows this
confirm.booking > Object { flightData: Array[2], travelers: Array[1]
What I'm after is also going to be data in flightData Array Object 0
Picture below
example I was wanted to display data inside the Segments per the picture, Segments is an Array[2]
{{confirm.booking.flightData[1].Segments[0].FlightNumber}}
I don't believe the above will work, but based on the picture of my javascript object , what do I need to do?
It is obvious that {{confirm.booking.flightData.DestinationAirport}} will not work as flightData is an array.
Did you check out {{confirm.booking.flightData[1].Segments[0].FlightNumber}} - becasue it will work. See a demo below:
angular.module("app", []).controller("ctrl", function($scope) {
$scope.array = [{key:[1, {key: 'value2'},3]}, {key: 'value1'}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="wrapper" ng-app="app" ng-controller="ctrl">
<div>{{array[0].key[1].key}}</div>
</div>
If your ng-repeat loop is displaying data and the binding {{ }} is NOT, then yes you are simply not looking at the array.
Based on YOUR data, you seem to already have the answer! You are not showing US all your segment data, but if there is a FlighNumber then
{{confirm.booking.flightData[1].Segments[0].FlightNumber}}
SHOULD WORK !
You better be thinking about best practices as that is going to not be so awesome to maintain...
cheers
I have a fairly novice question and am hoping someone can help me.
I have the following code in which subscribe/publish is not working:
if (Meteor.isServer) {
Meteor.publish('items', function () {
return Items.find({});
});
}
if (Meteor.isClient) {
Meteor.subscribe("items");
}
In my template:
<template name="items">
<div class="ui segment">
<div class="ui relaxed list">
{{#each item in items}}
<div class="item">
<img class="ui avatar image" src="http://placehold.it/20x20">
<div class="content">
<a class="header">{{item.text}}
</div>
<button class="delete">×</button>
</div>
{{/each}}
</div>
</div>
</template>
But nothing gets output. However when I add:
Template.items.helpers({
items: function () {
return Items.find({});
}
});
I do see the list properly. Why is this so? Also I am clearly confused as to why someone would want to use subscribe/publish along with the template helpers.
I suggest you read Data flow from the database to the UI: Three layers of Meteor
You are creating a publication labeled: items. Then you are subscribing to a publication labeled deals. This will not work as the labels must match for the subscription to work.
If adding that template helper then shows the data in the UI, you must have the autopublish package in your app. It will be autopublish, not your pub/sub, that is sending the client the data the client puts in it's mini-mongo Items collection.
So pub/sub gets the data from the server to the client, but doesn't display it. That is why you need the template helper, to get the data from the client's mini-mongo collection into the format the templates require.
You must subscribe() using the same name as used in the publish(). In your case (pay attention to 'items'):
/server:
Meteor.publish('items', function () {
return Items.find({});
});
/client:
if (Meteor.isClient) {
Meteor.subscribe('items');
}
The publish/subscribe link is telling meteor to send all docs in the 'Items' collection to minimongo on the client. Now, the purpose of the template helper is to tell meteor that you want to reactively update the template any time a document changes in Items.
A good reference on the subject: https://www.discovermeteor.com/blog/understanding-meteor-publications-and-subscriptions/
Im working on a project that uses AngularJS and Ionic.
The project will have inputs that forms a list and anyone may comment on each list item.
How do I include a date/time that a user adds an list item or comments on it?
I done some research and understand that AngularJS has a existing item, kind of like a inbuilt method ("[ ].created") for this. I saw many projects just use that without any controllers. I tried but it didnt work for me. I tried to then add a js code, didnt work as well. My code below.
Not too sure if its a Ionic compatibility issue if any? Would appreciate some help. Sticking to the AngularJS method will be preferred! Thank you!
The AngularJS documentation for dates
The resultant code is as follows with a filter:
html portion (included ng-controller="MainCtrl")
<div class="post row" ng-repeat="post in posts"></div>
<a href="{{ post.url }}">{{ post.title }}
<span class="url">({{ post.url | hostnameFromUrl }})</span>
</a>
<br> {{ post.created | date }}
<!-- this is the angularJS code added -->
I'm not quite sure what are you tiring to achieve with this "$scope.post" variable
It will throw undefined because you are creating static object "$scope.post" without "get()" function here:
$scope.post = {url: 'http://', title: ''};
If you are tying to revive some data form server try using angular $http component
Here also "$scope.post[0]" and "post.getDate" will become undefined
$scope.date = post.getDate( $scope.post[0].created);
I'm retrieving a person from a service and displaying the details on the details.html template. If the person is not found, the service returns a 404 response and I handle it from within the controller by (currently) displaying an alert popup stating its not found.
Is it possible to dynamically change to a different template, like a 'notfound.html' for instance?
You can do it using ng-switch directive. Save state of your request in variable (for example $scope.items = data if you received your data correctly or $scope.items = false otherwise) and then:
<div ng-switch on="items">
<div ng-switch-when="false" ng-include src="'error.html'"></div>
<div ng-switch-default ng-include src="'details.html'"></div>
</div>