У меня есть API, и я хочу распечатать данные из API в свой HTML, указанный в скрипте. в API у меня есть Lopped array. В браузере $ {user.TestUrlTable} отображается только [Object Object], но я хочу получить значения в объекте TestUrlTable, который имеет некоторые другие значения, такие как TestUrl, Result и другие.
- Javascript код работает для основных объектов, таких как: IpAdd, PortNo, страна, доступность, LasteDateFound
- Но проблема заключается в печати значений объекта TestUrlTable, например: TestUrl, Result, LastTested.
- Эти значения Должны быть напечатаны для данного IpAdd.
Данные API:
[{
"IpAdd": "1.10.227.44",
"PortNo": "8080",
"country": "Thailand",
"availability": "Available",
"LasteDateFound": "6/21/2020",
"TestUrlTable": [{
"id": 937,
"TestUrl": "http://www.google.com",
"Result": "Working",
"LastTested": "2020-06-21T01:04:37.143"
},
{
"id": 938,
"TestUrl": "https://www.microsoft.com",
"Result": "Working",
"LastTested": "2020-06-21T01:05:19.14"
},
{
"id": 939,
"TestUrl": "https://www.w3schools.com",
"Result": "Working",
"LastTested": "2020-06-21T01:05:48.413"
}
]
},
{
"IpAdd": "102.164.248.113",
"PortNo": "8080",
"country": "Equatorial Guinea",
"availability": "Available",
"LasteDateFound": "6/21/2020",
"TestUrlTable": [{
"id": 940,
"TestUrl": "http://www.google.com",
"Result": "Working",
"LastTested": "2020-06-21T01:05:49.693"
}]
},
{
"IpAdd": "103.122.74.146",
"PortNo": "8080",
"country": "Bangladesh - Dhaka",
"availability": "Available",
"LasteDateFound": "6/21/2020",
"TestUrlTable": []
}, {
"IpAdd": "103.151.47.213",
"PortNo": "8080",
"country": "China",
"availability": "Available",
"LasteDateFound": "6/21/2020",
"TestUrlTable": []
}
]
Javascript Код
<script>
let users = [];
const api_url = "http://someapi.com/api";
async function getData() {
const response = await fetch(api_url);
const data = await response.json();
console.log(data);
for (user of data) {
users.push(
`<div class="col-md-3 col-sm-10 col-xs-10">
<div class="pricing-table">
<div class="pricing-header">
<p><h3 style="color:white">${user.IpAdd}<h3></p>
</div>
<div class="pricing-list">
<ul>
<li><i class="fa fa-calendar"></i><span>${user.LasteDateFound}</span></li>
<li><i class="fa fa-search"></i><span>${user.availability}</span></li>
<li><i class="fa fa-lock"></i><span>${user.PortNo}</span></li>
<li><i class="fa fa-mail"></i><span>${user.TestUrlTable}</span></li>
</ul>
</div>
</div>
</div>`
);
}
document.getElementById("results").innerHTML = users.join("");
}
getData();
</script>
HTML Файл
<body>
<section id="pricing-table">
<div class="container">
<div class="row">
<div id = "AdjResultsDiv">
<div class="pricing" id="results">
</div>
</div>
</div>
</div>
</section>
<!-- Table Section End -->
</body>