We Keep Coding

How can I populate the dropdown values for each row within a data table?

The following is my HTML.
<tr>
<th>
Test Data
</th>
<th>
Test Data Options
</th>
</tr>
<tr>
<td>
<ng-container>
{{data.testData}}
</ng-container>
</td>
<td class="text-base font-normal">
<ng-container>
<p-dropdown [options]="dropdownOptions" placeholder="Select Test Data"></p-dropdown>
</ng-container>
</td>
</tr>
This is my JSON file.
“data”: [
{
“testData”: “Test Data A”,
“testDataOptions”: [
{
“testDataOptionValue”: “Test Data A1 Option”,
“testDataOptionLabel”: “Test Data A1”
},
{
“testDataOptionValue”: “Test Data A2 Option”,
“testDataOptionLabel”: “Test Data A2”
}
],
},
{
“testData”: “Test Data B”,
“testDataOptions”: [
{
“testDataOptionValue”: “Test Data B1 Option”,
“testDataOptionLabel”: “Test Data B1”
},
{
“testDataOptionValue”: “Test Data B2 Option”,
“testDataOptionLabel”: “Test Data B2”
}
],
}
How could I populate the dropdown values in each row in the data table according to their indexes?
For example
The Test Data A row dropdown values should be:
Test Data A1, Test Data A2
The Test Data B row dropdown values should be:
Test Data B1, Test Data B2

I guess you're missing a *ngFor in the code snippet you sent:
<tr *ngFor="let data of json.data">
<td>{{ data.testData }}</td>
<td>
<p-dropdown [options]="data.testDataOptions" optionLabel="testDataOptionLabel" optionValue="testDataOptionValue"></p-dropdown>
</td>
</tr>
Edit: binding the selected value
A first option, although it might feel hacky depending on context, is to bind to the data object you already have. For instance:
<p-dropdown [options]="data.testDataOptions" optionLabel="testDataOptionLabel" optionValue="testDataOptionValue" [(ngModel)]="data.selectedValue"></p-dropdown>
If that feels weird or you just don't want to mess with that data, then you'll need to store it in a separate variable, which can be an array or a key/value structure. Then you just bind each item to the corresponding entry in the the data structure.

Allan gave you the correct answer, I'm just going to expand it a bit. Since your dropdown options list might be a large one, please consider using trackBy as well. It is not mandatory and it does not always prove much more performant, but overall it should help with performance. You can do it like so:
<tr *ngFor="let data of json.data; trackBy: trackByMethod">
<td>{{ data.testData }}</td>
<td>
<p-dropdown [options]="data.testDataOptions" optionLabel="testDataOptionLabel" optionValue="testDataOptionValue"></p-dropdown>
</td>
</tr>
While in your .ts file (make sure you add some IDs to your items as well - or use other unique identifiers):
trackByMethod = (index: number, item: any): string => item.id;
You can read more about trackBy here: https://dev.to/rfornal/angular-is-trackby-necessary-with-ngfor-594e

making dynamic condition in typescript

I have a dynamic array that represents columns in a table, and I have an array of rows in the table. I get the arrays as input in my angular 4 components and I don't know anything in the columns before I get them (should work on multiple types of variables).
Each column has a variable that says if it is mandatory or not and according to this I build a condition string that I want to run before I insert a new row to the array of rows or change an existing one.
I'm creating the condition in the ngInit, and after the creation it looks something like this:
"(r.id == null) || (r.name == '')" and so on (there could be && too)
I'm trying to bind the condition to the disabled attribute of a button, but I can't seem to convert it to a real.
How can I convert it to a condition so I could execute it and return true/ false accordingly?
I've already tried doing [disabled]="[conditionVar]", and also tried using.
${condition},
but those didn't work
my code looks something like this:
myComponent.ts:
export class Column {
title: string;
fieldName:string;
mandatory: boolean;
}
#Component({
selector: 'myComponent',
templateUrl: './myComponent.component.html',
styleUrls: ['./myComponent.component.css']
})
export class MyComponentimplements OnInit {
#Input() columns:Column[];
#Input() rows;
conditionString = "";
constructor() { }
ngOnInit() {
for (let c of columns.filter(d=>d.mandatory)) {
this.conditionString += "(r." + c['fieldName'] + " == null) || "; // 'r' is the name of the variable that i want to run the condition on
}
this.conditionString = this.conditionString.substr(0, this.conditionString.length - 4); // to remove the last ||
}
}
myComponent.html:
<table>
...
<tbody>
<tr *ngFor="let r of rows">
<td *ngFor="let c of columns">
<input [(ngModel)]="r.[c.fieldName]">
</td>
<td *ngFor="let c of columns">
<button [disabled]="here I want to bind my condition">save this row</button>
</td>
</tr>
</tbody>
</table>
(the user should edit the rows and if he want he can save the changes)
every thing works but the binding of the condition

