I am working on angular-meteor.
I have a collection called grace in the following json format
grace: {
"mail-template": {
"new-status": {
"in-progress": {
"name": "demo1",
"description": "this is demo"
},
"pending": {
"name": "demo2",
"description": "this is another demo"
}
}
}
}
Here I am taking in-progress and pending as keys, name and description as values.
I want to list this inside my html using ng-repeat. But I didn't get any output and no errors found.
The code I used is
ng-repeat="(key,value) in demoCtrl.formSettings.grace['mail-template']['new-status']"
demoCtrl is my controller name and formSettings is name of helpers.
Can somebody clear my code?
I made this JSFiddle. It seems to work just fine. Make sure that you've got the correct data in the demoCtrl.formSettings.
JS
$scope.obj = {
grace: {
"mail-template": {
"new-status": {
"in-progress": {
"name": "demo1",
"description": "this is demo"
},
"pending": {
"name": "demo2",
"description": "this is another demo"
}
}
}
}
};
HTML
<div ng-repeat="(key,value) in obj.grace['mail-template']['new-status']">
{{key}}: {{value}}
</div>
Related
im having problem displaying this 2 loops in map. im using this map for the display but cant seem to display both of the loop.
Can i display them inside one loop only? like loop inside loop? Need help here tia
Choices Data
{testQuestionData.map(({choices}) => (
<div>{choices.map((tchoices)=>
<div>
{tchoices.testChoices}
</div>
)}
</div>
))}
Question Data
{testQuestionData.map(td=>(
<div className="col-md-12">
{td.question.testQuestion}
<label>Choices: {td.choicesDisplay}</label>
</div>
))}
{
"question": {
"testQuestion": "Earth is flat?",
},
"choices": [
{
"testChoices": "true",
"
}
{
"testChoices": "false",
"
}
]
}
You have badly formatted data. You have a random " after the test choices and no , between the choices.
Your data should look like this
{
"question": {
"testQuestion": "Earth is flat?",
},
"choices": [
{
"testChoices": "true",
},
{
"testChoices": "false",
}
]
}
I am trying to get key and value from the below json but do not know how can i get it dynamically. for Angular 5 project.
Component:- here is the method which i want to use in my component.
public AnalyticsRes(_AnalyticsResponse) {
let ButtonAttribute = _AnalyticsResponse.ButtonAttribute.split(',');
let Button2Attribute = _AnalyticsResponse.Button2Attribute.split(',');
let key1 = ButtonAttribute['know-more1'];
let key2 = ButtonAttribute['know-more2'];
}
I am not sure if syntax is correct kind of newbie in angular
and here is the HTML CODE:-
<div class="grid-i" *ngIf="response.Button1.trim() || response.Button2.trim()">
<a class="xyz" *ngIf="response.Button1.trim()" (click)="ManagaeNavigation(response.ButtonLink);defaultClick();"
href="{{response.ButtonLink}}" [analytics-promo]='response.BtnAnalytic ? response.BtnAnalytic : null'>
<span class="buttonClass">{{response.ButtonText}}</span>
<span class="arrowIcon"></span>
</a>
<a class="xyz" *ngIf="response.Button2.trim()" href="{{response.Button2Link}}"
[attr.data-analytics-promo]='response.Btn2Analytic ? response.Btn2Analytic : null'>
<span class="buttonClass">{{response.Button2}}</span>
<span class="arrowIcon"></span>
</a>
</div>
here is my json :-
{
"Items": [
{
"Title": "Get it:",
"field_background_color": "is-bg-color-blue",
"ButtonLink": "/myUrl",
"ButtonText": "Visit Site",
"ButtonAnalytic": "link-analytics:first, link-analytics:second",
"ButtonTwoLink": "http://dummy.com",
"ButtonTwoText": "Know More",
"Button2Analytic": "know-more:first, know-more:second",
**"ButtonAttribute": "link-analytics:first, link-analytics:second",
"Button2Attribute": "know-more:first, know-more:second",**
"ButtonLinkAbsolute": "/abc",
"ButtonTwoLinkAbsolute": "http://dummy.com",
"Students": [
{
"title": "No",
"description": "Visit a Outlet dummy ",
},
{
"title": "No",
"description": "FREE free dummy.",
},
{
"title": "No",
"description": "Bring home",
}
]
}
],
"Status": "OK",
"StatusMessage": "SUCCESS"
}
Please help me to get key and value from :-
"ButtonAttribute": "link-analytics:first, link-analytics:second",
"Button2Attribute": "know-more:first, know-more:second",
as there are comma separated values from json and i have to get these into array in my component method, and want to use them in my html ?? here another challenge is that how can i bind multiple attribute to single lement in angular 6?? code plunkar will be more helpful. Thank You in advance.
I have TypeScript model like this:
export class Product {
id:number;
name:string;
brand:Brand;
price:number;
shippingPrice:number;
description:string;
photoName:string;
productType:ProductType;
purchaseCounter:number;
rating:number;
volume:string;
ingredients:string;
}
and json file which populate this model:
{
"id": 1,
"name": "xxx",
"description": "xxx",
"price": 12.34,
"purchaseCounter": 12,
"photoName": "xx",
"shippingPrice": 12.99,
"volume": "xxx",
"rating": 4.7,
"ingredients": "A,B,C",
"brand": {
"id": 1,
"name": "xx"
},
"productType": {
"id": 3,
"name": "xxx"
}
}
Now in my TypeScript component I have function like this :
public getIngredients():String [] {
return this.product.ingredients.split(",");
}
Everytime when I am invoking this function I have error:
"TypeError: Cannot read property 'split' of undefined"
but when i change body of function to sth like this:
public getIngredients():String [] {
if (this.product.ingredients == null) {
return null;
}
return this.product.ingredients.split(",");
}
then eveyrthing is ok and split function work properly. Have You got any idea why checking if ingredients is not null fix it? I have to admin that I just start my adventure with js and ts. Thanks
UPDATE
I instantiating this Product variable here:
export class ProductOverviewComponent implements OnInit {
private product:Product;
private errorMessage:string;
constructor(private productService:ProductService) {
this.product = new Product();
}
ngOnInit():void {
this.productService.getProduct()
.subscribe(
product => this.product = product,
error => this.errorMessage = <any>error);
}
}
For now I hit to the json file but in future I will hit to server. Another think is that I pass product to another comopnent using #Input().
And this is how i call getIngredients function
<div class="col-md-12">
<div class="property-text">
<!--<h3 class="h3style">Ingredients</h3>-->
<ul>
<li *ngFor="let ingredient of getIngredients()">
{{ ingredient }}
</li>
</ul>
</div>
</div>
The TypeError that you get is a JavaScript error raised at runtime and has nothing to do with TypeScript. It happens because this.product.ingredients is undefined. Your "fix" works because undefined == null is true in JavaScript which results in an early return inside getIngredients(). If you used the === operator to compare against null your fix would no longer work.
However, the question is then why this.product.ingredients is undefined? It may be because the TypeScript this context is lost inside getIngredients(). From the code you have provided it is impossible to determine if that is the case but there is a nice write-up about the problem in the 'this' in TypeScript article on Github which might help you solve your problem. A simple first check could be to add console.log(this) inside getIngredients() to see what this really is.
I'm new to Angular and trying to learn. I am trying to find a way to bind some Quantities with their IDs. Here is my template:
"<div class='tableBorder'><label> <input ng-model='" + modelngQTY + "' type='number' name='{{value.DetailID}}' /> {{value.Text | lowercase}} </label> </div>"
The modelngQTY is:
modelngQTY = "selectedOptions[value.CustomID].Details[value.DetailID].QTY";
Unfortunately the object that gets generated with this code is:
{"36":{"Details":{"107":{"QTY":2323232},"108":{"QTY":232323}}}}
I want it to look like this:
{"36":{"Details":[{DetailID: "107", "QTY":2323232},{DetailID: "108","QTY":232323}]}}
Here is a side-by-side visual of the two. I want the one on the left:
The version on the right is terribly hard to loop through with ng-repeat. I have all the data obviously I just cant figure out how to write the model. I have tried {} and [], as well as a lot of different ngmodel versions. The best I could get was the version on the right.
I have already done a lot of googling and there are tons of resources on how to filter and play with ng-options for ng-repeat but I couldn't find hardly anything about INSERTING the data into the model in a good format.
What am I missing here?
A possible solution to this exists at http://plnkr.co/edit/9wMZAD?p=info.
These map functions
vm.endingStructure= _.map(vm.beginningStructure, function(object, value) {
var newStructure = {};
newStructure[value] = {
Details: _.map(object.Details, function(qtyObject, value) {
var arrayStructure = {
DetailID: value,
QTY:qtyObject.QTY
};
return arrayStructure;
})
};
return newStructure;
});
turns { "36": { "Details": { "107": { "QTY": 2323232 }, "108": { "QTY": 232323 } } } } into [ { "36": { "Details": [ { "DetailID": "107", "QTY": 2323232 }, { "DetailID": "108", "QTY": 232323 } ] } } ]
I am trying to get warnings for a certain address in my MongoDb, using a combination of Meteor and Angular.js
In my html file, I'm doing
<div ng-controller = "myController as myCtrl">
{{myCtrl.warnings}}
{{myCtrl.getWarnings("123 Test Street, TestCity, TestState")}}
</div>
in my app.js file:
Warnings = new Mongo.Collection("Warnings");
if (Meteor.isClient) {
var app = angular.module('ffprototype', [ 'angular-meteor' ]);
app.controller('myController', ['$window','$meteor', function($window, $meteor) {
this.warnings = $meteor.collection(Warnings);
this.getWarnings = function(findByAddress){
Warnings.find({address: findByAddress}).fetch();
}
}]);
}
my mongoDb collection:
{
"_id": "3ixgxEMZDWGtugxA7",
"address": "123 Test Street, TestCity, TestState",
"warning": "Warning 1"
}
{
"_id": "HZH5FvCD5driBYSJz",
"address": "123 Test Street, TestCity, TestState",
"warning": "Warning 2"
}
The output from the html webpage shows the entire Warnings collection (thanks to {{currentDispatch.warnings}}, but nothing gets displayed for {{currentDispatch.getWarnings("123 Test Street, TestCity, TestState")}}
You should use $meteor.object for this
this.getWarnings = function(findByAddress){
$meteor.object(Warnings, { address: findByAddress }, false); // passing false here to not update the collection from changes in the client
}
From angular-meteor docs, it appears that $meteor.object will soon be deprecated.
There is no need for $meteor.object anymore as we can use Mongo Collection’s findOne function, like so.
Old code:
$scope.party = $meteor.object(Parties, $stateParams.partyId);
New Code:
$scope.helpers({
party() {
return Parties.findOne($stateParams.partyId);
}
});
More detailed bind one tutorial.