CODEWITHSUNDEEP
javascriptjqueryajax
Jack The Baker
Jack The Baker

Reputation: 1883

Set query strings to ajax data

This URL:

myurl.com/index?b=5&m=2

I got query string via a function and result is:

function getQuery(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0] + '=' + hash[1]);
        //vars[hash[0]] = hash[1];
    }
    return vars;
}

And:

var query = getQuery();

Return:

[
 0: "b=5"
 1: "m=2"
];

Now I want to add these to ajax data:

var queries = query.join('&');

$.ajax({
  type: "GET",
  data: {
    limit: limit,
    provId: provId,
    catid: catid
// add query strings after this
  },
  dataType: 'html',
  url: '/api/fetch.php?getBrowse&' + queries,
  success: function(data) {

  }
});

The AJAX URL should be like this:

api/fetch.php?getBrowse&b=5&m=2&limit=2&provId=1&catid=59

As you see I append queries at the end of URL in Ajax and it only working when these queries set, but if not, it return bad value or empty.

What I want is, add these queries like data structure,

Like this:

data: {
  b: bval,
  m: mbal,
limit: limit,
provId: provId,
catid: catid
},

But this is set manually, I don't know which queries are set, b, or m or etc. So I looking for a way to add every queries dynamically and if set append to AJAX data, if not don't append. any idea?

Upvotes: 2

Views: 338

Answers (4)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

I would use a different getQuery to get back the query parameters as an key/value object instead of an array.

function getQuery(){
   var params = {};
   window.location.search.slice(1).split('&').map(function(pair){
      var [key, value]= pair.split('=');  // using destructuring assignment
      params[key] = value;
   })
   return params;
}

now you can use Object.assign to merge two objects into one.

var urlParameters = getQuery(),
    initialOptions = {
        limit: limit,
        provId: provId,
        catid: catid
    },
    combinedData = Object.assign({}, initialOptions, urlParameters);

$.ajax({
  type: "GET",
  data: combinedData ,
  dataType: 'html',
  url: '/api/fetch.php?getBrowse',
  success: function(data) {

  }
});

Upvotes: 1

Harsh Chaurasia
Harsh Chaurasia

Reputation: 109

Use this See plunker for more detail Plunker for Extracting and appending querystring from URL

 var query  = getQuery();
URL = "api/fetch.php?";

var queries = "";
queries = query[0];
for (var i = 1; i < query.length; i++) {

    // Add to object
    queries += "&" + query[i];
}

console.log(URL+queries);

function getQuery()
{
  return [ "getBrowse", "b=5", "m=2" ];
}

Upvotes: 0

TLP
TLP

Reputation: 1288

You should probably check for each value in your data object if it exists before adding it to the query:

var query = "?";
var firstKey = true; 
for (var key in data) {
   if (data[key]) {
      if (!firstKey) {
         query += "&";
      }
      else {
          firstKey=false
      }
      query += data[key];
   }
}

Upvotes: 0

user7290573
user7290573

Reputation: 1330

Try this:

var returnData = [
    "b=5",
    "m=2"
];

var ajaxData = {};

for (var i = 0; i < returnData.length; i++) {
    // Split each array element into a pair, = delimited
    var pair = returnData[i].split("=");

    // Add to object
    ajaxData[pair[0]] = pair[1];
}

console.log(ajaxData);

Upvotes: 0

Related Questions