1

Necesito llamar a la función editProduct() desde un botón en el html. Lo que hice fué agregarle al botón onclick="editProduct()". Éste es el código javascript:

const API = (function() {
  /**
   * Obtiene una orden desde el backend
   *
   * @param {Number} orderId id de la orden
   */
  function getOrder(orderId) {
    return fetch('/order/1')
      .then(function toJson(r) {
        return r.json();
      });
  }

  /**
   * Obtiene todos los productos desde el backend
   *
   */
  function getProducts() {
    return fetch('/product')
      .then(function toJson(r) {
        return r.json();
      });
  }

  /**
   * Obtiene todos los productos pertenecientes a una orden desde el backend
   *
   */
  function getOrderProduct(orderId, productId) {
    return fetch(`/order/${ orderId }/product/${ productId }`)
      .then(function toJson(r) {
        return r.json();
      });
  }

  /**
   * Edita un producto de una orden
   *
   */
  function editProduct(orderId, productId, quantity, product) {
    const data = JSON.stringify({
      quantity: quantity,
      product: product
    })

    return fetch(`/order/${ orderId }/product/${ productId }`, {
      method: 'PUT',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: data
    }).then(function toJson(r) {
      return r.json();
    });
  }

  /**
   * Agrega un producto a una orden
   **/
  function addProduct(orderId, product, quantity) {
    const data = JSON.stringify({
      quantity: quantity,
      product: product
    })

    return fetch(`/order/${ orderId }/product`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: data
    }).then(function toJson(r) {
      return r.json();
    });
  }

  return {
    getOrder,
    getProducts,
    getOrderProduct,
    editProduct,
    addProduct
  }
})()
<button onclick="editProduct()">Botón</button>

Aclaro además que el archivo se encuentra en static/js/api.js

2
  • Hola Luis, te damos la bienvenida a Stack Overflow en español. Completa el recorrido de bienvenida para aprender cómo funciona el sitio en general y lee Cómo preguntar donde encontrarás consejos sobre cómo mejorar tus preguntas.
    – Alvaro Montoro
    el 1 may. 2018 a las 14:13
  • Además lee sobre cómo crear un ejemplo mínimo verificable. En muchas de las preguntas de programación web se puede incluir un ejemplo ejecutable que permite al resto de usuarios ver el problema, y de ese modo pueden identificar la causa y ayudarte con una solución.
    – Alvaro Montoro
    el 1 may. 2018 a las 14:14

3 respuestas 3

2

El metodo editProduct() es privado al funcion anomina (function(){ ... }) pero el evento onclick espera que sea publica. Tienes hacer la funcion public para que el onclick pueda acceder a ella:

cons API = (function(){
  window.editProduct = function(){
    //...
  }
});

Aunque entiendo que lo que quieres es poder acceder a la funcion en la forma API.editProduct(). Para eso tendras que crear la forma en como lo declaras utilizando un objeto:

var API = {
  editProduct : function(){
    //...
 }
};

Y entonces puedes hacer lo siguiente:

<button onclick="API.editProduct()">Editar producto</button>
0

El problema es que no estás definiendo la función editProduct en sí, sino un objeto (API) que contiene diversas funciones (siendo editProduct una de ellas). Entonces para acceder a las diferentes funciones, no las llamarías directamente haciendo onclick="editProduct()" sino que tendrías que acceder a la función del objeto/API que has creado: onclick="API.editProduct()"

Con ese cambio, ya funcionará:

const API = (function() {
  /**
   * Obtiene una orden desde el backend
   *
   * @param {Number} orderId id de la orden
   */
  function getOrder(orderId) {
    return fetch('/order/1')
      .then(function toJson(r) {
        return r.json();
      });
  }

  /**
   * Obtiene todos los productos desde el backend
   *
   */
  function getProducts() {
    return fetch('/product')
      .then(function toJson(r) {
        return r.json();
      });
  }

  /**
   * Obtiene todos los productos pertenecientes a una orden desde el backend
   *
   */
  function getOrderProduct(orderId, productId) {
    return fetch(`/order/${ orderId }/product/${ productId }`)
      .then(function toJson(r) {
        return r.json();
      });
  }

  /**
   * Edita un producto de una orden
   *
   */
  function editProduct(orderId, productId, quantity, product) {
    console.log("Dentro de EditProduct");
    const data = JSON.stringify({
      quantity: quantity,
      product: product
    })

    return fetch(`/order/${ orderId }/product/${ productId }`, {
      method: 'PUT',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: data
    }).then(function toJson(r) {
      return r.json();
    });
  }

  /**
   * Agrega un producto a una orden
   **/
  function addProduct(orderId, product, quantity) {
    const data = JSON.stringify({
      quantity: quantity,
      product: product
    })

    return fetch(`/order/${ orderId }/product`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: data
    }).then(function toJson(r) {
      return r.json();
    });
  }

  return {
    getOrder,
    getProducts,
    getOrderProduct,
    editProduct,
    addProduct
  }
})()
<button onclick="API.editProduct()">Botón</button>

0

No pude hacerlo funcionar. Entiendo que el archivo api.js lo usa index.js para cargar un producto por ejemplo. Pero no puedo editar uno cargado. Este es el código: https://github.com/luis-sama/ord

1
  • no debes usar una respuesta para responder a otra, utiliza en cambio la sección de comentarios el 1 may. 2018 a las 15:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.