AngularJS : Dynamically update a JSON file and refeed autosuggest with it

Question

Let's say I have a form for editing a furniture.
In my business logic, a furniture can have finishings.
In my ORM logic, "finishing" is a separate entity from "furniture", with a many-to-many relationship.

So in my "edit/furniture" form I present the user a "finishings" subsection,
with 2 UI (form) elements:

• an autosuggest field, feeded by finishings.json (a file),
  • allows the user to attach already existing finishings to the furniture being edited,
• a "+" button, that make fields appear, to enter one or more finishings.
  
  • allows the user to add finishings on the fly.

I want the user to be able to add finishings without leaving the "furniture/add[edit/$id]" REST url, so he doesn't experience a page reload.

To this end, I use the "form within form" trick, which means I'm not submitting the entire furniture form : I don't want the user to leave the page, nor do I want it to reload it. So the "submit new finishing" is a fake submit button that triggers the "finishing/add/" REST url. The REST part of the app is responsible for rewriting an updated finishings.json file that reflects the modified DB. Pretty standard stuff.

The real trick is : I would like the autosuggest field to reflect changes in realtime, doing this by "re-reading" the finishings.json file.

Here are 2 options:

1. Instead of the "form within form", I could just update the UI and push new finishings entries into a JSON object built upon the initial finishings.json file reading. I could push the new entries into this $scope object which would give the UI what it needs. Upon submitting the "edit furniture" form, I would prep data and sort stuff out: go through every finishing attached bu the user to the furniture, and separate the existing ones from the "just added" ones.

2. I keep my "form within form", because I want my finishings.json file, not a json object, to be the "source of truth".

I think I can manage option 1, but I'd really prefer to go with 2.

How would you do that? What is the proper way in AngularJS to reload the finishings.json file on demand, and having it refeed the autosuggest with a fresh new batch of options, in real time?

Answer 1

Is the purpose of having this fresh data from the finishings.json file to enable every application user to be aware of new data in that file?

I mean... if me as user A am adding a new finishing, you want my finishing to be accounted by every other application user? Is that part of the suggestion algorithm?

If this is the case, and in fact what you're looking for is some sort of changes listener, you would have two options to solve this:

a) Using $timeout to pool the file every x seconds (I personally don't like this kind of approach).

b) Create a service that uses some form of WebSockets implementation (Socket.io, SignalR, etc). At an high level it would work this way: Your clients connect to the socket server/hub and subscribe to a data change event. Then, everytime a finishing is added to the file, you would then emit a data change event to the socket server which in turn would broadcast that event to every connected client.