Calling server data via JSON string

Question

I need to POST a JSON ecoded string using the following parameters:

{"params":"query=ADDQUERY&hitsPerPage=6&filters=type%3Aartists"}

I have;

An endpoint URL to query;
An input search box and a search button to trigger the query. I need to replace ADDQUERY with the user input.

Can anyone shed some light on calling this info with JSON POST?

What exactly are you trying to achieve, do you want to replace ADDQUERY only? how are you sending the data, we can't help without code. — Hudson, Jun 22 '18 at 13:07
@van : you just need to make this url dynamically from user input — Niklesh Raut, Jun 22 '18 at 13:08
@Hudson I'm trying to query the data on the server to return search results from a search bar, I haven't used JSON before so I have no idea how to format the code and link it to the input field — , Jun 22 '18 at 13:08
See this post: https://stackoverflow.com/questions/39519246/make-xmlhttprequest-post-using-json — Hudson, Jun 22 '18 at 13:11
@Hudson how would I run that query string using JS based on the search box content? — , Jun 22 '18 at 13:18
WHat have you tried so far? It would help to see the existing structure and the problem you have with just posting that object - or do you want to transfer the whole JSON object as one string? — Nico Haase, Jun 22 '18 at 13:26
Please add all relevant code to the question. And you have tagged the question with PHP, so where is your PHP code? Whats all that JS code about in the fiddle? — Nico Haase, Jun 22 '18 at 13:33
@NicoHaase tagged with PHP as I thought it may be relevant or part of the solution, the JS is from the answer below, trying to get it working. If you have another method I would be very greatful for it — , Jun 22 '18 at 13:36

Hudson · Answer 1 · 2018-06-22T13:43:15.850

0

Like this,

you can copy and paste this, just make sure to change the target url, and the input boxes querySelector , if it has an ID use '#' + the box id.

Edited your fiddle. Here's the full code.

    <div class="bodyparent">

<div class="searchbar">
   <div class="searchbar_inner">

      <div class="searchleft">
      <image onclick="search()" src ="search.png"/>
      </div>

      <div class="searchright">
      <input onchange="search()" id="searchinput" type="text" placeholder="Search...">
      </div>

   </div>
</div>

<div class="searchresults">

</div>
<script>
function search(){
  var box = document.querySelector("#searchinput");
  var json = { "params" :  "query=" + box.value + "&hitsPerPage=" + 6 + "&filters=type_artists"};

  var postData = JSON.stringify(json);
  //this is the string you requested above.

  var x = new XMLHttpRequest();

  x.open("POST" , "https://ufhsub9629-dsn.algolia.net/1/indexes/search/query?x-algolia-application-id=UFHSUB9629&x-algolia-api-key=69ed687a250f4c895cc73f6ee142a42e" , true);
  x.onreadystatechange = function(){
    if(x.status == 200 && x.readyState == 4){
        //do whatever here
    }
  }
  x.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
  x.send(JSON.stringify(json));
}
</script>

Its definitely working buddy:

edited Jun 22 '18 at 13:43

answered Jun 22 '18 at 13:22

Hudson

397
1
12

Unfortunately this isn't rendering any search results for me, do you know why this might be happening? – Jun 22 '18 at 13:42
I've run it successfully from Mozilla Firefox? Have you modified any other code? – Hudson Jun 22 '18 at 13:43
Failed in Chrome? "message: "Object must contain only one string attribute: params near line:1 column:11" – Jun 22 '18 at 13:47
Copy and paste my code above, i fixed that in the last edit buddy, I read your JSON wrong at first. – Hudson Jun 22 '18 at 13:47
Brilliant thanks so much, this is now 'working' (kind of), the query string parses successfully, I'm not seeing any results returned from the query, do you know how would I display these in the .searchresults container? – Jun 22 '18 at 13:54
you would have to use JSON.parse and iterate over the array... My best advice is go to w3 schools and look up javascript iteration. – Hudson Jun 22 '18 at 14:49

score 0 · Answer 2 · answered Jun 22 '18 at 16:00

I understand that you are trying to build your query using just PHP. You could look into using CURL to build the URL and send the request to a site or you could just encode the string with JS and redirect the page with the new URL.http://codular.com/curl-with-php A better option would be to send the request with AJAX and prevent a page refresh. Hope this helps. http://jsfiddle.net/codedcontainer/xpvt214o/287107/

$('form#artistForm').on('submit', function(e){
    e.preventDefault(); 
    var inputVals = $(this).serializeArray();
    var singleInputVal = returnSingleInputVal('search', inputVals); 
    var queryObj = buildAjaxObject(singleInputVal);
    sendAjaxRequest('/echo/json', queryObj); 
});

function buildAjaxObject(searchQuery){
    var dataObject = {
        query :searchQuery,
        hitsPerPage: 6, 
        filters: ['artist', 'asc']
    }
 return dataObject; 
}
function sendAjaxRequest(url, dataObject){
    $.post(url, JSON.stringify(dataObject), function(data){
        $('#resultString').text(data); 
    });
}

function returnSingleInputVal(inputName, inputArray){
    for (var a = 0; a <= inputArray.length -1; a++){
    if ( inputArray[a].name == inputName){
        return inputArray[a].value; 
    }
  }
}

Calling server data via JSON string

2 Answers2