JSON Model Mapping for React AEM App

[johna91]

Hello All,

I've been working on a react AEM app for my work, our model is based off the model from the wknd-events app in Getting Started with React and AEM SPA Editor​. Were currently trying to figure out how the server side and client side pass properties. We understand properties are getting mapped to a JSON model as mentioned in step 6 in Text Component​. So as far as the wknd-events app located in Getting Started with React and AEM SPA Editor​ is concerned, where are the props in the JSON model coming from? I'll place more details below:

• ​
  • For example we have this items object with a text object inside. Inside of text we have a richText key-value pair. Where is this being set?
  • If I wanted to add a new key-value pair how would I do so?

Thanks All,

[Prince_Shivhare · Accepted solution]

I am currently working on a react and AEM integration, few things to share-

- we are using AEM as an authoring experience and generating the content as a service.

- In a component HTML, we are only defining the Java model call and JSON model.

- we are using sling models to generate the JSON of the component.

- so if any additional field is added in dialog or if you want to add any new property key-value pair in JSON then you will have to modify the component dialog as well as sling models.

- here the key is nothing but your dialog node property name. and value is authored content.

- The front end is generating through the React app.

~ Prince