CODEWITHSUNDEEP
jquery
Meules
Meules

Reputation: 1389

Jquery repeating each function, writing less code

I've searched the forums for this but I'm not sure where to start with this.

I was wondering if it's possible to create a reusable $.getJSON or $.each() function to create product html. To clarify, I'm creating a site which has multiple getjson functions actually doing the same work over and over again.

So function a() does a json request and with that data it creates some product html. Function b() does a json request to a different location but creates the same product html.

I'm just trying to write with less code :)

To give an example:

function abc() {
  $.getJSON(url-to-a, function(data) {
    var products = [];
      $.each(data.bundle.products, function(index, product) {
        var productHtml = '<div class="item">'+ product.title + '</div>'
        products.push(productHtml);
      });
      products.join('');
      container.html(products);
   });
 }

function xyz() {
  $.getJSON(url-to-different-location, function(data) {
    var products = [];
      $.each(data.search.products, function(index, product) {
        var productHtml = '<div class="item">'+ product.title + '</div>'
        products.push(productHtml);
      });
      products.join('');
      container.html(products);
   });
 }

As you can see it are different functions but mostly doing the same work. Especially in the $.each() function.

What I was wondering if it's possible to create something like this:

function createProductContentForAllFunctions(url, getThisData, container){
 return $.get(url, function(data){
    var products = [];
    $.each(getThisData, function(i, product) {
      var productHtml = '<div class="item">'+ product.title + '</div>'
      products.push(productHtml);
    });
    products.join('');
    container.html(products);
   });
  }

and then call the function something like:

function abc() {
 createProductContentForAllFunctions('url-to-a', data.bundle.products, '.bundle')
}

function xyz() {
 createProductContentForAllFunctions('url-to-different-location', data.search.products, '.search')
}

To be honoust I'm not sure where to start :) If I use the code in my example, so createProductContentForAllFunctions('url-to-different-location', data.search.products, '.search') I get errors like uncaught TypeError: cannot use 'in' operator to search for "length" in "product"

So my question is if it's even possible? Is it worth trying? And where should I start?

Upvotes: 1

Views: 54

Answers (2)

skobaljic
skobaljic

Reputation: 9614

You must provide all parameters you use in the function. Simply go this way:

function getProducts(url, mode, container) {
  $.getJSON(url, function(data) {
    var products = [];
    $.each(data[mode]products, function(index, product) {
      var productHtml = '<div class="item">'+ product.title + '</div>'
      products.push(productHtml);
    });
    products.join('');
    container.html(products);
  });
};
getProducts('/url1', 'bundle', $('.some-container1'));
getProducts('/url2', 'search', $('.some-container2'));

Please note:

Properties of JavaScript objects can also be accessed or set using a bracket notation. Objects are sometimes called associative arrays, since each property is associated with a string value that can be used to access it.

More about Working with JS Objects here.

Upvotes: 2

Shubham Raturi
Shubham Raturi

Reputation: 286

This seems you have a different index in array search and bundle if it is possible to make them the same then it would be easier to handle in one function, if not then you can do like this.

abc('url-to-a','bundle');

function abc(url,type) {
  $.getJSON(url, function(data) {
    var dataArr;

    if(type=='search'){ // if type search then change the store search data
        var dataArr = data.search.products
    }
    elseif(type=='bundle'){ // if type bundle then change the store bundle data
        var dataArr = data.bundle.products
    }else{
        return "your message";
    }

    var products = [];
      $.each(dataArr, function(index, product) { // dataArr in each function
        var productHtml = '<div class="item">'+ product.title + '</div>'
        products.push(productHtml);
      });
      products.join('');
      container.html(products);
   });
 }

Thanks

Upvotes: 0

Related Questions