Can someone explain to me why this doesn't loop?
If I pre napIncident it gives null.
My code
<tr ng-repeat="napIncident in vm.NapIncidents">
<pre>{{vm.NapIncidents | json}}</pre>
<td>
{{napIncident.Incident}}
</td>
Pre output
[
{
"NapIncident": {
"Incident": "Zahlunsverbindungen ändern",
"IncidentID": "0002724285",
"NapID": "4214",
"NapStatus": "erfasst",
"Username": "silvat",
"NumberOfApprovers": "2",
"RecordDate": "12-12-2018",
"CheckerInformationList": [
{
"CheckerInformation": {
"Checker": "silvat",
"Date": "21-09-2018",
"TimeOfDay": "12:12:36",
"CheckerInfo": "Something",
"CheckerInfoText": "Something else"
}
}
],
"Alterations": [
{
"Alteration": {
"Field": "IBAN",
"OldValue": "DE12345",
"NewValue": "DE54321"
}
}
]
}
}
]
you have to access to your item . In your case is napIncident. Check your html part you will find ng repeat "NapIncident in vm.NapIncidents" .
To access to the details {{NapIncident.NapIncident.Incident}}
When using ng-repeat you map each item to a temporary variable, and when you have an array of named literals i.e array of NapIncident: {...} you must refer to NapIncident as a property :
<tr ng-repeat="item in vm.NapIncidents">
<td>
{{ item.NapIncident.Incident }}
</td>
<td>
{{ item.NapIncident.IncidentID }}
</td>
</tr>
and so on.
Related
Suppose I have a local file called "contacts.json" . I want to insert it in react component and create a table . I'll be so glad if anybody can help me .Thanks .
{
"contacts": [
{
"id": 1,
"firstName": "hamid",
"lastName": "mohamadi",
"contactType": "Friend",
"birthDate": "2010.10.10",
"phoneNumber": [
"09011019011",
"09120658719"
],
"email": [
"mohammadi842#gmail.com",
"h_mohammadi842#yahoo.com"
]
}
}
You can you use JSON.parse():
const obj = JSON.parse();
render(<MyComponent data={obj} />)
Its already are a valid js object. I did an example of an html table with this data:
https://codesandbox.io/s/pedantic-heyrovsky-w8d51
you can choose to iterate like a did or specify which attribute you would like to show.
<table border="1">
<tbody>
{data.contacts.map(contact => {
return Object.keys(contact).map((item, index) => (
<tr key={index}>
<td>{contact[item]}</td>
</tr>
));
})}
</tbody>
</table>
First you need to do is const obj = JSON.parse(value)
console.log('obj'+obj)
after you need to do is in return( {this.props.obj.map((number) => <p key={number}>{number}</p> )})
I have an object as follows:
scope.items = {
"poor-John-1": {
"_id": "poor-John-1",
"name": "poor-John-1",
"sName": "room-poor-John-2"
},
"poor-John-2": {
"_id": "poor-John-2",
"name": "poor-John-2",
"sName": "room-poor-John-2"
}
}
I have rendered the object in the following way
<tr ng-repeat="item in items | orderObjectBy: '_id' track by item._id" ng-class="getStyle(item, next_item)"><td>{{item.sName}}</td></tr>
What I want to do is, pass, the current and next_item to the getStyle function, since its not an array, $index is not pointing the value. I have data in object.
Maybe you can do this with
$scope.keys = Object.keys($scope.items) // put keys on scope
// get next from keys
<tr ng-repeat="(key, item) in items track by item._id" ng-class="getStyle(item, items[keys[$index +1]])">
<td>{{key}}</td>
<td>{{item.name}}</td>
<td>next : {{items[keys[$index +1]]}}</td>
</tr>
Look this, tell me if it's what you want https://plnkr.co/edit/GCNmWb9Qv2mntqTnGsX1?p=preview
I have a json file, I would like to place '?' insert the numbers 1 ... 10
{
"Daty": [{
"Data": "2016-02-13",
"L1": [],
"L2": [],
"L3": [],
"L4": [],
"L5": [],
"L6": [],
"L7": [],
"L8": [],
"L9": [],
"L10": [],
"Suma": 0
} .........
}]
}
In html:
<tr ng-repeat="x in Daty" > <td><B>{{x.Data}}</B></td><td ng-repeat="y in [1,2,3,4,5,6,7,8,9,10]">{{x.L??????[0]}}</td><td>{{x.L???????[0]}}</td><td>{{x.L??????[0]}}</td>
I would like to place '?' insert the numbers 1 ... 10
You can try to access the field with [] notation like this:
<tr ng-repeat="x in Daty" > <td><B>{{x.Data}}</B></td><td ng-repeat="y in [1,2,3,4,5,6,7,8,9,10]">{{x['L'+y][0]}}</td><td>{{x['L'+y][0]}}</td><td>{{x['L'+y][0]}}</td>
Simply use below concatenation, which accessing object from array.
<tr ng-repeat="x in Daty">
<td><B>{{x.Data}}</B></td>
<td ng-repeat="y in [1,2,3,4,5,6,7,8,9,10]">{{x['L'+ y][0]}}</td>
</tr>
Nervous to ask this question.. HATE getting downvoted.. but it is what it is, I've searched and can't find the solution.
What I ended up doing is adding a loop that goes through my searchResults and reassigns the value for the column after the service returns inside the success block (PSEUDO CODE HERE, I can't copy and paste my actual code, there is an airgap):
var myNumberMap = {
1: "Number ONE!!",
2: "Number TWO!!",
3: "Number THREE!!!"
}
$scope.getSearchResults = function() {
$q.all({
resultSet : searchService.getSearchResults()
}).then(function(resultData) {
searchResults = resultData.resultSet;
for(var i = 0; i < searchResults.length; i++) {
searchResults[i].number = myNumberMap[searchResults[i].number];
}
}
}
I was really hoping there was some slick way I could just assign the data result value inside the grid config to be the value in the map?
Something like:
$scope.myCoolGridConfig = NgGridConfig.getConfig(
NgGridConfig.getDefaultConfig(), {
data: 'searchModel.searchResults.list',
columnDefs: [
field: 'number',
displayName: 'Number',
value: myNumberMap[searchModel.searchResults.list.number]
]
}
)
There are a few methods that you could take here:
Create a custom filter that you apply to your ng-repeat to transform the values based on your map.
Store your value map in your angular controller and bind the mapped value to the DOM.
// Controller
$scope.myMap = {
1 : "String One",
2 : "String Two",
3 : "String Three"
}
// something.html
<div ng-repeat='num in numList'>
{{myMap[num]}}
</div>
If I interpenetrated the question correctly your looking for something along these lines.
myMap = {
1 : "String One",
2 : "String Two",
3 : "String Three"
};
If the col number is 1 display String One instead of one in the table
Use myMap and look for the prop of col in it to pull the string value
<table>
<tr ng-repeat="col in tempCols">
<td>{{col}}</td>
<td>{{myMap[col]}}</td>
</tr>
</table>
If you need to do it towards an object that has no defining index such as the object below.
$scope.objectData = [{
name: "test1",
},
{
name: "test1",
},
{
name: "test1",
},
{
name: "test1",
},
{
name: "test1",
},
]
You can track it by $index + 1
<table>
<tr>
<td> Column Converted</td>
<td> Object name value</td>
<tr ng-repeat="col in objectData">
<td>{{myMap[$index + 1]}}</td>
<td>{{col.name}}</td>
</tr>
</table>
Heres a plunker for a better visual
I have a listing using ng-repeat with a search for two available parameters (month and state).
If I make a search, I get a ng-repeat error found duplicates.
Can not understand why if in both cases the JSON data have the same structure (just the values will change).
I have these ng-repeats: item in data and nested inside : uniqueitem in item
I've tried to use track by $index but it loops for every single character, and for item.index or item.label1 but triggers the found duplicates erros again.
Here is my loop using ng-repeat.
<tbody ng-repeat="item in data">
<tr ng-repeat="uniqueitem in item">
<td>
{{uniqueitem.label1 | number}}
</td>
<td>
{{uniqueitem.label2 | number}}
</td>
My JSON has this structure :
[
{
"index": 0,
"label1": "Initials",
"label2": "2",
"label3": "18",
"label4": "12",
"label5": 150,
"label6": "30",
"label7": 60,
"label5A": "v",
"label7A": "r"
},
{
"index": 1,
"label1": "Others",
"label2": 5485,
"label3": 27289,
"label4": 37776,
"label5": 72.23,
"label6": 91949,
"label7": 29.67,
"label5A": "r",
"label7A": "r"
},
....
]
Just works !
Inside
$http.post(ApiEndpoint.url,$scope.formData).success(function(data) {
Instead of this line :
$scope.data = JSON.stringify(data);
I add these lines :
var acp = {};
acp.resultdata = [ data ];
$scope.data = acp.resultdata;
I will replicate in a Plunkr, can not say why JSON.stringify causes this behavior.