How to process Cj in front-end?

[kkw]

Hi,

Recently our team started to pick up some knowledge in Hypermedia and Cj.

Sorry if the similar questions has been asked before in the group.

We have tried to use Cj in one of our Ajax call.

Now the problem we have is how to process Cj in front-end (we are using AngularJs for front-end application), we have different opinions among the team members.

Opinion 1:

Just access the data as an array, like below:

<tr>
  <th>Current</th>
  <th>Effective</th>
  <th>{{ myCj.collection.items[0].data[2].name }}</th>
  <th>By</th>
  <th>Updated</th>
</tr>
</thead>
<tr data-ng-repeat="myData in myCj.collection.items">
  <td><span ng-if="myData.data[0].value" class="glyphicon glyphicon-ok"></span></td>
  <td>{{ myData.data[1].value }}</td>
  <td>{{ myData.data[2].value }}</td>
  <td>{{ myData.data[3].value }}</td>
  <td>{{ myData.data[4].value }}</td>
</tr>

Pros:

- decoupling from the back-end. Whenever the data change, the code in the front-end won't break.

Cons:

- Not readable (suggestion for readability issue: wrap "myData.data[1].value" into a function, e.g. getCurrent(), "myData.data[2].value" to getEffective())

- Only useful if the usage of the data is just for "printing", but not when the front-end application need to process the actual data model.

Opinion 2:

Use AngularJs library such as https://github.com/Medycation/angular-collection-json to process the data, i.e object serialization.

Access the data like this:

<tr data-ng-repeat="item in collection.items()">
  <td><span ng-if="item.get('current')" class="glyphicon glyphicon-ok"></span></td>
  <td>{{ item.get('effective') }}</td>
  <td>{{ item.get('label') }}</td>
  <td>{{ item.get('by') }}</td>
  <td>{{ item.get('updated') }}</td>
</tr>

or like this:

<tr data-ng-repeat="item in collection.items()">
  <td><span ng-if="item.current" class="glyphicon glyphicon-ok"></span></td>
  <td>{{ item.effective }}</td>
  <td>{{ item.label }}</td>
  <td>{{ item.by }}</td>
  <td>{{ item.updated }}</td>
</tr>

Pros:

- The code is readable

- Object serialization.

Cons:

- Coupling with the backend, whenever the "name" of Cj's data changed, it will break.

Would appreciate if you guys can give us some advice/recommendation on processing/parsing the Cj in the front-end!

Thanks. :-)

Regards,

kkw

[Glenn Block]

I prefer the second approach / offering accessors to find by name. I do this in my .net server lib.

--
You received this message because you are subscribed to the Google Groups "Collection+JSON" group.
To unsubscribe from this group and stop receiving emails from it, send an email to collectionjso...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Glenn Block]

For example I have this: https://github.com/WebApiContrib/CollectionJson.Net/blob/master/src/CollectionJson/IEnumerable_Of_DataExtensions.cs which allows me to retrieve a data element by it's name by doing something like item.Data.GetDataByName("Foo") for exactly the same reason as you mentioned. For links I allow the same for finding links by REL: https://github.com/WebApiContrib/CollectionJson.Net/blob/master/src/CollectionJson/IEnumerable_Of_LinkExtensions.cs with a GetLinksByRel. I have thought of making this even do partial matches, so that if I have fully qualified RELs I don't have out the entire REL.

--

[kkw]

Hi Glenn,

Thanks for sharing the examples!

By the way, what about the coupling on the "name" with the backend? If any of the "name" change, then the front-end will break right?

But I just wonder if it is one of the Cj's design goals to avoid coupling.

[Glenn Block]

Sure!

There is always some coupling. A client reading a CJ document is going to have some expectations unless it is a generic client. The kind of coupling CJ wants to break is coupling the message to the backed implementation.

[Glenn Block]

That is backend implementation.

To unsubscribe from this group and stop receiving emails from it, send an email to collectionjson+unsubscribe@googlegroups.com.

[mca]

if i want to be sure to dynamically present whatever data elements the service is returning, i create a loop that walks the collection of data for each item. I don't use names at all and i don't hard code indexes ([0], [1], etc.).

sometimes however, i am only interested in select data elements (not all) and i want to present them in a specific order. so i write client code that finds & displays (in a predefined order) each one i want. of course, i add "check code" to protect the client if/when the service fails to return the item i was looking of (if cj.currentItem("hatsize") exists then ....)

cheers. 

mca

+1.859.757.1449
skype:mca.amundsen
http://amundsen.com/blog/
http://twitter.com/mamund
https://github.com/mamund
http://linkedin.com/in/mamund

[Glenn Block]

Good point, I should change my method to SingleOrDefault so that it returns null if it is not present.

[kkw]

Hi Mike,

Got it! Thanks!

[kkw]

I agree with you!