Related
I have this problem I have to use a part of a json file because when the app calls an image it leans on the ID present in the json file
es.
<img (click) = "seeHeroDetails (hero)" mat-card-image src = "assets / images / heroes / {{hero.id}}. jpg">
But only that the page calls me all the json and not just the part that interests him and therefore does not call the image because he does not know which id to take, so how do I "cut" the rest of the json that I do not need?
this is the json
[
{
id: "1",
name: "Spiderman",
alter_ego: "Peter Parker",
likes: "106",
default: true,
},
{
id: "2",
name: "Superman",
alter_ego: "Clark Kent",
likes: "27",
default: true,
},
{
id: "3",
name: "Batman",
alter_ego: "Bruce Wayne",
likes: "98",
default: true,
},
{
id: "4",
name: "Wonder woman",
alter_ego: "Diana Prince",
likes: "78",
default: true,
},
{
id: "5",
name: "Iron man",
alter_ego: "Tony Stark",
likes: "65",
default: true,
},
I need this
[
{
id: "1",
name: "Spiderman",
alter_ego: "Peter Parker",
likes: "106",
default: true,
},
]
when i call the image.
Thanks for all the answers.
I do not totally understand what you mean.
But if you have the id, then all you need to do is just run a loop on the json array and match the id field.
Here,
const heroes = [{
id: "1",
name: "Spiderman",
alter_ego: "Peter Parker",
likes: "106",
default: true,
},
{
id: "2",
name: "Superman",
alter_ego: "Clark Kent",
likes: "27",
default: true,
},
{
id: "3",
name: "Batman",
alter_ego: "Bruce Wayne",
likes: "98",
default: true,
},
{
id: "4",
name: "Wonder woman",
alter_ego: "Diana Prince",
likes: "78",
default: true,
},
{
id: "5",
name: "Iron man",
alter_ego: "Tony Stark",
likes: "65",
default: true,
}
];
function seeHeroDetails(id) {
return heroes.find(hero => hero.id == id);
}
console.log(seeHeroDetails(1));
I have a json data, each object is referenced like this example:
[
{
$id: "1",
FirstName: "Student ",
LastName: "1",
Email: "student1#yahoo.com",
Class: {
$id: "2",
Libel: "Class 1",
LevelId: 1,
Students: [
{
$ref: "1"
},
{
$id: "3",
FirstName: "Student ",
LastName: "2",
Email: "student2#yahoo.com",
Class: {
$ref: "2"
},
Id: 2,
ObjectState: 0
},
{ $id: "5",
FirstName: "Student ",
LastName: "3",
Email: "student3#yahoo.com",
Class: {
$ref: "2"
},
}
Id: 3,
ObjectState: 0
},
Id: 1,
ObjectState: 0
} ...//other students
],
Id: 1,
ObjectState: 0
},
{
$ref: "4"
},
{
$ref: "12"
}
....
]
Each student has a class,and each class has a student,each object has a reference, so I have a problem in getting the data of students(like the lastName and FirstName,Email for each one) and display it in a table,I work with ASP.NET for creating REST Service and AngularJS for the client,
this is my code :
the controller:
.controller("etudCtrl", ["$scope", "$http",function ($scope, $http) {
$http({method: 'GET', url: 'http://localhost:50001/api/Students'})
.success(function (data) {
$scope.currentPageStores = data; // response data
console.log("success");
}
})
.error(function (data, status, headers, config) {
console.log("data error ...");
});
}
My HTML code:
<div ng-controller="etudCtrl">
<table ng-repeat="store in currentPageStores>
<td>{{store.LastName}}</td>
<td>{{store.FirstName}}</td>
<td>{{store.Email}}</td>
<td>{{store.Class.Libel}}</td>
</table>
</div>
What I get in my table as a result:
Resume of script execution:
Local
data: Array[9]
0: Object
1: Object
2: Object
3: Object
4: Object
5: Object
6: Object
7: Object
8: Object
length: 9 //I have 9 students in my base
__proto__: Array[0]
In the console I get the correct data for each student, but the problem I think with filtering Student data in my controller
any help is appreciated.
Thanks
UPdate:
I have used Include method to link Class entity to Student entity like this:
//StudentsController:
[Route("api/Students")]
public IEnumerable<Student> Get()
{
return _StudentService.GetStudentsWithClass().ToList();
}
//StudentService
public IQueryable<Student> GetStudentsWithClass()
{
return _repository.Queryable().Include(s => s.Class);
}
I have 9 Students,as a result for getting the list de Students I get only three of them,,the others were referenced by class!! as I have shown in the json structure,it didn't get the students in class object,the referenced ones
is there any filter to apply in controller to filter only the students
all json output:
[
{
$id: "1",
FirstName: "Student ",
LastName: "1",
Email: "student1#yahoo.com",
Class: {
$id: "2",
Libel: "Class 1",
Level: null,
LevelId: 1,
Students: [
{
$ref: "1"
},
{
$id: "3",
FirstName: "Student ",
LastName: "2",
Email: "student2#yahoo.com",
Class: {
$ref: "2"
},
ClassId: 1,
Image: {
$id: "4",
Url: "URL Image 2",
Alt: "Image 2",
SchoolHeads: [ ],
Teachers: [ ],
Feeds: [ ],
Students: [
{
$ref: "3"
}
],
Id: 2,
ObjectState: 0
},
ImageId: 2,
Marks: [ ],
Punishments: [ ],
Attendances: [ ],
ParentHasStudent: [ ],
StudentComments: [ ],
Id: 2,
ObjectState: 0
},
{
$id: "5",
FirstName: "Student ",
LastName: "3",
Email: "student3#yahoo.com",
Class: {
$ref: "2"
},
ClassId: 1,
Image: {
$id: "6",
Url: "URL Image 3",
Alt: "Image 3",
SchoolHeads: [ ],
Teachers: [ ],
Feeds: [ ],
Students: [
{
$ref: "5"
}
],
Id: 3,
ObjectState: 0
},
ImageId: 3,
Marks: [ ],
Punishments: [ ],
Attendances: [ ],
ParentHasStudent: [ ],
StudentComments: [ ],
Id: 3,
ObjectState: 0
},
{
$id: "7",
FirstName: "Student ",
LastName: "4",
Email: "student4#yahoo.com",
Class: {
$ref: "2"
},
ClassId: 1,
Image: {
$id: "8",
Url: "URL Image 4",
Alt: "Image 4",
SchoolHeads: [ ],
Teachers: [ ],
Feeds: [ ],
Students: [
{
$ref: "7"
}
],
Id: 4,
ObjectState: 0
},
ImageId: 4,
Marks: [ ],
Punishments: [ ],
Attendances: [ ],
ParentHasStudent: [ ],
StudentComments: [ ],
Id: 4,
ObjectState: 0
}
],
Schedules: [ ],
Exams: [ ],
Id: 1,
ObjectState: 0
},
ClassId: 1,
Image: {
$id: "9",
Url: "URL Image 1",
Alt: "Image 1",
SchoolHeads: [ ],
Teachers: [ ],
Feeds: [ ],
Students: [
{
$ref: "1"
}
],
Id: 1,
ObjectState: 0
},
ImageId: 1,
Marks: [ ],
Punishments: [ ],
Attendances: [ ],
ParentHasStudent: [ ],
StudentComments: [ ],
Id: 1,
ObjectState: 0
},
{
$ref: "3"
},
{
$ref: "5"
},
{
$ref: "7"
},
{
$id: "10",
FirstName: "Student ",
LastName: "5",
Email: "student5#yahoo.com",
Class: {
$id: "11",
Libel: "Class 2",
Level: null,
LevelId: 2,
Students: [
{
$ref: "10"
},
{
$id: "12",
FirstName: "Student ",
LastName: "6",
Email: "student6#yahoo.com",
Class: {
$ref: "11"
},
ClassId: 2,
Image: {
$id: "13",
Url: "URL Image 6",
Alt: "Image 6",
SchoolHeads: [ ],
Teachers: [ ],
Feeds: [ ],
Students: [
{
$ref: "12"
}
],
Id: 6,
ObjectState: 0
},
ImageId: 6,
Marks: [ ],
Punishments: [ ],
Attendances: [ ],
ParentHasStudent: [ ],
StudentComments: [ ],
Id: 6,
ObjectState: 0
},
{
$id: "14",
FirstName: "Student ",
LastName: "7",
Email: "student7#yahoo.com",
Class: {
$ref: "11"
},
ClassId: 2,
Image: {
$id: "15",
Url: "URL Image 7",
Alt: "Image 7",
SchoolHeads: [ ],
Teachers: [ ],
Feeds: [ ],
Students: [
{
$ref: "14"
}
],
Id: 7,
ObjectState: 0
},
ImageId: 7,
Marks: [ ],
Punishments: [ ],
Attendances: [ ],
ParentHasStudent: [ ],
StudentComments: [ ],
Id: 7,
ObjectState: 0
}
],
Schedules: [ ],
Exams: [ ],
Id: 2,
ObjectState: 0
},
ClassId: 2,
Image: {
$id: "16",
Url: "URL Image 5",
Alt: "Image 5",
SchoolHeads: [ ],
Teachers: [ ],
Feeds: [ ],
Students: [
{
$ref: "10"
}
],
Id: 5,
ObjectState: 0
},
ImageId: 5,
Marks: [ ],
Punishments: [ ],
Attendances: [ ],
ParentHasStudent: [ ],
StudentComments: [ ],
Id: 5,
ObjectState: 0
},
{
$ref: "12"
},
{
$ref: "14"
},
{
$id: "17",
FirstName: "Student ",
LastName: "8",
Email: "student8#yahoo.com",
Class: {
$id: "18",
Libel: "Class 3",
Level: null,
LevelId: 3,
Students: [
{
$ref: "17"
},
{
$id: "19",
FirstName: "sam",
LastName: "9",
Email: "student9#yahoo.com",
Class: {
$ref: "18"
},
ClassId: 3,
Image: {
$id: "20",
Url: "URL Image 8",
Alt: "Image 8",
SchoolHeads: [ ],
Teachers: [ ],
Feeds: [ ],
Students: [
{
$ref: "17"
},
{
$ref: "19"
}
],
Id: 8,
ObjectState: 0
},
ImageId: 8,
Marks: [ ],
Punishments: [ ],
Attendances: [ ],
ParentHasStudent: [ ],
StudentComments: [ ],
Id: 9,
ObjectState: 0
}
],
Schedules: [ ],
Exams: [ ],
Id: 3,
ObjectState: 0
},
ClassId: 3,
Image: {
$ref: "20"
},
ImageId: 8,
Marks: [ ],
Punishments: [ ],
Attendances: [ ],
ParentHasStudent: [ ],
StudentComments: [ ],
Id: 8,
ObjectState: 0
},
{
$ref: "19"
}
]
the configuration that I have used for the api (webApiconfig.cs)
var json = config.Formatters.JsonFormatter;
json.SerializerSettings.PreserveReferencesHandling = Newtonsoft.Json.PreserveReferencesHandling.Objects;
config.Formatters.Remove(config.Formatters.XmlFormatter);
<country-select country_id="US"></country-select>
<country-select country_id="user.country"></country-select>
<country-select country_id="{{user.country}}"></country-select>
angular.module('picmonic.directives.country-select', [])
.directive('countrySelect', [function () {
return {
restrict: 'E',
scope: {
country_id: '='
},
link: function(scope, element, attrs) {
scope.countries = [
{
id: "BD",
name: "Bangladesh"
},
{
id: "BE",
name: "Belgium"
},
{
id: "BF",
name: "Burkina Faso"
},
{
id: "BG",
name: "Bulgaria"
},
{
id: "BA",
name: "Bosnia and Herzegovina"
},
{
id: "BB",
name: "Barbados"
},
{
id: "WF",
name: "Wallis and Futuna"
},
{
id: "BL",
name: "Saint Bartelemey"
},
{
id: "BM",
name: "Bermuda"
},
{
id: "BN",
name: "Brunei Darussalam"
},
{
id: "BO",
name: "Bolivia"
},
{
id: "BH",
name: "Bahrain"
},
{
id: "BI",
name: "Burundi"
},
{
id: "BJ",
name: "Benin"
},
{
id: "BT",
name: "Bhutan"
},
{
id: "JM",
name: "Jamaica"
},
{
id: "BV",
name: "Bouvet Island"
},
{
id: "BW",
name: "Botswana"
},
{
id: "WS",
name: "Samoa"
},
{
id: "BR",
name: "Brazil"
},
{
id: "BS",
name: "Bahamas"
},
{
id: "JE",
name: "Jersey"
},
{
id: "BY",
name: "Belarus"
},
{
id: "O1",
name: "Other Country"
},
{
id: "LV",
name: "Latvia"
},
{
id: "RW",
name: "Rwanda"
},
{
id: "RS",
name: "Serbia"
},
{
id: "TL",
name: "Timor-Leste"
},
{
id: "RE",
name: "Reunion"
},
{
id: "LU",
name: "Luxembourg"
},
{
id: "TJ",
name: "Tajikistan"
},
{
id: "RO",
name: "Romania"
},
{
id: "PG",
name: "Papua New Guinea"
},
{
id: "GW",
name: "Guinea-Bissau"
},
{
id: "GU",
name: "Guam"
},
{
id: "GT",
name: "Guatemala"
},
{
id: "GS",
name: "South Georgia and the South Sandwich Islands"
},
{
id: "GR",
name: "Greece"
},
{
id: "GQ",
name: "Equatorial Guinea"
},
{
id: "GP",
name: "Guadeloupe"
},
{
id: "JP",
name: "Japan"
},
{
id: "GY",
name: "Guyana"
},
{
id: "GG",
name: "Guernsey"
},
{
id: "GF",
name: "French Guiana"
},
{
id: "GE",
name: "Georgia"
},
{
id: "GD",
name: "Grenada"
},
{
id: "GB",
name: "United Kingdom"
},
{
id: "GA",
name: "Gabon"
},
{
id: "SV",
name: "El Salvador"
},
{
id: "GN",
name: "Guinea"
},
{
id: "GM",
name: "Gambia"
},
{
id: "GL",
name: "Greenland"
},
{
id: "GI",
name: "Gibraltar"
},
{
id: "GH",
name: "Ghana"
},
{
id: "OM",
name: "Oman"
},
{
id: "TN",
name: "Tunisia"
},
{
id: "JO",
name: "Jordan"
},
{
id: "HR",
name: "Croatia"
},
{
id: "HT",
name: "Haiti"
},
{
id: "HU",
name: "Hungary"
},
{
id: "HK",
name: "Hong Kong"
},
{
id: "HN",
name: "Honduras"
},
{
id: "HM",
name: "Heard Island and McDonald Islands"
},
{
id: "VE",
name: "Venezuela"
},
{
id: "PR",
name: "Puerto Rico"
},
{
id: "PS",
name: "Palestinian Territory"
},
{
id: "PW",
name: "Palau"
},
{
id: "PT",
name: "Portugal"
},
{
id: "SJ",
name: "Svalbard and Jan Mayen"
},
{
id: "PY",
name: "Paraguay"
},
{
id: "IQ",
name: "Iraq"
},
{
id: "PA",
name: "Panama"
},
{
id: "PF",
name: "French Polynesia"
},
{
id: "BZ",
name: "Belize"
},
{
id: "PE",
name: "Peru"
},
{
id: "PK",
name: "Pakistan"
},
{
id: "PH",
name: "Philippines"
},
{
id: "PN",
name: "Pitcairn"
},
{
id: "TM",
name: "Turkmenistan"
},
{
id: "PL",
name: "Poland"
},
{
id: "PM",
name: "Saint Pierre and Miquelon"
},
{
id: "ZM",
name: "Zambia"
},
{
id: "EH",
name: "Western Sahara"
},
{
id: "RU",
name: "Russian Federation"
},
{
id: "EE",
name: "Estonia"
},
{
id: "EG",
name: "Egypt"
},
{
id: "TK",
name: "Tokelau"
},
{
id: "ZA",
name: "South Africa"
},
{
id: "EC",
name: "Ecuador"
},
{
id: "IT",
name: "Italy"
},
{
id: "VN",
name: "Vietnam"
},
{
id: "SB",
name: "Solomon Islands"
},
{
id: "EU",
name: "Europe"
},
{
id: "ET",
name: "Ethiopia"
},
{
id: "SO",
name: "Somalia"
},
{
id: "ZW",
name: "Zimbabwe"
},
{
id: "SA",
name: "Saudi Arabia"
},
{
id: "ES",
name: "Spain"
},
{
id: "ER",
name: "Eritrea"
},
{
id: "ME",
name: "Montenegro"
},
{
id: "MD",
name: "Moldova, Republic of"
},
{
id: "MG",
name: "Madagascar"
},
{
id: "MF",
name: "Saint Martin"
},
{
id: "MA",
name: "Morocco"
},
{
id: "MC",
name: "Monaco"
},
{
id: "UZ",
name: "Uzbekistan"
},
{
id: "MM",
name: "Myanmar"
},
{
id: "ML",
name: "Mali"
},
{
id: "MO",
name: "Macao"
},
{
id: "MN",
name: "Mongolia"
},
{
id: "MH",
name: "Marshall Islands"
},
{
id: "MK",
name: "Macedonia"
},
{
id: "MU",
name: "Mauritius"
},
{
id: "MT",
name: "Malta"
},
{
id: "MW",
name: "Malawi"
},
{
id: "MV",
name: "Maldives"
},
{
id: "MQ",
name: "Martinique"
},
{
id: "MP",
name: "Northern Mariana Islands"
},
{
id: "MS",
name: "Montserrat"
},
{
id: "MR",
name: "Mauritania"
},
{
id: "IM",
name: "Isle of Man"
},
{
id: "UG",
name: "Uganda"
},
{
id: "TZ",
name: "Tanzania, United Republic of"
},
{
id: "MY",
name: "Malaysia"
},
{
id: "MX",
name: "Mexico"
},
{
id: "IL",
name: "Israel"
},
{
id: "FR",
name: "France"
},
{
id: "IO",
name: "British Indian Ocean Territory"
},
{
id: "FX",
name: "France, Metropolitan"
},
{
id: "SH",
name: "Saint Helena"
},
{
id: "FI",
name: "Finland"
},
{
id: "FJ",
name: "Fiji"
},
{
id: "FK",
name: "Falkland Islands (Malvinas)"
},
{
id: "FM",
name: "Micronesia, Federated States of"
},
{
id: "FO",
name: "Faroe Islands"
},
{
id: "NI",
name: "Nicaragua"
},
{
id: "NL",
name: "Netherlands"
},
{
id: "NO",
name: "Norway"
},
{
id: "NA",
name: "Namibia"
},
{
id: "VU",
name: "Vanuatu"
},
{
id: "NC",
name: "New Caledonia"
},
{
id: "NE",
name: "Niger"
},
{
id: "NF",
name: "Norfolk Island"
},
{
id: "NG",
name: "Nigeria"
},
{
id: "NZ",
name: "New Zealand"
},
{
id: "NP",
name: "Nepal"
},
{
id: "NR",
name: "Nauru"
},
{
id: "NU",
name: "Niue"
},
{
id: "CK",
name: "Cook Islands"
},
{
id: "CI",
name: "Cote d'Ivoire"
},
{
id: "CH",
name: "Switzerland"
},
{
id: "CO",
name: "Colombia"
},
{
id: "CN",
name: "China"
},
{
id: "CM",
name: "Cameroon"
},
{
id: "CL",
name: "Chile"
},
{
id: "CC",
name: "Cocos (Keeling) Islands"
},
{
id: "CA",
name: "Canada"
},
{
id: "CG",
name: "Congo"
},
{
id: "CF",
name: "Central African Republic"
},
{
id: "CD",
name: "Congo, The Democratic Republic of the"
},
{
id: "CZ",
name: "Czech Republic"
},
{
id: "CY",
name: "Cyprus"
},
{
id: "CX",
name: "Christmas Island"
},
{
id: "CR",
name: "Costa Rica"
},
{
id: "CV",
name: "Cape Verde"
},
{
id: "CU",
name: "Cuba"
},
{
id: "SZ",
name: "Swaziland"
},
{
id: "DZ",
name: "Algeria"
},
{
id: "US",
name: "United States"
},
{
id: "UY",
name: "Uruguay"
},
{
id: "YT",
name: "Mayotte"
},
{
id: "UM",
name: "United States Minor Outlying Islands"
},
{
id: "LB",
name: "Lebanon"
},
{
id: "LC",
name: "Saint Lucia"
},
{
id: "LA",
name: "Lao People's Democratic Republic"
},
{
id: "TV",
name: "Tuvalu"
},
{
id: "TW",
name: "Taiwan"
},
{
id: "TT",
name: "Trinidad and Tobago"
},
{
id: "TR",
name: "Turkey"
},
{
id: "LK",
name: "Sri Lanka"
},
{
id: "LI",
name: "Liechtenstein"
},
{
id: "A1",
name: "Anonymous Proxy"
},
{
id: "TO",
name: "Tonga"
},
{
id: "LT",
name: "Lithuania"
},
{
id: "A2",
name: "Satellite Provider"
},
{
id: "LR",
name: "Liberia"
},
{
id: "LS",
name: "Lesotho"
},
{
id: "TH",
name: "Thailand"
},
{
id: "TF",
name: "French Southern Territories"
},
{
id: "TG",
name: "Togo"
},
{
id: "TD",
name: "Chad"
},
{
id: "TC",
name: "Turks and Caicos Islands"
},
{
id: "LY",
name: "Libyan Arab Jamahiriya"
},
{
id: "VA",
name: "Holy See (Vatican City State)"
},
{
id: "VC",
name: "Saint Vincent and the Grenadines"
},
{
id: "AE",
name: "United Arab Emirates"
},
{
id: "AD",
name: "Andorra"
},
{
id: "AG",
name: "Antigua and Barbuda"
},
{
id: "AF",
name: "Afghanistan"
},
{
id: "AI",
name: "Anguilla"
},
{
id: "VI",
name: "Virgin Islands, U.S."
},
{
id: "IS",
name: "Iceland"
},
{
id: "IR",
name: "Iran, Islamic Republic of"
},
{
id: "AM",
name: "Armenia"
},
{
id: "AL",
name: "Albania"
},
{
id: "AO",
name: "Angola"
},
{
id: "AN",
name: "Netherlands Antilles"
},
{
id: "AQ",
name: "Antarctica"
},
{
id: "AP",
name: "Asia/Pacific Region"
},
{
id: "AS",
name: "American Samoa"
},
{
id: "AR",
name: "Argentina"
},
{
id: "AU",
name: "Australia"
},
{
id: "AT",
name: "Austria"
},
{
id: "AW",
name: "Aruba"
},
{
id: "IN",
name: "India"
},
{
id: "AX",
name: "Aland Islands"
},
{
id: "AZ",
name: "Azerbaijan"
},
{
id: "IE",
name: "Ireland"
},
{
id: "ID",
name: "Indonesia"
},
{
id: "UA",
name: "Ukraine"
},
{
id: "QA",
name: "Qatar"
},
{
id: "MZ",
name: "Mozambique"
}
];
},
replace: true,
template: '<select class="form-control"><option ng-repeat="country in countries | orderBy: \'name\'" ng-selected="country.id == scope.country_id" ng-value="country.id">{{country.name}}</option></select>'
};
}]);
The issue is that the dropdown is not setting the default value to US. I've tried just about everything and can't figure out why it is not setting a default value :/
Any ideas on how I can fix this?
Thanks,
Michael
Note: These =attr attributes in the scope option of directives are
normalized just like directive names. To bind to the attribute in , you'd specify a binding of =bindToThis.
The issue with your code was with the name of the property in the isolated scope, and how you are using it within your template. The quote above says that if you want to use country_id attribute on your directive like below:
<country-select country_id="US"></country-select>
You would specify countryId as an attribute in the isolated scope of the directive as following:
scope: {
countryId: '='
}
In the template, you just need to use countryId which is the property from the isolated scope.
template: '<select class="form-control"><option ng-repeat="country in countries | orderBy: \'name\'" ng-selected="country.id == countryId" ng-value="country.id">{{country.name}}</option></select>'
And that's it. For more information you could read Creating Custom Directives. Also here is a working plunker
I'm loading a json to my Model but it only recognize the parent model class but not the childs.
This is the json:
{
"Feedback": {
"id": 101,
"title": "asdsadsa",
"description": "sadasds",
"comments": [
{
"id": 43,
"feedbackFk": 101,
"comment": "Hi John , we are glad to receive feedback from you :) \\nOne of our technicians will reach back to you shortly.",
"commentDate": 1431488907881,
"owner": {
"id": 4,
"firstName": "Arnold",
"lastName": "Smoth",
"type": "3",
"email": "fzegarra#XXXX.com"
},
"responses": null,
"likes": null
}
],
"attachments": null,
"createdDate": 1431488906273,
"lastUpdateDate": 1431488906273,
"status": "OPEN",
"source": "ETMS",
"user": {
"id": 6,
"firstName": "John ",
"lastName": "Travolta",
"type": "1",
"email": "john.travolta#XXXXX.com"
}
}
}
This is parent code:
Ext.define('FBT.model.data.Feedback', {
extend: 'FBT.model.data.MappedModel',
fields: [ {
name: 'id',
type: 'auto'
}, {
name: 'title',
type: 'string'
}, {
name: 'description',
type: 'string'
}, {
name: 'createdDate',
type: 'date',
dateFormat: 'time'
}, {
name: 'lastUpdateDate',
type: 'date',
dateFormat: 'time'
}, {
name: 'status',
type: 'string'
}, {
name: 'source',
type: 'string'
} ],
belongsTo: [ {
name: 'reporter',
associationKey: 'user',
model: 'FBT.model.data.User'
} ],
hasMany: [ {
model: 'FBT.model.data.Comment',
name: 'comments',
associationKey: 'comments',
foreignKey: 'feedbackFk'
}, {
model: 'FBT.model.data.Attachment',
name: 'attachments',
associationKey: 'attachments'
} ],
getModelName: function() {
return 'Feedback';
}
});
This is one of the childs
Ext.define('FBT.model.data.Comment', {
extend: 'FBT.model.data.MappedModel',
fields: [ {
name: 'id',
type: 'auto'
}, {
name: 'feedbackFk',
type: 'int'
}, {
name: 'comment',
type: 'string'
}, {
name: 'commentDate',
type: 'date',
dateFormat: 'time'
} ],
belongsTo: [ 'Feedback', 'User' ],
hasMany: [ {
model: 'FBT.model.data.Comment',
name: 'responses',
associationKey: 'responses',
}, {
model: 'FBT.model.data.User',
name: 'likes'
} ]
});
but when I parse it, Comments are not recognized as a model
<div class="center">
<table id="results"></table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#results").jqGrid({
datatype: "local",
height: 250,
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 60, sorttype: "int" },
{ name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
{ name: 'name', index: 'name', width: 100 },
{ name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
{ name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
{ name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
{ name: 'note', index: 'note', width: 150, sortable: false }
],
multiselect: true,
caption: "Manipulating Array Data"
});
var mydata = [
{ id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
];
for (var i = 0; i <= mydata.length; i++)
$("#results").jqGrid('addRowData', i + 1, mydata[i]);
});
</script>
However the grid doesn't not appear centered where as everything else that uses that class is centered.
How can I center the grid? The CSS looks like this:
div.header
{
text-align: center;
}
The code of jqgrid has probably changed since the answer of mars 2011.
With jqgrid 4.3.1, I had to add the following CSS:
.center .ui-jqgrid {
margin-left: auto;
margin-right: auto;
}
".center" finds the table's container, as written in the HTML sample of the question.
Add the following to your CSS:
.center
{
width: 640px;
margin-left: auto;
margin-right: auto;
}