how to increment product quantity with jquery append function

Question

let qnty = 1;

// adding quantity
function addQuantity(id) {
  qnty++;
  $(`#product${id}p`).html(qnty)
  console.log('add', id)
}

// remove quantity
function removeQuantity(id) {
  qnty--;
  $(`#product${id}.value`).html(qnty)
  console.log('remove', id)
}

//fetching data from api
function getProductsByWholeSellerId(id) {
  $.get('https://netco-indo-test.nfrnds.net:20003/fmcg-dd/catlog?whsId=' + `${id}`, (response, status) => {
    let productArray = response.products
    let categoryArray = response.categories;
    let categoryName1 = "";

    function getCategoryById(response, id) {
      let data = response.filter(
        category => category.productCategoryId === id
      )
      return data[0].categoryName
    }
    productArray.forEach(product => {
      // console.log(product)
      let brandName = product.brandName;
      let productName = product.productName;
      let categoryid = product.categoryId;
      let categoryName = getCategoryById(categoryArray, categoryid)
      let productId = product.productId
      let quantity = 1
      let image = `https://res.cloudinary.com/nfrnds/image/upload/fmcgdd` + product.smallImgUrl;
      let object = {
        productName: productName,
        productId: productId,
        quantity: 1,
        categoryName: categoryName,
        categoryId: categoryid,
        productImg: image,
        price: 0
      }

      // console.log(object)
      if (product.smallImgUrl !== null && product.smallImgUrl !== "") {

        //Using productTag variable that contains html content for creating product card 
        let productTag =`

  
    
    
      ${productName}
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. 
      Price: 100 $

      
        -
        1
        +
      
    

    
  

`;
        $('ul').append(productTag)
      }
    })
  })
}

getProductsByWholeSellerId(30972)
// the "quatity" class contains elements to increase and decrease product quantity by calling a function ,the function is called not changing the value of the quantity

user_10606400 · Answer

You can pass this inside your function where this refer to current div which is clicked then use $(el).siblings(".value").html() to get value of .value div near your div which is been clicked then either add 1 or subtract 1 from total then assign new values to your div using .html()

Demo Code :

//just for demo...supoose data look like this :)
var response = {
  "products": [{
    "brandName": "A",
    "productName": "Somethings",
    "categoryId": "1",
    "productId": "1",
    "smallImgUrl": "something.png"
  }, {
    "brandName": "B",
    "productName": "2 Somethings",
    "categoryId": "2",
    "productId": "2",
    "smallImgUrl": "something.png"
  }]
}

function addQuantity(el) {
//get value  div and change value there
$(el).siblings(".value").html(parseInt($(el).siblings(".value").html()) + 1)
}

function removeQuantity(el) {
//get value  div and change value there
$(el).siblings(".value").html(parseInt($(el).siblings(".value").html()) - 1)

}
function getProductsByWholeSellerId(id) {

  /*  $.get('https://netco-indo-test.nfrnds.net:20003/fmcg-dd/catlog?whsId=' + `${id}`, (response, status) => {

      let categoryArray = response.categories;
      let categoryName1 = "";


      function getCategoryById(response, id) {


        let data = response.filter(

          category => category.productCategoryId === id

        )

        return data[0].categoryName
      }*/

  let productArray = response.products
  productArray.forEach(product => {

    // console.log(product)

    let brandName = product.brandName;
    let productName = product.productName;
    let categoryid = product.categoryId;
    let categoryName = "somehtings " /*getCategoryById(categoryArray, categoryid)*/
    let productId = product.productId
    let quantity = 1
    let image = `https://res.cloudinary.com/nfrnds/image/upload/fmcgdd` + product.smallImgUrl;


    let object = {
      productName: productName,
      productId: productId,
      quantity: 1,
      categoryName: categoryName,
      categoryId: categoryid,
      productImg: image,
      price: 0
    }
    if (product.smallImgUrl !== null && product.smallImgUrl !== "") {
    //pass `this` inside function..where its refer to div which is clicked
      let productTag =

        `
                    

                        

                        
                            ${productName}
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. 
                            Price: 100 $


                            
                                -
                                1
                                +
                            
                        

                        
                    

                
`


      $('ul').append(productTag)
    }

  })

  /*})*/

}

getProductsByWholeSellerId(30972)

user_3926618 · Answer

use could try this


       
       1
       +

$(#product${id}.value).html(qnty) wrong it should be

$(#product${id}p).html(qnty)

how to increment product quantity with jquery append function

2 Answers