trouble understanding json and jquery-ui autocomplete - json

I'm trying to use the jquery-ui autocomplete and I'm having trouble fully understanding how to hook it up.
In an effort to see functionality, we exported a list of user names in the json format of
["Abbott, Bob",
"Adams, Jo", etc...
and it's over 8k lines. I saved this into a file called names.json. When I set up my autocomplete, I used the following:
$("#userName").autocomplete({
source: "names.json"
});
Based on the jqueryi-ui autocomplete page. It says this:
When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data.
It returns all 8k+ names instead of filtering it based on what I'm typing. I tried changing it to:
$("#userName").autocomplete({
source: "names.json?term="
});
That didn't work to filter it either.
I've tried variations on the remote JSONP datasource example, but I can't seem to get it to work.
I've tried changing my json file to the format of:
[{"value":"Abbot, Bob"},
{"value":"Adams, Jo"}, etc...
That didn't filter.
I've tried taking out the quotes around value. That didn't return anything.
I've tried changing it to the format listed in the answer for this stackoverflow question returning item.value with my second json format but that didn't filter it either.
I'm not quite sure what I'm doing wrong and I hope to understand. Thank you.

Your datasource needs to by dynamic.
jquery ui autocomplete is going to send a request to the URL you have specified with ?term=WHATEVER_THE_USER_TYPED appended. You need something on the server side that will process that request and return just the data for that term.
For instance,
$("#userName").autocomplete({
source: "names.php" // php as an example.
});
Will result in a request to:
/names.php?term=abcd
names.php would have to pull back the data that matches the search and return it.

Related

JSON object losing info between API call and Frontend

I'm making a website that gets its info from a RESTapi I've written and hosted myself, have had no data problems thus far.
Now I'm trying a simple retrieve of a json object and I get all the info correctly as shown here in the API. (Visualized & tested in Swagger)
As you can clearly see, it retrieves it the complete object and underlying objects correctly (blurred sensitive info).
Pay attention to the property "AmountOfEggs" though.
Now when i call this api endpoint (exactly the same way) in my site and console.log the result.data, this is the feedback.
Now for some reason I can't recieve AmountOfEggs in my frontend.
I've recreated the entire object, wrote different names, passed different props (Id, NumberBus, etc are passed in this situation with no problem, which are also int (number) types).
I have no idea why this property gets "dropped" in the transfer and filled with/defaults to an empty string.
Any help would be greatly appreciated.
I found where it went wrong and it's due to different factors.
To start, I am making this site using the Vue framework, which has reactive components, which means, data gets adjusted and you get live updated components on your views/pages.
In the page that contained the call, I also wanted to add dynamic styling. The code I used for this is the following:
v-for="seller in retrievedSellers"
:key="seller.Id"
:class="[
'sellerStyle'
, (seller.AmountOfEggs = 0 ? 'grey-out-seller' : ''),
]"
Now two things to note, first of all this might look like backend coding but this is Vue logic on the .vue file which handles the dynamic options that Vue provides so I never thought to look here for the error.
The error of couse is the 'seller.AmountOfEggs = 0' part, using one equal sign (assignment) instead of two (comparison).
So I learned,
Vue doesn't throw errors on assignments in code that is used to generate frontend (where you should NEVER alter your data).
My console.log was the moment the response of the API came in, where apparently it was already assigned a new value (due to my code above) before hitting the console.log.
It still greatly surprises me that Vue handles ^this^ first to make sure your reactive components are up to date before finishing the api call itself.
However, I still don't understand how it said "" instead of 0.
I'm using typescript (javascript strongly-typed) so it definitely wants to contain a number and not an empty string. Even in the declaration of my DTO the property is defined as (and expects) a number.

PoI filter Data WireCloud

I'm using WireCloud, I'm trying to connect the output of a Map Viewer (PoI selected) to the input of a WebBrowser Widget (filter the PoI and get the URL of the image field). I saw some examples on the web doing it, but I'm not able to find the operator. Does anybody knows where can I get it?
Thanks a lot
We had custom operators for that tasks, and I've been cleaning and updating code to publish it as a new operator.
Such operator is called Value Filter, and you can find it on: https://github.com/Wirecloud/value-filter-operator
It does require a preference in dot-sepparated syntax as the path to the data you want to filter. It does receive a JSON object, extracts the path-addressed data and outputs it, so it can be instantiated in-line. In case original data is a POI, the path should be something like poi.data.something.
Best regards

Pentaho HTTP Post using JSON

I'm brand new to Pentaho and I'm trying to do the following workflow:
read a bunch of lines out of a DB
do some transformations
POST them to a REST web service in JSON
I've got the first two figured out using an input step and the Json Output step.
However I have two problems doing the final step:
1) I can't get the JSON formatted how I want. It insists on doing {""=[{...}]} when I just want {...}. This isn't a big deal - I can work around this since I have control over the web service and I could relax the input requirements a bit. (Note: this page http://wiki.pentaho.com/display/EAI/JSON+output gives an example for the output I want by setting no. rows in a block=1 and an empty JSON block name, but it doesn't work as advertised.)
2) This is the critical one. I can't get the data to POST as JSON. It posts as key=value, where the key is the name I specify in the HTTP Post field name (on the 'Fields' tab) and the value is the encoded JSON. I just want to post the JSON as the request body. I've tried googling on this but can't find anyone else doing it, leading me to believe that I'm just approaching this wrong. Any pointers in the right direction?
Edit: I'm comfortable scripting (in Javascript or another language) but when I tried to use XmlHttpRequest in a custom javascript snippet I got an error that XmlHttpRequest is not defined.
Thanks!
This was trivial...just needed to use the REST Client (http://wiki.pentaho.com/display/EAI/Rest+Client) instead of the HTTP Post task. Somehow all my googling didn't discover that, so I'll leave this answer here in case someone else has the same problem as me.
You need to parse the JSON using a Modified JavaScript step. e.g. if the Output Value from the JSON Output is called result and its contents are {"data"=[{...}]}, you should call var plainJSON = JSON.stringify(JSON.parse(result).data[0]) to get the JSON.
In the HTTP Post step, the Request entity field should be plainJSON. Also, don't forget to add a header for Content-Type as application/json (you might have to add that as a constant)

How can we construct custom URLs in HTML form with GET method?

I am using Django for making a website. I am using an HTML form with GET as the method.
The problem is that by default the get url is like this:
/search?name=user&place=place
But I want it to be something like:
my_site/search/user/place
How can that be done?
Why not use POST as method and retrieve the parameters in your view from request.POST? In this way they won't appear in your url.
Also, if you're expecting a list of results i recommend using ListView from views.generic, and in the dispatch() method you'll retrieve your parameters based on which you'll filter the user model (i guess).
It is better with a get request immo, but if you want something like: my_site/search/user/place it is easy, you just have to define the variables in your url and get the arguments in your function.
You can find more detail in django documentation
The only way you can do this in the browser is with Javascript. You will need to build the URL from the form contents. There are many mistakes you can make around encoding the values for the URL. You should be asking why you want to do it this way instead of using the QUERY_PARAMS as the form is doing.
Decoding it with Django isn't that hard, they are just variables in the URL pattern, but unless you have some kind of earth shattering new technology, you should let the browser send them to you without using JS to handcraft the URL.
Using the GET method send data via the web page. This means that the URL can be copied and rechecked at any time.

questions wcf rest service with webclient

I'm getting confused on a few things in regards to wcf rest.
If you call a login method, should I use a POST or GET? After implementing a POST, I started to find various articles saying you should only use post to update data, and get for retrieving data. Which is the most appropriate method?
If I had to change the Login method from a Post to a Get, how would I call this?
http://....myservice.svc/login/{username}/{passpord} or is there another way to call this?
Note that in my post method, I'm passing and returning data in json format.
I need to create a search function that requires to pass various parameters i.e. list, string, list, etc... I assume in this instance I would have to define GET method, but again how to I pass these list of objects? Convert them to json first and pass them as parameters?
A brief url sample would be great.
Ok, I guess I'll answer my own question based on further finding when researching it and remember that my answer is based on using JSON as parameters. I'm not sure how it would behave if xml was used as I did not try it.
It appears to make more sense to use POST when logging in as you do not want to display the information you are posting via a url. You could encrypt the data and pass it in the url using a GET method... Again I could be wrong, but that's how I interpreted the various articles I read.
Again, in this instance, it appears POST is the best solution if a) you require a large amount of data to be passed to your url and b) if you do not want to show this data to the user. If your query only requires simple parameters (i.e. userid, type, etc...) and you don't mind showing this info, you can use the GET method.
If you require to pass multiple parameters to a function, you should instead pass a single parameter. This parameter should be a single object. This object should be made of all the parameters you wanted to use in the first place, this way, when using the POST method, this object can easily be converted to JSON and it will handle passing multiple parameters through a single object and it will handle numeric, string, list<>, array<>, etc... very nicely.