I am looking for something that one would probably find in hundreds of tutorials for AngularJS but I don't quite know where to look.
I want the best practice for searching a user by the user's name out of a list of ten thousands stored in the database. I am thinking about something similar to Facebook's "friend search" field. So as the user starts typing proposed results should appear.
If the list was already on the client, the simple ng-filter behaviour would be enough, but I don't want to dump the whole database in a json file.
Could somebody forward me some hints how to approach this problem and where the pitfalls are? The backend is a Symfony2 application with Doctrine, if that matters...
Thank you!
For requesting ten thousand of data in a combo like component, you should use a typehead with an asynchronous call.
See this component :
https://github.com/angular-ui/bootstrap/tree/master/src/typeahead
Your indexed data have to be indexed (lucene or equivalent) to have acceptable performances.
I believe you are looking for Select2 component, more exactly the select2 with remote data here.
It is integrated in angular-ui
And in your controller, you can set ajax parameter as described in the select2 API description:
$scope.select2Options = {
ajax: {
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
dataType: 'jsonp',
quietMillis: 100,
data: function (term, page) { // page is the one-based page number tracked by Select2
return {
q: term, //search term
page_limit: 10, // page size
page: page, // page number
};
}
The back-end implementation will be your job.
Related
If I want to display many posts in my web application but every post have its own type and I want to display each type in single page so, What's the best method to do that? Is put all all posts in one url and use query string to filter the posts upon the type and display it in the page?
For example : axios.get('/posts?type =sport')
Or I have to put every single type in separate Url
For example: axios.get('/posts/sport')
Also one more question please?
use one reducer to manage every posts or create one reducer for each post type?
you can add a dynamic route to every new type.
Ex:
'/transaction' -> component-1
'/transaction/:type' -> component-any (multiple)
welcome to Stackoverflow!
I can imagine you have a web API of some sort serving a URL /posts. You want to consume that endpoint from your web application, and you are using axios to do that. I can assume you are using JSON to return that data. Correct me if I'm wrong.
Now that the basic information is "clear", what data you serve from the endpoint, and how it is requested from the client is up to you. Do you want to ask the server what types are there first, and then do one AJAX request per type? Ok. Do you want to serve all posts independent of their type? Ok. Do you want to accept POST data in your controller so you can filter the results before returning a response? Ok.
If you are looking for a more specific answer, you must give more details, or specify more. But I hope I could be of help.
Edit: complete answer.
If you want to filter the results, you have to send some additional data in your POST request, in this case, your post type. In axios, this could be done like this:
axios.post('https://example.com/posts', {
type: 'sports'
}).then((data) => {
console.log(data);
});
You can obviously get the "type" value from a select input, other variable, even the current router page. I don't know your exact setup, but you can always come back and ask ;)
THEN, in your API controller you have to get that POST parameter type, and use it to filter the results. Again, I don't know your exact setup, but for MySQL if would be a WHERE statement in your query, or similar.
I want to build a search page that lets user query data based on certain criteria that they can choose from select and radio checkboxes, on behalf of which a query string is generated that gives the key/value pair for searching, the functionality is somewhat similar to what they have for their staters page.
Please check the link below to get an idea of what I am looking for:
https://www.gatsbyjs.org/starters/?v=2 <---- query string.
These pages need to be shareable so query strings are essential and data fetching need be as quick as it is on their website.
From what I have understood so far, according to documentation:
https://www.gatsbyjs.org/docs/data-fetching
I have two options:
Get data during build time
Get data during run time
For a run time, I think, I would need to use redux-thunk to make network calls to an ExpressJs, MongoDB REST API but my concern is that it can be slow.
For build time, I am sure on how can I source data from Graphql queries, and render them.
Any help on this will be great. Thanks
The Gatsby Starters Library is parsing the URL param in this urlToSearch method in the PluginSearchBar component:
urlToSearch = () => {
if (this.props.location.search) { // get the params from the location prop
const match = /(\?|&)=([^&]+)/.exec(this.props.location.search)
if (match) return decodeURIComponent(match[2])
return ``
}
return ``
}
Mainly, it uses the Gatsby location prop (from #reach/router under the hood) to get the search keyword from the query string.
Search is then implemented client-side using Algolia's react-instantsearch library. You can find the complete implementation in plugin-searchbar-body.js.
There are naturally other ways to implement search. A good place to start for inspiration is Gatsby's Adding Search documentation.
I'm new to Ionic Framework and AngularJs as well.
The app I'm working on has a view where user can search and the results are presented in a list. When the user clicks one of the list items, it navigates to details view. When user presses the "back" button at the header bar, the search text box and results list are empty and he must search again.
What is the recommended approach to, when the user presses the back button from details view, bring the search view populated with the previous search term and results? (would be nice to have the scroll position restored as well)
I know I can just store this information into some service, but this sounds like a lot of work.
Are there any other cool stuff like a view state service or something that can do this for me?
I know I can just store this information into some service, but this
sounds like a lot of work.
really?
app.factory('searchData', function() {
return {
searchTerm: '',
results: []
};
});
that's how it's done. But it sounds like what you're really looking for is a cure for laziness...
I'm working on an angular application, using Firebase for persistence. I have multiple locations on the page, each show user specific info (i.e. profile pic, current logged in status, etc).
I am struggling to come up with a "good" solution that will allow me to embrace the 3 way data data-binding, and maintain a proper separation of concerns.
For a very specific instance of my problem. I have a HeaderMessagesCtrl, which pulls a list of messages from firebase at /users/x/messages. The messages, which contain a fromUserId, are bound to $scope.messages;
I have an angular view that does ng-repeat on the messages collection, and for each row, I would like to use the fromUserId to determine the user's logged in status, profilePicUri, etc.
http://jsfiddle.net/brkAq/5/
function HeaderMessagesCtrl($scope, $timeout) {
$scope.messages = [
{fromUserId: 1},
{fromUserId: 2}
];
$timeout(function(){
$scope.messages.push({fromUserId: 3});
}, 1500);
}
The above fiddle shows a sample collection that then gets modified at a later time. Hopefully this can assist to provide an example solution.
Thanks in advance.
Edit
I was asked to suggest a pattern, so below is the first thing to come to mind.
I was thinking of creating a watch on the scope variable, that contained the array that firebase will be updating. This watch would reach out to the UserService to obtain the profilePicUri, and thus create a scope array that was more like a view model instead of an exact replica of the data in firebase.
The other option was to create a user-profile-box widget, which you could provide the user id, and it would figure out the uri from the UserService, and use those details to make the widget html, etc.
Either way, my struggle is the "relationship-less" nature of firebase.
Scenario: I have a URL that returns details about the current logged in user. I.e.
one record
no list needed
Options I have:
Perform a manual ExtJS Ajax call each time, having to insert the code everywhere I need the callbacks etc.
Create an ExtJS Store once and fetch the first record from the store instance every time.
Question: Any better options? I'm using ExtJS 4.1.
You don't need to go into low level details to do something like that; use the standard tools. Define a Model, assign it a Proxy of the type you need, and load it. See the docs: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Model
Why are you doing an ajax call each time?
Do it once, and assign it as a global variable?
Ext.Ajax.request({
url: 'page.php',
params: {
id: 1
},
success: function(response){
var text = response.responseText;
window.user = Ext.JSON.decode(text);
my.custom.launchFunction();//does your viewport etc for you
}
});
Having done this, you can now, from anywhere do
console.log(user.Name);
Its neater, and faster, than doing a store lookup.
As a bonus, you user object can be much more complex than the store would handle without a ton of config.