How to parse Json into class?

Cocos Creator
#1 
import { _decorator, Component, JsonAsset} from 'cc';

const { ccclass, property, type, string, integer} = _decorator;

@ccclass('D')

export class D {

    @string

    public id;

    @integer

    public maxStackSize;

    @string

    public displayName;

    @string

    public itemType;

}

@ccclass('E')

export class E {

  @type([D])

  public data : D[];

}

@ccclass('A')

export class A extends Component {

  @type(JsonAsset)

  public myJson : JsonAsset;

  @type(E)

  public myE;

  protected start(): void {

    this.myE = this.myJson.json as E;    

  }

}

{
	"data": [
		{
			"id": "1",
			"maxStackSize": 10,
			"displayName": "corn",
			"itemType": "corn"
		},
		{
			"id": "2",
			"maxStackSize": 20,
			"displayName": "tomato",
			"itemType": "tomato"
		},
		{
			"id": "3",
			"maxStackSize": 30,
			"displayName": "wheat",
			"itemType": "wheat"
		}
	]
}

I have a json and a class like above. Upon running it, there is no data. How should i do to make it correctly ? I want to view the parsed data in editor.

image
image494×589 13.4 KB

1 Like
#2

Maybe use executeInEditMode and parse the data, for example, in update(), with checking if the value of the my_json variable has changed.

#3

can someone help ? How come parsing a json in js/ts engine can be that confusing? I tried to look at the document but there is not much info.
https://docs.cocos.com/creator/2.4/manual/en/asset-workflow/json.html

#4

I’m still new to CC, but I’m interested in this point, and at the same time it seems to me that there is no way to reflect JSON directly into a class instance…what JsonAsset does is simply (quote from the API): “It will automatically parse the json to a JS object.”

#5

You can actually, it works for simple json but not json with array, dict, etc

image

@ccclass('A')

export class A extends Component {

  @type(JsonAsset)

  public myJson : JsonAsset;


  @type(D)

  public myDClass : D;

  protected start(): void {
    this.myDClass = this.myJson.json as D;

  }

}

{
			"id": "1",
			"maxStackSize": 10,
			"displayName": "corn",
			"itemType": "corn"
}
#6

Thats why it is weird to me? How come using json is that confusing ?

#7

Nailed

@ccclass("TestClass")
class TestClass {
    @property
    a:number = 0
    @property
    b:string = "hi"
}

@ccclass('NewComponent')
export class NewComponent extends Component {
    @property(JsonAsset)
    set testJson(v){
        this._testJson = v;
        const json = v.json;
        this.test1.a = json.a;
        this.test1.b = json.b;
    }
    get testJson(){
        return this._testJson;
    }

    @property(JsonAsset)
    _testJson:JsonAsset = null;
    @property({type:TestClass})
    test1:TestClass = new TestClass();
}

image

1 Like
#8 
{
	"data": [
		{
			"id": "1",
			"maxStackSize": 10,
			"displayName": "corn",
			"itemType": "corn"
		},
		{
			"id": "2",
			"maxStackSize": 20,
			"displayName": "tomato",
			"itemType": "tomato"
		},
		{
			"id": "3",
			"maxStackSize": 30,
			"displayName": "wheat",
			"itemType": "wheat"
		}
	]
}

@iwae can you provide an example for a more complex json, that containts array within it ?

#9

same way,

  1. same change this to array

test1:TestClass[] = [];

  1. parse the json and get the length of the object, fill the data