unable to assign a value in ngFor loop: cannot assign to readonly property of object

temp.html code
<div>
<div>{{status}}</div>
</div>
<table>
<tr *ngFor="let d of list">
<td>{{d.desc}}</td>
</tr>
</table>
d.desc has value :submitted,pending,partial
I want if d.desc is pending, status should change to pending.I don't want loop or filter in ts file
ts file has variable
public status:string="ok";
public list:any=[{"desc":"submitted"},{"desc":"pending"},{"desc":"partial"}]
I am trying but got cannot assign to readonly property of object

You can't achieve directly! But still you can use function and call that function from html by passing the status.
I have created a stackblitz for that! Take a look at it!
https://stackblitz.com/edit/angular-a7bxve
In html...
<table>
<tr *ngFor="let d of list">
<td>{{showStatus(d.desc)}}</td>
</tr>
</table>
And in ts file...
showStatus(status) {
this.status = status;
}

How to process a json and return a new json

What I'm trying to make is an angular app that reads in a json file and displays them, and allows users to edit the json file using html controls. Then, the user can create a new json object based on their selections and display it.
Here is a picture to help describe what I'm trying to do:
So, the user sees this, they make certain selections, e.g. lock them or delete them, then they hit create, and a new json file is returned based on which objects they have chosen to lock or delete.
At the moment I just have a standard angular app which gets and displays the json:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php").then(function (response) {
$scope.myData = response.data.records;
});
$scope.createJson = function(){
// Create new json file
};
});
The body of my html/my angular app looks like this at the moment:
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in myData">
<td>{{ x.Name }}</td>
<td>{{ x.City }}</td>
<td>{{ x.Country }}</td>
<td><input type="checkbox" name="lock" value="{{x.Name}}"></td>
<td><input type="checkbox" name="delete" value="{{x.Name}}"></td>
</tr>
</table>
<button ng-click="createJson()">Create</button>
</div>
Baiscally, I'm not sure if my approach is correct at the moment, and if it is, I don't really know what my next step is.
P.S. this is just test data I am using for the sake of learning/testing, it is not my data, I got it from: http://www.w3schools.com/angular/customers.php

