Solved

Need to strip JSON result before submitting to JQuery Autocomplete

Posted on 2014-09-22
10
195 Views
Last Modified: 2014-09-27
I am using JQuery UI autocomplete to display some options taken from a JSON structure. I have a very simple stripped down example working here:

http://www.dressorganic.co.uk/autocomplete/jsontest.htm
If you type "te" in the form you will see a couple of options appear.

This is all working fine and the script loads the values from the following file:
http://www.dressorganic.co.uk/autocomplete/jsonoutput.htm

However in my actual implementation the JSON structure is generated within a page which contains full HTML structural tags and I need to somehow strip this out and only extract the JSON structure.

http://www.dressorganic.co.uk/autocomplete/jsonoutput2.htm
If you view source you will see what I mean.

http://www.dressorganic.co.uk/autocomplete/jsontest2.htm
If you try adding "te" in the above form you will see a parse error.

What I have done is to surround the JSON structure with container strings:
### START ###
### END ###

Ideally I would like to parse the output by splitting it to extract the contents.

So I am looking to do something like this:
var theresult=jsonoutput.split("### START ###")[1].split("### END ###")[0];

Somehow the above needs to be done before it is used by autocomplete. I hope this makes sense.

I am willing to look at other ways to achieve this. If I have to first grab the JSON structure into a variable, parse it then put it back into the autocomplete then so be it.
0
Comment
Question by:mike99c
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
10 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 200 total points
ID: 40337254
replace :
                    success: function( data ) {
                        response( $.map( data.products, function( item ) {
by:

                    success: function( data ) {
                        data = $.parseJSON(data.replace(/^### START ###\s|\s### END ###$/g,""));
                        response( $.map( data.products, function( item ) {
0
 

Author Comment

by:mike99c
ID: 40337344
Thanks leakin91, I applied your change here:
http://www.dressorganic.co.uk/autocomplete/jsontest3.htm

Unfortunately I still get the parse error. I am not sure if the syntax is actually correct.
0
 

Accepted Solution

by:
mike99c earned 0 total points
ID: 40337434
I managed to get it to work by trying a slightly different approach:
http://www.dressorganic.co.uk/autocomplete/jsontest4.htm

The changes I did are as follows:

1. Changed dataType to be "text" instead of "json"
2. Read the resulting text data then extract the JSON structure using the split method
3. Parse the JSON structure and copy back into the data variable.

I think the reason the solution given by leakim91 did not work was because autocomplete was expecting the data source to be correctly formatted JSON so just trying to load it would fail as it would not parse as a JSON structure. Hence we needed to load it as text to bypass any JSON parsing then extract the JSON string before parsing it as JSON.
0
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
LVL 82

Expert Comment

by:leakim971
ID: 40337439
1. yes, I was thinking you already receivng text...
2. split, why not... the regex do the same in one sh
3. yes, this what I used

the issue with my answer was the type:json instead text
0
 

Author Comment

by:mike99c
ID: 40337482
OK just for the record I took leakim971's solution and replaced the dataType with "text".
http://www.dressorganic.co.uk/autocomplete/jsontest3b.htm

There is no parse error but nothing appears which suggests the regular expression may be the issue.
0
 
LVL 35

Expert Comment

by:mccarl
ID: 40338070
Just to add something to this.... Maybe a more elegant way, rather than adding the START and END tags and doing splits and/or regex, is to use jQuery to parse the HTML itself. So for the above example, remove the START and END tags from the generated HTML wrapped JSON, and then use this line to extract the "data"...
data = $.parseJSON(  $(data).find('body').html()  );

Open in new window


Obviously in your non-stripped down version, the JSON data may be located in a different place within the HTML content, but I'm sure you can work out how to change the above to select whatever is the correct element that holds your JSON.
0
 

Author Comment

by:mike99c
ID: 40338436
Thanks mccarl. I have implemented your solution by creating a new data file here:
http://www.dressorganic.co.uk/autocomplete/jsonoutput3.htm

If you view source I have removed the container strings.

I then loaded this file from this page and updated the script as you suggeted:
http://www.dressorganic.co.uk/autocomplete/jsontest5.htm

If you try it now and type "te" the data value becomes null after trying to extract the html. I don't understand why it is not working as all appears to be correct.
0
 
LVL 35

Expert Comment

by:mccarl
ID: 40340592
If you try it now and type "te" the data value becomes null after trying to extract the html.
My apologies, I wasn't able to easily test what I had written above, and it appears the jQuery (or more likely the browsers DOM manipulation) ignores some of the tags when parsing the HTML (like <html> <head> <body> etc).

However in my actual implementation the JSON structure is generated within a page which contains full HTML structural tags and I need to somehow strip this out and only extract the JSON structure.
If you try the code that I gave above with your ACTUAL full HTML structure, but just changing the jQuery selector expression from 'body' to whatever will select the HTML element that contains your JSON, you should find that it just works. It doesn't work in this simplified version that you are testing with because, as stated above, the <body> element is being ignored and so jQuery can't select it.

eg. I tried an example like this...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Utilities</title>
</head>
<body>
  <div>
    <p>{"products":[{"ID":100,"ReferenceID":"TST001","Name":"Product 1"},{"ID":101,"ReferenceID":"TST002","Name":"Product 2"},{"ID":102,"ReferenceID":"TST003","Name":"Product 3"}]}</p>
  </div>
</body>
</html>

Open in new window

... with the following line ...
data = $.parseJSON(  $(data).find('p').html()  );

Open in new window

... and it worked perfectly fine!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40340599
data = $.parseJSON( data.match(/({.*})/).pop() );
0
 

Author Closing Comment

by:mike99c
ID: 40347403
The original response from leakim971 which although incorrect did in fact point in the right direction as I needed to intercept the data parameter before extracting the JSON structure before parsing it.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question