I'm receiving from an endpoint the following response
{
"data": [{
"volume": 4.889999866485596,
"name": "Carton03",
"weight": 5.75,
"storage": 3
}, {
"volume": 2.6500000953674316,
"name": "Carton02",
"weight": 4.5,
"storage": 2
}, {
"volume": 1.4500000476837158,
"name": "Carton01",
"weight": 5,
"storage": 1
}],
"response": "true",
"type": "Storages"
}
Below I'm trying to create an array at my component:
export class StorageComponent {
private data: any;
private stors: Storage [];
constructor (private storageService: StorageService ) {}
storage () {
this.data = this.storageService.Storage();
//storageService.Storage is an assistant service that parse the response
// and brings me back only the data-array of the response
for (let i = 0; i < this.data.data.length; i++) {
const storages = this.data.data[i];
console.log(storages.storage);
console.log(storages.name);
console.log(storages.weight);
console.log(storages.volume);
this.stors[i] = storages;
}
}
}
I have a const storages to examine that i can evaluate data
and everything is ok.
The problem is that I want to fill up my variable stors that is an array of Storage model which has these attributes , storage,name etc.
I'm trying to do that through the last line but something is wrong ,
getting :
Cannot set property '0' of undefined
Any ideas?
The error is saying that during the first iteration of the loop, the assignment to this.stors[0] is not possible because it is undefined. The stors property has not been initialized. Consider:
constructor (private storageService: StorageService) {
this.stors = [];
}
Just do an initialization when defining the stors property like this:
private stors: Storage[] = [];
you can initialize other properties as well:
private data: any = null;
you may initialize this in the constructor or ngOnInit, but I think it's a better way like this to initialize arrays directly in the properties.
Initializing your class properties will avoid this type of behavior.
Related
I am currently working on a Angular project that makes it possible to create lobbies for different web games. The idea is that the application already gathers players so a web game can be started immediately.
But right now I am running into a problem that is caused by getting data from my Springboot Java API.
The Angular application gets the data correctly but when i try to convert the observable into a normal Game[] after subscribing ofcourse. It makes all the properties of the elements in the Game[] undefined. What is causing this to happen?
The Game Service:
//Returns a list of all games known to the API
getAllGames() :Observable<Game[]>
{
return this.httpClient.get<Game[]>(this.connectionService.getConnectionString()+"/games",this.httpOptions)
}
The Game class:
export class Game {
public Id : String;
public Name: String;
public RedirectURI : String;
public MinUserCount : Number;
public MaxUserCount : Number;
constructor(Id : String,Name : String,RedirectURI : String,MinUserCount : Number,MaxUserCount : Number)
{
this.Id = Id;
this.Name = Name;
this.RedirectURI = RedirectURI;
this.MinUserCount = MinUserCount;
this.MaxUserCount = MaxUserCount;
}
}
The Component:
games: Game[];
//Get all games known to the API
this.gameService.getAllGames().subscribe( elements => this.games = elements )
//This doesn't work all the elements of this.games are undefined.
I have also tried to work with a foreach of the array that gets returned.
With no effect either
games: Game[];
//Get all games known to the API
this.gameService.getAllGames().subscribe(elements => {
elements.forEach(item => {
var game = new Game(item.Id, item.Name, item.RedirectURI, item.MinUserCount, item.MaxUserCount)
this.games.push(game)
})
})
The JSON Result for the GetRequest
[
{
"name": "QuizGame",
"id": "dg217d65126b5e31v6d5v5d15v564d",
"maxUserCount": 4,
"redirectURI": "http://localhost:8082",
"minUserCount": 1
},
{
"name": "RPG",
"id": "dt76TQWR127367125SDYATFHa32615",
"maxUserCount": 10,
"redirectURI": "http://localhost:8083",
"minUserCount": 0
},
{
"name": "Scribble Clone",
"id": "378167e86dsahdgahkj312DJKHDg2d",
"maxUserCount": 9,
"redirectURI": "http://localhost:8084",
"minUserCount": 1
},
{
"name": "WebPonker",
"id": "0o00dhsnvkjzbcxhgjyg23v2gh3dvg",
"maxUserCount": 4,
"redirectURI": "http://localhost:8085",
"minUserCount": 4
}
]
The properties in your JSON response start with a lowercase.
In your Game class, you use properties that start with an uppercase.
I believe the parsing from JSON to a typescript object is case sensitive. Could you try to change the first letter of your properties to lowercase?
The problem I'm having, I can't add/change a given item inside a JSON object. I tried to convert it to use a simple put but that doesn't work since: Property "put" does not exist in type of "JSON"
Key: 123 Value:{"name":"123","email":"123","password":"123","country":"123","about":"123","image":""}
My method to change the country value.
newJson:JSON;
onSubmit(value:any){
this.newJson = JSON.parse(localStorage.getItem(this.id));
this.newJson.put("country", value.country);
localStorage.setItem(JSON.stringify(this.newJson));
}
The value I get from the parameter (the submitted value)
{"country":"Portugal"}
Try like this :
export class Component {
private jsonObj: any = {};
private key: string = "123";
constructor(){
this.jsonObj = {
"name": "123",
"email": "123",
"password": "123",
"country": "123",
"about": "123",
"image": ""
}
localStorage.setItem(this.key, JSON.stringify(this.jsonObj));
}
ngOnInit() {
let localStorageJsonData = JSON.parse(localStorage.getItem(this.key));
localStorageJsonData.country = "france";
localStorage.setItem("obj", JSON.stringify(localStorageJsonData));
console.log('localStorageJsonData', localStorageJsonData);
}
}
Let's say I have this Json ..
{
"name": "Mark",
"gender": "male",
"account1": {
"accountNo": 1201,
"balance": 300
},
"account2": {
"accountNo": 1354,
"balance": 5000
}
}
What I expect is like ..
$scope.myArray = [
{
"accountNo": 1201,
"balance": 300
},
{
"accountNo": 1354,
"balance": 5000
}
];
In AngularJS, how can I pick some part of Json data and push it into an array iteratively( I mean, when I have account1, account2 account3 or more, it can still add them into the array).
You could normally just assign the array over, but in this scenario that is not an option because your array is psuedo.
Ideally you would like to be able to do what this answer (related question) does: How to return and array inside a JSON object in Angular.js which is simply
$scope.myArray = json.accounts;
However, as noted, you do not have an accounts array so you need to make one.
var accounts = [];
for(var key in json){
if( !json.hasOwnProperty(key) // skip prototype extensions
|| !json[key].hasOwnProperty("accountNo") //skip non account objects
) continue;
accounts.push(json[key]);
}
And now you may use this array
$scope.myArray = accounts;
You can access Json data like an array. Like var foo = { ... , 'bar' = 'value', ... } you could get foo value by doing this for['bar']. So, by knowing this, you simply do something like
var arr = [];
for (var i = 0; i < 10; i++) {
arr.push(foo['account'+i]);
}
Although, this has nothing to do with angularjs.
We have created an array of complextype(Carrier field) objects. See below metadata
{ shortName : 'Person',
namespace : 'Demo',
autoGeneratedKeyType : breeze.AutoGeneratedKeyType.Identity,
"dataProperties": [
{
"name": "carriers",
"complexTypeName":"Carrier:#Test",
"isScalar":false
}]
}
The Carrier entity is defined as below:
{
"shortName": "Carrier",
"namespace": "Test",
"isComplexType": true,
"dataProperties": [
{
"name": "Testing",
"isScalar":true,
"dataType": "String"
}
]
}
We have the following matching data for the above entities:
{
carriers: [
{
Testing : 'InputBox1'
},
{
Testing : 'InputBox2'
}
]
}
We are trying to dynamically add the complextype object(Carrier) to the above carriers array by using the following approach:
var test = {
"Testing" : "Test"
};
var result = manager.createEntity('Carrier', test);
The above code throws an exception(undefined is not a function) inside breeze.debug.js at line number 12457(see below code)
entity = entityType.createEntity(initialValues);
The exception is thrown since the complextype entity does not have 'createEntity' function in it.
What are we missing here?
Excellent question - Sorry I didn't have a chance to address this earlier.
When adding a complexType object you need to use the createInstance() method instead of the createEntity.
var thisEntityType = manager.metadataStore.getEntityType('Carrier');
var thisEntity = thisEntityType.createInstance(initialValues);
Basically you get the complexType and then create an instance of it using the values you want assigned. Keep in mind the initial values should be a hash object of course. Often I will include a helper function to do this for me like this -
function createComplexType(entityType, constructorProperties) {
var thisEntityType = manager.metadataStore.getEntityType(entityType);
var thisEntity = thisEntityType.createInstance(constructorProperties);
return thisEntity;
}
What is the root property value if I get a Json like that:
{
"status": {
"status": 0,
"msg": "Ok",
"protocolversion": "extjs.json"
},
"value": {
"table": [
[
"admin",
"Administrator",
""
],
[
"test",
"Test",
""
]
],
"total": 2
}
}
The data will be displayed in a gridpanel, 1 row is admin, 1 row is test, etc.
Tried:
value, value.table
How to get this to work?
value.table is correct for the root property, but you are using a json format that I don't think Ext is set up to handle by default. It has a reader for json that is used for an array of objects, not for an nested arrays of field values with no object mapping information.
If you have to use that format, you will either need to create your own readers/writers or just use Ext.Ajax.request(), and in the callback, parse the nested array into objects. Something like:
Ext.Ajax.request({
url: 'path.com/to/content',
success: function (response, operation) {
var data = Ext.JSON.decode(response.responseText);
var fields = data.value.table;
var records = [];
Ext.Array.each(fields, function (fieldArray, fieldIndex) {
Ext.Array.each(fieldArray, function(fieldValue, valueIndex) {
//Create record object if it doesn't exist
var record = records[valueIndex] || {};
//Create a switch statement based on the array index to set fields
switch(fieldIndex) {
case 0:
record.User_id = fieldValue;
break;
case 1:
record.Username = fieldValue;
break;
}
});
});
//Add the objects to the empty store
store.add(records);
}
});
That's not a production solution by any means since it doesn't handle that empty string at the end of your list or the case that you get a jagged array of arrays per field which I can't imagine what to do with. If it's within your control or influence, I would suggest using a format more like what Ext suggests so you can use the built in json proxy/reader/writer or go crazy with it and implement ext's remote procedure call format:
{
"success": true,
"message": "Success",
"data": [
{
"User_id": "admin",
"Username": "Administrator"
}, {
"User_id": "admin",
"Username": "Administrator"
}
]
}
In above example "value" is root property. But for JSON reader it's a property name (or a dot-separated list of property names if the root is nested).
so you can assign into your field you need following.
fields:['table.admin','table.test']