Как выбрать определенные переменные, полученные с помощью XMLHttpRequest

Я пытаюсь интегрировать на свой сайт. Я успешно получил данные с помощью XMLHttpRequest, однако мне не нужна вся информация, мне нужна только конкретная информация.

Это мой код JavaScript
`

Использование объекта XMLHttpRequest

 <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.info(xhr.responseText);
   
 }
};

 xhr.open("GET", url);

  xhr.setRequestHeader("Authorization", "Bearer secret key");

 xhr.send();

}
 </script>

`

Это ответ на консоли, а не весь, просто показывается какая-то часть

{ 
"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": "[email protected]", 
                        "phone": "", 
                        "metadata": null, 
                        "customer_code": "CUS_xxxxxx", 
                        "risk_action": "default" 
                    }, 
                    
                        
            },

Информация, которая мне нужна,

  1. Дата создания
  2. Имя
  3. Фамилия
  4. Количество

Я хочу отобразить их в DIV, пожалуйста, как мне это сделать?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
17
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

xhr.responseText — это строка JSON. Вам нужно преобразовать его в объект JS и выбрать только необходимые свойства. Нравиться

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);

Другие вопросы по теме