Estoy desarrollando un sitio web con express y ejs. Me metí en un problema en el que necesito llamar a una API a través de ajax. El problema está en un botón al hacer clic, estoy pasando dos valores a los datos de ajax. pero da error, lo intenté de muchas maneras y estoy en mal estado. Soy un novato, encuentra mi código a continuación.
const parsedData = JSON.parse(localStorage.getItem('myData')); const container = document.getElementById('s1'); parsedData.data.rows.forEach((result, idx) => { var a = result.master_id; var b = result.session_name; console.log(a,b,"a","b") var userData = {"pid":a,"session" :b}; console.log(userData,"userData"); sessionStorage.setItem("user", JSON.stringify(userData)); console.log(userData,"data for api"); const card = document.createElement('div'); card.classList = 'card'; const content = ` <div class="row"> <div class="card-body" onclick="graphApi()"> </div> </div> `; container.innerHTML += content; }); function graphApi(){ var apiValue =JSON.parse( sessionStorage.getItem("user")); console.log(apiValue, "value from card"); $.ajax({ type: "POST", data: apiValue, dataType:"json", url: "http://localhost:5000/graphFromcsv", success: function(data) { console.log(data,"graph api"); } error: function(err){ alert("graph api failed to load"); console.log(err); }, });Siempre obtengo este pid en un valor de api indefinido y 400 badrequest. pero si uso datos sin procesar como,
{ "pid":"WE6", "session":"W.csv" }en lugar de apiValue, mi ajax es un éxito y estoy obteniendo los datos. Estoy usando estos datos para trazar un gráfico de líneas múltiples. Cualquier ayuda es apreciada.
Debe corregir la clave de data y su valor (el valor debe ser una cadena en el caso de datos json) y también agregar la clave contentType como
$.ajax({ type: "POST", data: sessionStorage.getItem("user") || '{}', dataType: "json", contentType: "application/json", url: "http://localhost:5000/graphFromcsv", success: function (data) { console.log(data, "graph api"); }, error: function (err) { alert("graph api failed to load"); console.log(err); }, }); Nota: en el backend ( ExpressJS ), asegúrese de estar utilizando el middleware body-parser correcto como app.use(express.json());
Supongamos que su apiValue contiene {"pid":"WE6", "session":"W.csv" } luego body: { apiValue } será igual a:
body: { apiValue: { "pid":"WE6", "session":"W.csv" } } Pero si usa el enlace al objeto como body: apiValue (sin corchetes) js lo construirá como:
body: { "pid":"WE6", "session":"W.csv" }