We Keep Coding

Angularjs - Loading JSON data with $scope values (dynamic) returns undefined

I have ng-model to my input field like below.
<div ng-app="myApp" ng-controller="GlobalCtrl">
<input type="text" ng-model="FirstName">
{{FirstName}}
</div>
Now in my controller console.log $scope.FirstName is the correct values I give in my view.
But when I try to load the $scope into a JSON like structure I get undefined.
myApp.controller('GlobalCtrl', function($scope) {
$scope.loadedata = {"asd":$scope.FirstName};
console.log($scope.FirstName); //this is fine
console.log($scope.loadedata); //but this is undefined.
});
Now $scope.loadedata) is undefined. why is it? what am I doing wrong?

There are a few things about your code snippet. You are using an input bar where your DOM is trying to render FirstName which is undefined. See this demo for the proper us of the input and two-way binding template-controller relationship.
https://material.angularjs.org/latest/demo/input
Also, where are you calling the console.log()? I assume after the controller call?

My view:
<div ng-app="myApp" ng-controller="GlobalCtrl">
<input type="text" ng-model="req.FirstName">
{{req.FirstName}}
</div>
My Controller :
myApp.controller('GlobalCtrl', function($scope) {
$scope.req = {};
console.log(JSON.stringify($scope.req));
});
After a long research, I found out that it's better to do without serializing and you can do like this using ng-model. And it works.

Angular 1.x ng-repeat shows data while straight template binding doesn't display

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

How do I display content from a HTTPresponse object in HTML?

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.

AngularJS "ng-repeat | filter:..." not working as I would expect (shows no data)

I'm trying to learn some AngularJS. I have a small page hosted locally which looks up information in MySQL. The fields are [user_ID, comment, user_Name].
Here is the webpage's code:
AngularJS Test
<div id="container" ng-app='two_way' ng-controller='two_way_control'>
<input ng-model="name_filter" placeholder="filter names">
<p>{{name_filter}}</p>
<div class="row" ng-repeat="data in profile_pictures | filter:{data.user_Name:name_filter}">
<div class=".col-sm-6 .col-md-5 .col-lg-6" style="background-color:#eee;height:125px;width:500px;margin-left:240px;margin-top:20px;">
<h4 style="padding:10px;">{{data.user_Name}} says:</h4><hr>
<p style="padding:10px;">
{{data.comment}}
</p>
<img src="{{data.profile_picture}}" class="img-circle" style="width:100px;height:100px;margin-left:-140px;margin-top:-130px;">
</div>
</div>
</div>
Now the problem I am having is regarding the filter for "data in profile_pictures"
I'm trying to filter just by the user_Name field. When I type anything into the input box on the site, no data is displayed (everything disappears). I have tried hardcoding the filter to be a name I know is in the data, but that just shows no data when I load the page.
Any ideas?
Thanks for the help

You have invalid syntax in your filter. You need to provide the key name of the object as the filter object, do not use dot notation for the object key #filter:{data.user_Name:name_filter}"
i.e try
ng-repeat="data in profile_pictures | filter:{user_Name:name_filter}"

how to get a item inside item in html angular js?

I tried get a value from both dynamic objects in angular js
<div ng-controller="SampleController">
<div> {{item['111']['price']}}
</div>
inside SampleController
$scope.item={111:{price:"232"},112:{price:"233"},115:{price:"237"}};
right now I put item['111']['price'] statically. if when i receive the value dynamically from some where else how to that.
Like,
<div ng-controller="SampleController">
<div> {{item[{{ItemId['id']}}]['price']}}
</div>
$scope.ItemId={id:111};
$scope.item={111:{price:"232"},112:{price:"233"},115:{price:"237"}};
But its returning error. I tried with route scope also.Any one please help out.

Try this:
<div>{{item[ItemId.id].price}}</div>