You can try
JSON.stringify($scope.myData)
or
angular.toJson($scope.myData)
this will give you string representation of your data object. The rest is up to you, you may assign it to textarea, post it back to server (in this case, you most likely won't even need to encode it before) etc.

You should use
<td><input type="checkbox" name="lock" value="{{x.Name}}"></td>
<td><input type="checkbox" name="delete" value="{{x.Name}}"></td>
as
<td><input type="checkbox" name="lock" ng-model="x.Name"></td>
<td><input type="checkbox" name="delete" ng-model="x.Name"></td>
(Actually I didn't understand why you use string in checkbox. It should be boolean value).
By this way any change will change your $scope.myData.
On create you should take info from user and create a new JsonObject like
var newObject = {
Name: 'Name Surname',
City: 'City',
Country: 'Country'
}
And add this to your myData with;
$scope.myData.push(newObject);

I ended up creating an appropriate solution by simply creating a new and empty JSON object:
var newJson = [];
and populating it by looping through my original one and using array.push() to add the selected entries:
for (var person in $scope.myData){
if($scope.myData[person].Delete === false || $scope.myData[person].Lock === true){
newJson.push($scope.myData[person])
}
}

AngularJs. Problems with ng-repeat

I'm having two tables witch renders data trough angularJs, coming from 2 c#-methods.
The tables are structured almost exactly the same. The first one below is used as I searchfield and the other one is used basiclly to render names.
My problem is that the first one works perfect, but the other one does not. And I don't see the problem. Any help would be appreciated. // Thanks!
Here are my two tables. (the first one is working)
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>
<div ng-app="searchApp">
<div ng-controller="searchController">
#*first table works*#
<span style="color: white">Search:</span> <input data-ng-click="myFunction()" ng-model="searchText">
<table style="color: white" id="searchTextResults">
<tr><th>Name</th></tr>
<tr ng-show="!!searchText.length != 0" ng-repeat="friend in friends | filter:searchText">
<td data-id="{{friend.id}}" data-ng-click="SendFriendRequest(friend.id)">{{friend.id.replace("RavenUsers/","")}}</td>
</tr>
</table>
#*Does not work*#
<input type="button" value="Get friends requests" data-ng-click="GetFriendRequests()">
<table style="color: white">
<tr><th>Friend requests</th></tr>
<tr ng-repeat="friendRequest in friendRequests">
<td data-id="{{friendRequest.UserWhoWantsToAddYou}}" data-ng-click="acceptUserRequest(friendRequest.UserWhoWantsToAddYou)">{{friendRequest.UserWhoWantsToAddYou}}</td>
</tr>
</table>
</div>
</div>
HERE IS MY SCRIPT
<script>
var App = angular.module('searchApp', []);
App.controller('searchController', function ($scope, $http) {
//Get all users to the seachFunction
$scope.myFunction = function () {
var result = $http.get("/Home/GetAllUsersExeptCurrentUser");
result.success(function (data) {
$scope.friends = data;
});
};
//Get friendRequests from other users
$scope.GetFriendRequests = function () {
var result = $http.get("/Home/GetFriendRequests");
result.success(function (data) {
$scope.friendRequests = data;
});
};
});
</script>
The first script-function called myFunction works perfect and the data coming from my c#-method looks like this:
[{"id":"RavenUsers/One"},{"id":"RavenUsers/Two"},{"id":"RavenUsers/Three"}]
The second script-function called GetFriendRequests does not work, and as far as I can see there is no difference between this data passed into here than the data passed into myFunction:
[{"userWhoWantsToAddYou":"RavenUsers/Ten"},{"userWhoWantsToAddYou":"RavenUsers/Eleven"}]

I'd suggest you use then instead of success because $http returns a promise.
If your table doesn't "render" then put a breakpoint inside success function, console.log() the data or check friendRequests inside your HTML template, e.g. using <div>{{ friendRequests | json }}</div>, to ensure you actually got data from response.
Now you do not handle exceptions at all.
Example:
result.then(function(data) {
console.log('got data')
},function(error) {
console.log('oh noes :( !');
});
Related plunker here http://plnkr.co/edit/KzY8A3

It would be helpful if you either (a) provided a plunker to your code or (b) provided the error message.
ng-repeat requires a uniquificator on each item in the repeat, which defaults to item.id. If you don't have an id field on the item, you'll need to tell angular what field to use.
https://docs.angularjs.org/api/ng/directive/ngRepeat
So I'd suggest changing
<tr ng-repeat="friendRequest in friendRequests">
to
<tr ng-repeat="friendRequest in friendRequests track by userWhoWantsToAddYou">
and see if that works.