How to pick specific data from JSON response javascript
Background-Info
I'm trying to create an application to view data from haveibeenpawned's API. I don't want to call the API directly from javascript so I made my own API to act as a middle man which works just fine.
Issue
When I call the API it returns all the data but when I try to select that data (specifically Domain) with data2.Domain it returns undefined. Now I also used another API of mine to get data from haveibeenpawned but Different information and when I pass data like that it works and doesn't return undefined.
What I've tried
- I've tried making this an object as some people suggested by doing
JSON.parse(data2)[0].usernamebut that just gives me another error and if the method I tried before works with another part of the API I don't understand why it won't work here.
Json returned (the API that doesn't work with data.DATA_I_WANT)
{
"Name": "Canva",
"Title": "Canva",
"Domain": "canva.com",
"BreachDate": "2019-05-24",
"AddedDate": "2019-08-09T14:24:01Z",
"ModifiedDate": "2019-08-09T14:24:01Z",
"PwnCount": 137272116,
"Description": "In May 2019, the graphic design tool website <a href=\"https://support.canva.com/contact/customer-support/may-24-security-incident-faqs/\" target=\"_blank\" rel=\"noopener\">Canva suffered a data breach</a> that impacted 137 million subscribers. The exposed data included email addresses, usernames, names, cities of residence and passwords stored as bcrypt hashes for users not using social logins. The data was provided to HIBP by a source who requested it be attributed to \"[email protected]\".",
"LogoPath": "https://haveibeenpwned.com/Content/Images/PwnedLogos/Canva.png",
"DataClasses": [
"Email addresses",
"Geographic locations",
"Names",
"Passwords",
"Usernames"
],
"IsVerified": true,
"IsFabricated": false,
"IsSensitive": false,
"IsRetired": false,
"IsSpamList": false,
"IsMalware": false
}
Json returned (The API that does work with data.DATA_I_WANT)
[
{
"Name": "Canva"
},
{
"Name": "Minehut"
},
{
"Name": "Pixlr"
},
{
"Name": "Quidd"
},
{
"Name": "Teespring"
},
{
"Name": "Zynga"
}
]
My javascript (sorry if its not good never used JS before)
function getData(){
console.log('getting data')
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const email = urlParams.get('email')
var myArray = []
var status = 0
var URL = 'https://securityvisit.api.anonyomail.com/search/email?email=' email
$.ajax({
method:"GET",
url: URL,
complete:function(response){
status = response.status
myArray = response.responseJSON
buildTable(myArray, status)
console.log(myArray)
console.log(status)
}
})
function getMoreData(service){
var myArray = []
var URL = 'https://securityvisit.api.anonyomail.com/search/service?service=' service
$.ajax({
method:"GET",
url: URL,
complete:function(response){
myArray = response.responseJSON
console.log(myArray)
}
})
return(myArray)
}
function buildTable(data, status){
var table = document.getElementById('dataTable')
var info = document.getElementById('main_info')
console.log('Status: ' status)
if(status == 500){
var html = `
<h1 style="color:limegreen ">Email not comprimised!</h1>
<br>
<h3 style="color:white;">No data to be shown</h3>
`
}else{
console.log('Displaying compromising information')
// var html = `
// <h1 style="color:red">Email is comprimised!</h1>
// <br>
// `
// info.innerHTML = html
table.innerHTML = null
for (var i = 0; i < data.length; i ){
var data2 = getMoreData(data[i].Name)
var row = `<tr>
<td><img src='${data2.LogoPath}'></img></td>
<td>${data[i].Name}</td>
<td>${data2.username}</td>
<td>${data2.BreachDate}</td>
<td>${data2.Domain}</td>
<td>${data2.DataClasses}</td>
</tr>`
table.innerHTML = row
console.log('Domain: ' data2.Domain)
}
}
}
My HTML
<div >
<table >
<tr>
<th>Logo</th>
<th>Service</th>
<th>Compromised On</th>
<th>Domain</th>
<th>Compromised Data</th>
<th>Comprimised information</th>
</tr>
<tbody id="dataTable">
</tbody>
</table>
<tbody id="main_info">
</tbody>
</div>
What my end goal is
My end goal is just to get the data from my API displayed on my HTML table also my API doesn't have a password protecting it yet so feel free to make calls to it to test out why its not working.
CodePudding user response：
getMoreData always return an empty array because the value is updated when the promise is resolved
you have to return the promise generated by $.ajax and await for the result
like this
function getData() {
console.log('getting data')
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const email = urlParams.get('email')
var myArray = []
var status = 0
var URL = 'https://securityvisit.api.anonyomail.com/search/email?email=' email
$.ajax({
method: "GET",
url: URL,
complete: function(response) {
status = response.status
myArray = response.responseJSON
buildTable(myArray, status)
console.log(myArray)
console.log(status)
}
})
}
function getMoreData(service) {
var myArray = []
var URL = 'https://securityvisit.api.anonyomail.com/search/service?service=' service
return $.ajax({
method: "GET",
url: URL,
complete: function(response) {
myArray = response.responseJSON
console.log(myArray)
}
})
}
async function buildTable(data, status) {
var table = document.getElementById('dataTable')
var info = document.getElementById('main_info')
console.log('Status: ' status)
if (status == 500) {
var html = `<h1 style="color:limegreen ">Email not comprimised!</h1><br><h3 style="color:white;">No data to be shown</h3>`
} else {
console.log('Displaying compromising information')
table.innerHTML = null
for (var i = 0; i < data.length; i ) {
var data2 = await getMoreData(data[i].Name)
var row = `<tr>
<td><img src='${data2.LogoPath}'></img></td>
<td>${data[i].Name}</td>
<td>${data2.username}</td>
<td>${data2.BreachDate}</td>
<td>${data2.Domain}</td>
<td>${data2.DataClasses}</td>
</tr>`
table.innerHTML = row
console.log('Domain: ' data2.Domain)
}
}
}
getData()<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<table >
<tr>
<th>Logo</th>
<th>Service</th>
<th>Compromised On</th>
<th>Domain</th>
<th>Compromised Data</th>
<th>Comprimised information</th>
</tr>
<tbody id="dataTable">
</tbody>
</table>
<tbody id="main_info">
</tbody>
</div>