Concat values from an API Response - javascript

I'm getting info from an API, and one of the returned values is a list of coupons. Per example:
[{"Consecutive":11,"Code":"E5ZQHZ","Cvv":"GNH","IdCoupon":77236},{"Consecutive":12,"Code":"WM96FY","Cvv":"NGE","IdCoupon":77237}]
What I need to do is concatenate the values from Consecutive, Code, Cvv and show them like a list (something like this):
<ul>
<li>'Code'/'cvv'/'consecutive'</li>
<li>'Code'/'cvv'/'consecutive'</li>
</ul>
How can I do that? I'm using Javascript and AngularJs.

You can use an ng-repeat in your ul like so:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.data = [{
"Consecutive": 11,
"Code": "E5ZQHZ",
"Cvv": "GNH",
"IdCoupon": 77236
}, {
"Consecutive": 12,
"Code": "WM96FY",
"Cvv": "NGE",
"IdCoupon": 77237
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<ul ng-repeat="d in data">
<li>{{d.Code}} / {{d.Cvv}} / {{d.Consecutive}}</li>
</ul>
</div>
There are other possible solutions but this should set you up nicely.

Related

Angular expression send by id

On Select/Option onchange() event it should write the value of the JSON file as an angular expression to test ID div.
However it writes like it's just a string: {{names[1].thnev}}
(And if I put this manually into the ID div, it works.)
Can you help me what did I miss? (In the last 4 hours...)
Thank you.
<div ng-app="myApp" ng-controller="customersCtrl">
<select id="thaz" name="thaz" class="selectbox" onchange="onChange(this.value)">
<option ng-repeat="x in names" value="{{x.id}}">{{x.id}} - {{x.thnev}}</option>
</select>
<div id="list"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("al_list_th.php")
.then(function (response) {$scope.names = response.data.records;});
});
function onChange(value) {
document.getElementById("list").innerHTML = "{{names[" + value + "].thnev}}";
}
</script>
We can use the built-ins that AngularJS has available to simplify the problem.
In this case, we can use ngModel to bind the value of the select into a variable that we can use in our template. Let's call this variable selectVal.
Then, we can write {{names[selectVal].thnev}} directly inside of the div that we want this output to live in.
I've put together this example to show the changes:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.selectVal = "default";
$scope.names = [{id: 0, thnev: 5}, {id: 1, thnev: 6} ];
//$http.get("al_list_th.php")
//.then(function (response) {$scope.names = response.data.records;});
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<select id="thaz" name="thaz" class="selectbox" ng-model="selectVal">
<option value="default">None</option>
<option ng-repeat="x in names" value="{{x.id}}">{{x.id}} - {{x.thnev}}</option>
</select>
<div id="list">
{{names[selectVal].thnev}}
</div>
</div>
Note: In my code I added an extra option so that there would be a default as opposed to a blank initial dropdown. You don't have to do this -- the code will work the same without it.

How To pass data from angularjs to javascript

How to pass data from angularjs to javascript
<input type="hidden" ng-model="data.value" id="MyData">
<script>
var MyData = GetEelementById(MyData).value;
</script>
i cant make it work .. , what is the correct way ?
The above piece of code is just part of VIEW only.
You need to go through basic tutorials of AngularJs and understand how views and controllers work.
To be specific, You can access the data (you expecting) in the controller of the view.
Like:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="data.value" id="MyData">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data={
value:"Deepak"
}
});
</script>
Edit as per the discussion in comments on answer
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data={
value:"Deepak"
}
// $scope.data.value is the initial value for the model and view is rendered with this value intially.
//You can also change this value with javascript to reflect in the view as well
//Your post request comes here
// **$scope.data.value reflects the updated Value of Input Box**
});
</script>

Accessing and Displaying JSON Object with AngularJS

I'm trying to access an object in JSON with AngularJS, and display the values. I have done this when I create an array in JSON but this time I want to show an example with an object. This is my code:
My JSON File
{ "user": {
"Name":"Ben",
"City":"New York"}}
My angular app
var app = angular.module('myApp', []);
app.controller('jsonObjectExample', function($scope, $http) {
$http.get("jsonobject.json").then(function (response) {
$scope.myData = response.data.user;
});
});
My HTML
<body>
<div ng-app="myApp" ng-controller="jsonObjectExample">
<ul>
<li ng-repeat="x in myData">
{{ x.Name + ', ' + x.City }}
</li>
</ul>
</div>
</body>
Here is a link to these files on plunker: https://plnkr.co/edit/uBRf99AjYH9zX0WuHsW3?p=preview
Can someone explain where I'm going wrong? Thanks.
remove the ng-repeat. myData is object, not an array so no need to use the ng-repeat
<body>
<div ng-app="myApp" ng-controller="jsonObjectExample">
<ul>
<li >
{{ myData.Name + ', ' + myData.City }}
</li>
</ul>
</div>
</body>
Demo
If you are using ng-repeat make sure the json which you are parsing should give some array value.
you can correct your json like:
{ "user": [{
"Name":"Ben",
"City":"New York"}]}
Other codes are working fine. Please check this

