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 >'  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 >'  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 >'  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?

CodePudding user response：

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 >'  product.title   '</div>'
      products.push(productHtml);
    });
    products.join('');
    container.html(products);
  });
};
getProducts('/url1', 'bundle', $('.some-container1'));
getProducts('/url2', 'search', $('.some-container2'));

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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.

CodePudding user response：

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 >'  product.title   '</div>'
        products.push(productHtml);
      });
      products.join('');
      container.html(products);
   });
 }

Thanks