Estoy tratando de una integración en mi sitio web. Recuperé datos con éxito utilizando XMLHttpRequest. Sin embargo, no necesito toda la información, solo necesito información específica.
Este es mi código JavaScript
`
<div id="demo"> <button type="button" onclick="loadXMLDoc()">Change Content</button> </div> <script> function loadXMLDoc() { var url = "https://api.paystack.co/transaction/"; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 ) { document.getElementById("demo").innerHTML = xhr.responseText; console.log(xhr.responseText); } }; xhr.open("GET", url); xhr.setRequestHeader("Authorization", "Bearer secret key"); xhr.send(); } </script>`
Esta es la respuesta en la consola, no toda, solo muestra una parte.
{ "status": true, "message": "Transactions retrieved", "data": [ { "id": 1806822806, "domain": "test", "status": "abandoned", "reference": "773768164", "amount": 56050, "message": null, "gateway_response": "The transaction was not completed", "paid_at": null, "created_at": "2022-05-09T12:17:25.000Z", "channel": "card", "currency": "NGN", "ip_address": "197.210.55.168", "metadata": { "customer": { "id": 79455936, "first_name": "", "last_name": "", "email": "sdfeferw@lkkil.com", "phone": "", "metadata": null, "customer_code": "CUS_xxxxxx", "risk_action": "default" }, },La información que necesito es la
Quiero mostrarlos en un DIV, por favor, ¿cómo lo hago?
xhr.responseText es una cadena JSON. Debe convertirlo en un objeto JS y seleccionar solo las propiedades necesarias. Me gusta
const jsonResponse = JSON.parse(xhr.responseText); const { metadata, amount, created_at } = jsonResponse.data; const { first_name, last_name } = metadata.customer; const result = { first_name, last_name, created_at, amount }; document.getElementById("demo").innerHTML = JSON.stringify(result);