ng-init with condition statements

I have a Angular JS Application,
<div class="col-lg-12" ng-init="getTableData('{{URL::route('get_repair_category')}}')">
When Page loading the getTableData will execute, but I want to check a variable $rootScope.Dealer and switch the function name of initialization.
Eg : if $rootScope.Dealer value present I wanto execute the function named getDealerData
And If the value is not set need to execute the getTableData function.
How can I make this in anglar js template.
I just tried the ng-if, but its not working...
You can use simple Javascript syntax in ng-init directive like this:
<div class="col-lg-12" ng-init="Dealer ? getDealerData('{{URL::route('get_repair_category')}}') : getTableData('{{URL::route('get_repair_category')}}')">
Here is a plnkr for you (I've changed backend route generation to text):
https://plnkr.co/edit/CJOMT0g50BCWa3j02rcS?p=preview
Try this
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $rootScope) {
$rootScope.dealer = ["a", "b", "c"];
$scope.getTableData = function(x) {
return x;
}
$scope.getDelearData = function() {
return $rootScope.dealer;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-init="data = getDelearData() || getTableData('table data')">
{{data}}
</div>
</div>

AngularJS custom filter called 2 times

I'm trying out Angular custom filter example from: https://scotch.io/tutorials/building-custom-angularjs-filters#filters-that-actually-filter which in my version looks like:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="demo" >
<div>
<p><strong>Original:</strong></p>
<ul class="list">
<li ng-repeat="x in example1">{{ x.name }}</li>
</ul>
<p><strong>Static Language Filter:</strong></p>
<ul class="list">
<li ng-repeat="x in example1 | staticLanguage">{{x.name }}</li>
</ul>
</div>
</div>
<script>
var app = angular.module('myApp', []);
var counter=0;
app.controller('demo', function($scope){
$scope.example1 = [
{name: 'C#', type : 'static'},
{name: 'PHP', type : 'dynamic'},
{name: 'Go', type : 'static'},
{name: 'JavaScript', type: 'dynamic'},
{name: 'Rust', type: 'static'}
];
});
// Setup the filter
app.filter('staticLanguage', function() { // Create the return function and set the required parameter name to **input**
return function(input) {
counter+=1;
console.log(counter);
var out = [];
// Using the angular.forEach method, go through the array of data and perform the operation of figuring out if the language is statically or dynamically typed.
angular.forEach(input, function(input) {
if (input.type === 'static') {
out.push(input);
}
});
return out;
};
});
</script>
</body>
</html>
It seems from console.log that for some reason custom filter function staticLanguage is called two times but from the code itself it is called only one time: ng-repeat="x in example1 | staticLanguage"
Anyone has any idea why?
P.S I've yet to figure out what does "dirty-checking" has to do with my question...
if I remove counter variable and just put some console.log("text") in it's place staticLanguage function is still called two times
As far as I am aware this is due to AngularJS dirty-checking and has been asnwered elsewhere here. This is normal, have a read of the link.
This is normal, angularjs uses a 'dirty-check' approach, so it needs to call all the filters to see if any changes exist. After this it detects that you have a change on one variable (the one that you typed) and then it re-executes all filters again to detect if it has other changes.
See the first answer of this question
How does data binding work in AngularJS?
Well, I don't know if this will serve to you , but here's a snippet working that could be a possible solution for you:
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope) {
$scope.languages = [
{
"name":"C#",
"type":"static"
},
{
"name":"PHP",
"type":"dynamic"
},
{
"name":"Go",
"type":"static"
},
{
"name":"JavaScript",
"type":"dynamic"
},
{
"name":"Rust",
"type":"static"
}
];
$scope.static_languages = $scope.languages.filter(x => x.type == 'static');
$scope.dynamic_languages = $scope.languages.filter(x => x.type == 'dynamic');
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js">
</script>
</head>
<body ng-controller="mainCtrl">
<div>
<p><strong>All languages:</strong></p>
<ul class="list">
<li ng-bind="language.name" ng-repeat="language in languages"></li>
</ul>
<p><strong>Static Languages Filter:</strong></p>
<ul class="list">
<li ng-bind="language.name" ng-repeat="language in static_languages"></li>
</ul>
<p><strong>Dynamic Languages Filter:</strong></p>
<ul class="list">
<li ng-bind="language.name" ng-repeat="language in dynamic_languages"></li>
</ul>
</div>
</body>
</html>

Categories

Resources