const btn = document.querySelector('.btn');
const urls = [{
'url': 'https://www.discoveryvip.com/shared/books2.json',
'arr': 'books',
'title': 'Books List'
},
{
'url': 'https://www.discoveryvip.com/shared/people.json',
'arr': 'people',
'title': 'Friends List'
},
{
'url': 'https://www.discoveryvip.com/shared/coin.json',
'arr': 'data',
'title': 'BitCoin Currency'
}
];
const h1 = document.querySelector('h1');
h1.innerHTML = '';
const output = document.querySelector('.output');
const inputVal = document.querySelector('.val');
inputVal.value = 'test';
btn.textContent = 'Click Me';
btn.addEventListener('click', (e) => {
//console.log('ready');
const temp = urls[2];
//console.log(temp);
myURL(urls[0]);
})
urls.forEach((ele) => {
const btn1 = document.createElement('button');
btn1.classList.add('btn');
h1.append(btn1);
btn1.textContent = ele.title;
btn1.addEventListener('click', (e) => {
myURL(ele);
})
})
function myURL(myObj) {
let url = myObj.url;
fetch(url)
.then(rep => rep.text())
.then((data) => {
//let val = data.replace(/\s/g,'');
const json = JSON.parse(data);
output.innerHTML = url + '<br>';
maker(json[myObj.arr]);
//console.log(json);
//console.log(json);
})
.catch((err) => {
console.log(err);
})
}
function maker(arr) {
console.log(arr.length);
arr.forEach(el => {
//console.log(el);
const div = document.createElement('div');
div.classList.add('box');
output.append(div);
const entries = Object.entries(el);
console.log(entries);
div.innerHTML = 'Properties : ' + entries.length;
for (const obj of entries) {
console.log(obj);
div.innerHTML += `<br>${obj[0]} : ${obj[1]}`;
}
});
}
<!DOCTYPE html>
<html>
<head>
<title>JavaScript JSON</title>
<style>
.box{
padding:10px;
border: 1px solid #ddd;
width:80%;
margin:10px auto;
}
.btn{
padding : 10px;
font-size: 1em;
margin:5px;
border-radius: 15px;
}
</style>
</head>
<body>
<h1>JSON</h1>
<input type="text" class="val">
<button class="btn">Click</button>
<div class="output"></div>
<script src="app4.js"></script>
</body>
</html>
{
"data": [
{
"id": 1,
"name": "Bitcoin",
"symbol": "BTC",
"slug": "bitcoin",
"is_active": 1,
"first_historical_data": "2013-04-28T18:47:21.000Z",
"last_historical_data": "2019-04-05T20:44:01.000Z",
"platform": null
},
{
"id": 825,
"name": "Tether",
"symbol": "USDT",
"slug": "tether",
"is_active": 1,
"first_historical_data": "2015-02-25T13:34:26.000Z",
"last_historical_data": "2019-04-05T20:44:01.000Z",
"platform": {
"id": 83,
"name": "Omni",
"symbol": "OMNI",
"slug": "omni",
"token_address": "31"
}
},
{
"id": 1839,
"name": "Binance Coin",
"symbol": "BNB",
"slug": "binance-coin",
"is_active": 1,
"first_historical_data": "2017-07-25T04:30:05.000Z",
"last_historical_data": "2019-04-05T20:44:02.000Z",
"platform": {
"id": 1027,
"name": "Ethereum",
"symbol": "ETH",
"slug": "ethereum",
"token_address": "0xB8c77482e45F1F44dE1745F52C74426C631bDD52"
}
}
],
"status": {
"timestamp": "2018-06-02T22:51:28.209Z",
"error_code": 0,
"error_message": "",
"elapsed": 10,
"credit_count": 1
}
} {
"books": [{
"title": "Learn to Code",
"author": "John Smith",
"isbn": "324-23243"
}, {
"title": "The Adventures JSON",
"author": "Jason Jones",
"isbn": "3324-2-444"
}, {
"title": "New Objects",
"author": "Jane Doe",
"isbn": "2343-234-2433"
}]
}{
"people": [
{
"first": "Laurence"
, "last": "Svekis"
}
, {
"first": "Laurence"
, "last": "Svekis"
}
, {
"first": "Laurence"
, "last": "Svekis"
}
, {
"first": "Laurence"
, "last": "Svekis"
}
]
}