如何从 json 响应 javascript 中选取特定数据
How to pick specfic data from json response javascript
如何从 JSON 响应中选取特定数据 javascript
背景信息
我正在尝试创建一个应用程序来查看来自 haveibeenpawned 的 API 的数据。我不想直接从 javascript 调用 API，所以我自己制作了 API 作为中间人，效果很好。
问题
当我调用 API 时，它 return 包含所有数据，但是当我尝试 select 使用 data2.Domain 时，它 return 该数据（特别是域） =]未定义。现在，我还使用了我的另一个 API 从 haveibeenpawned 获取数据，但信息不同，当我传递这样的数据时，它可以工作并且不会 return 未定义。
我试过的
- 我试过按照某些人的建议通过
JSON.parse(data2)[0].username 使它成为一个对象，但这只会给我另一个错误，如果我之前尝试的方法与 API 的另一部分一起工作，我不明白为什么它在这里不起作用。
Json returned（API 不适用于 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 \"JimScott.Sec@protonmail.com\".",
"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（与 data.DATA_I_WANT 一起工作的 API）
[
{
"Name": "Canva"
},
{
"Name": "Minehut"
},
{
"Name": "Pixlr"
},
{
"Name": "Quidd"
},
{
"Name": "Teespring"
},
{
"Name": "Zynga"
}
]
我的javascript（不好意思没用过JS）
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 class="" 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 class="" 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)
}
}
}
我的HTML
<div class="p-2">
<table class="table table-hover table-dark">
<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>
我的最终目标是什么
我的最终目标只是让我的 API 的数据显示在我的 HTML table 上，而且我的 API 还没有密码保护它所以请随时调用它来测试它为什么不工作。
getMoreData 总是 return 一个空数组，因为当 promise 被解析时值会更新
您必须 return $.ajax 和 await 生成的承诺
像这样
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 class="" 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 class="p-2">
<table class="table table-hover table-dark">
<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>
如何从 JSON 响应中选取特定数据 javascript
背景信息
我正在尝试创建一个应用程序来查看来自 haveibeenpawned 的 API 的数据。我不想直接从 javascript 调用 API，所以我自己制作了 API 作为中间人，效果很好。
问题
当我调用 API 时，它 return 包含所有数据，但是当我尝试 select 使用 data2.Domain 时，它 return 该数据（特别是域） =]未定义。现在，我还使用了我的另一个 API 从 haveibeenpawned 获取数据，但信息不同，当我传递这样的数据时，它可以工作并且不会 return 未定义。
我试过的
- 我试过按照某些人的建议通过
JSON.parse(data2)[0].username使它成为一个对象，但这只会给我另一个错误，如果我之前尝试的方法与 API 的另一部分一起工作，我不明白为什么它在这里不起作用。
Json returned（API 不适用于 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 \"JimScott.Sec@protonmail.com\".",
"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（与 data.DATA_I_WANT 一起工作的 API）
[
{
"Name": "Canva"
},
{
"Name": "Minehut"
},
{
"Name": "Pixlr"
},
{
"Name": "Quidd"
},
{
"Name": "Teespring"
},
{
"Name": "Zynga"
}
]
我的javascript（不好意思没用过JS）
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 class="" 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 class="" 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)
}
}
}
我的HTML
<div class="p-2">
<table class="table table-hover table-dark">
<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>
我的最终目标是什么
我的最终目标只是让我的 API 的数据显示在我的 HTML table 上，而且我的 API 还没有密码保护它所以请随时调用它来测试它为什么不工作。
getMoreData 总是 return 一个空数组，因为当 promise 被解析时值会更新
您必须 return $.ajax 和 await 生成的承诺
像这样
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 class="" 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 class="p-2">
<table class="table table-hover table-dark">
<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>