How to request dynamically created JS files using AngularJS - javascript

We have a lot of these small sets of data that populates our select dropdowns in our view. For example, gender, countries, shirt sizes, country contact codes, etc..
These data sets don't normally change so I'm thinking what would be the best option to retrieve these data to our views.
Create endpoints for them. So I would have something like below
http://dom.com/countries
http://dom.com/genders
http://dom.com/shirt_sizes
Problem is I would make several "expensive" http requests just to retrieve these information.
Create a module and hardcode these values in a service
angular.module('OptionsModule')
.factory('options', function() {
return {
genders: ['M','F'],
// others
}
}
Problem is some options I still need to load from the database. For example,
the countries list. So I need a way to dynamically create this module from the server
I kinda prefer option #2. But how do you generate js files dynamically from php and how do I request for it using angularjs?

Mix of your two points is good. Use hardcoded values for small lists and backend requests for long/DB-placed data.
You need not send js file, you just send JSON object. In PHP you get it by json_encode and in JS you get your JS object (you need nothing).

Related

Loading multiple data objects from backend API - all at once or every data object in its own call?

Lets say i have a form that i use to edit a Customer. In addition to various input fields it will also have multiple drop down lists to set some fields (eg. Country, Category, Status...). Every drop down list will need a seperate lists that i need to get from the backend to populate.
That means that if i want to edit a customer with my form, i need to load:
The Customer Object which will be edited
A list of countries
A list of categories
A list of different stattus types
...
My question is:
Should each of these things be loaded seperatly with its own backend API call, or should i write a API backend call that will combine all these things into a single object and use it to load my data?
I think It's better use multiple API call in almost situation.
After compare pros and cons as table below, I always choose Multiple API call for projects.
Credit to Andrew Corrigan and Amrit remind me some criterias.
Single API
Multiple API
Network
Less request
Multiple request => Caching
UI Render
Render data in nearly same time
Render if any api response
Reuse FE component
Need to call big API to take one array data
Get what needed
Reusability API
Low
High
Single Responsibility
No
Yes
Flexible
No
Yes
Its an opinion based and scenario based , but in my suggestion i would prefer
things be loaded separately with its own backend API because :
1.Single api will be heavy and UX will be badly impacted
2.User may not change all field when form opens so only changing fields will be using api

Use AJAX and Controller to Populate Index page by Dropdown Selection

I have an ASP.Net Core project and I used EntityFramework to scaffold using CRUD. I have my view pages and I want to make my index page dynamic. I have a hierarchical database where it is in this order, Department, SubDepartment, Machine, Equipment, Problem. I have already made queries for different views where I return data based off a dropdown selection. My question is how do I enter queried data into the table to display in Index?
There are many options and I am not sure where to start. Here are some of my thoughts.
Return the queried data to the view as a JSON and sort of manually parse it into the table.
I am not sure on this one but could I just add the queried data into a ViewBag or ViewData and it would automatically be added to the table?
As of now, I already have a JSON that is being returned into the view.
EDIT: I just remembered that ViewBag/ViewData is likely not an option because to my understanding those require a page refresh. So my question now is how can I parse a JSON into a EntitityFramework created table?

Using Select 2 drop down for large data more than 10000 Search

Hello every one i want to use select 2 drop down which can easily filter
more than 10000 record butt in the given link
http://jsfiddle.net/a8La61rL/10/
using script a large function that is not good to use in every page
is there is any to use this script in a separate file and send list of array
objects to this method for populating and searching
This is possible with the following steps.
1- Make an ASPX webservice or Web page function which will fetch a list of these records from a file using C#/Vb file handling and return in JSON array.
2- Use jQuery $.ajax method to fetch this json array from ASPX function or Webservice.
3- Bind the select2 in jQuery success event.
This will become a call, and on every page you can include this script and bind data. For better performance, you can also fetch first time from file and save in session or cookie and whenever any other page will call, it will fetch from session or cookie. I can explain further if required.

Saving dynamically created content to server & load from there

So I have this webpage that I'm making which allows people to create elements on the page on the fly. And I want to be able to save those elements to my server and whenever someone else reloads that page, the webpage will have those saved elements.
I'm not a good web programmer by any means, so take it easy with the web jargon xD
The user created elements are nested 's or lists. Those elements can be deleted at anytime as well.
So I was reading about saving them as JSON but how would I go about doing that as my 's, most of the top level ones will have the same class. Never worked with JSON before, so I'm a real noob at that.
Will the server file keep replacing itself with a brand new copy with each addition/deletion?
And I'd like to get a little help with showing the new elements without updating. On other users page. I read about AJAX real-time updating, like APE, but have no idea how to go about with that. (This is not really needed but would be a nice one to have)
If someone can guide me a little at least, that will be great. Thanks.
The best suitable way to accomplish this is by saving your objects attributes to a database, however other options include XML files etc..
The process of accomplishing it through database is:
If you want to save data to database then you will have to use a server side language like Php or Asp.net, so first step will be to have a database then an active connection to your database on your intermediate file (lets say 'data.php')
Then you need to code your data.php file so that it can take input(usually through GET or POST method) and it can save it to your database
Then you need to pass your data (objects attributes) through AJAX to data.php and save them to your database
On the main file you will have to check whether already some data exists for user, if yes then fetch it from database and display objects accordingly, otherwise set the objects preferences to default

CometD receiving published data using jquery in front-end

I'm doing a market/stocks watch web project.
At the server side I have a Servlet and Service on a cometd-jetty implementation.
The Service (CometD Client publisher) sends a JSON published data. i.e. [{"Stock Code":"ABC"},{"Stock Code":"DEF"}]. Time interval of published data is almost every second or even less.
At Front-end, I'm using cometd javascript implementation to fetch the data and render it in html table using jquery.
Questions:
1.) What is the best way to render the data in a table (using datatables plugin) with very fast receiving of data from publisher/cometd server (less than a second each message)?
2.) How can I indicate change in price through hi-lighting table cell when stock price changes? I'm trying to figure this out using js or jquery?
Your help is very much appreciated!
1) The DataTables plugin can use a JavaScript array as its data source. You'll have some sort of method that's processing incoming data; push that into a JS array and then call .dataTable() with that as your source.
2) Inside the DataTables initialization object you can set callback functions at various stages. One of these is fnRowCallback, which allows you to modify the row and the cells within, based on the available data. Grab the data, run your comparison function, and when the conditions are met, modify the cell.
For both questions, there should be sample code available at DataTables.net.

Categories

Resources