I’ve searched JSON guides for a while and all I find is always those that “explain” this like so:
<code>let jsonString = {Item: "Text"};
let jsObject = JSON.parse(jsonString);
</code>
<code>let jsonString = {Item: "Text"};
let jsObject = JSON.parse(jsonString);
</code>
let jsonString = {Item: "Text"};
let jsObject = JSON.parse(jsonString);
While there clearly isn’t any connection of some sort between creating JS OBJECTS and fetching JSON STRINGS.
They don’t even show how to use this method Live with an actual JSON file.
I tried to do that myself in many ways but I can’t figure this out.
How to actually convert JSON STRINGS into JS OBJECTS/ARRAYS – using the JSON fetch() method?
<code>let inputField = document.getElementById('input');
// FIRST TRY:
fetch(`a.json`)
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log(data);
// THIS (DESIRED WAY) DOES NOT WORK:
// let array = JSON.parse(data);
// console.log('this is the new way');
// console.log(array);
// console.log('---- ---- ---- ----');
// THIS (DESIRED WAY) DOES NOT WORK ^^
// AS YOU CAN SEE: 'data' DOES NOT ACT AS AN ARRAY:
// for (let a = 0; a < data.length; a++) {
// let p = document.createElement('p');
// p.textContent = data[a];
// inputField.appendChild(p);
// };
// AS YOU CAN SEE: 'data' DOES NOT ACT AS AN ARRAY ^^
// THIS (OLD WAY) DOES WORK:
// for (let item of data) {
// const part1 = document.createElement('span');
// part1.textContent = item.part1;
// inputField.appendChild(part1);
// };
// THIS (OLD WAY) DOES WORK ^^
});
// FIRST TRY ^^
// SECOND TRY:
let jso = fetch(`a.json`)
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log(data);
// THIS (DESIRED WAY) DOES NOT WORK:
// let array = JSON.parse(data);
// console.log('this is the new way');
// console.log(array);
// console.log('---- ---- ---- ----');
// THIS (DESIRED WAY) DOES NOT WORK ^^
// AS YOU CAN SEE: 'data' DOES NOT ACT AS AN ARRAY:
// for (let a = 0; a < data.length; a++) {
// let p = document.createElement('p');
// p.textContent = data[a];
// inputField.appendChild(p);
// };
// AS YOU CAN SEE: 'data' DOES NOT ACT AS AN ARRAY ^^
// THIS (OLD WAY) DOES WORK:
// for (let item of data) {
// const part1 = document.createElement('span');
// part1.textContent = item.part1;
// inputField.appendChild(part1);
// };
// THIS (OLD WAY) DOES WORK ^^
});
let array = JSON.parse(jso);
console.log('this is the new way');
console.log(array);
console.log('---- ---- ---- ----');
// SECOND TRY ^^
</code>
<code>let inputField = document.getElementById('input');
// FIRST TRY:
fetch(`a.json`)
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log(data);
// THIS (DESIRED WAY) DOES NOT WORK:
// let array = JSON.parse(data);
// console.log('this is the new way');
// console.log(array);
// console.log('---- ---- ---- ----');
// THIS (DESIRED WAY) DOES NOT WORK ^^
// AS YOU CAN SEE: 'data' DOES NOT ACT AS AN ARRAY:
// for (let a = 0; a < data.length; a++) {
// let p = document.createElement('p');
// p.textContent = data[a];
// inputField.appendChild(p);
// };
// AS YOU CAN SEE: 'data' DOES NOT ACT AS AN ARRAY ^^
// THIS (OLD WAY) DOES WORK:
// for (let item of data) {
// const part1 = document.createElement('span');
// part1.textContent = item.part1;
// inputField.appendChild(part1);
// };
// THIS (OLD WAY) DOES WORK ^^
});
// FIRST TRY ^^
// SECOND TRY:
let jso = fetch(`a.json`)
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log(data);
// THIS (DESIRED WAY) DOES NOT WORK:
// let array = JSON.parse(data);
// console.log('this is the new way');
// console.log(array);
// console.log('---- ---- ---- ----');
// THIS (DESIRED WAY) DOES NOT WORK ^^
// AS YOU CAN SEE: 'data' DOES NOT ACT AS AN ARRAY:
// for (let a = 0; a < data.length; a++) {
// let p = document.createElement('p');
// p.textContent = data[a];
// inputField.appendChild(p);
// };
// AS YOU CAN SEE: 'data' DOES NOT ACT AS AN ARRAY ^^
// THIS (OLD WAY) DOES WORK:
// for (let item of data) {
// const part1 = document.createElement('span');
// part1.textContent = item.part1;
// inputField.appendChild(part1);
// };
// THIS (OLD WAY) DOES WORK ^^
});
let array = JSON.parse(jso);
console.log('this is the new way');
console.log(array);
console.log('---- ---- ---- ----');
// SECOND TRY ^^
</code>
let inputField = document.getElementById('input');
// FIRST TRY:
fetch(`a.json`)
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log(data);
// THIS (DESIRED WAY) DOES NOT WORK:
// let array = JSON.parse(data);
// console.log('this is the new way');
// console.log(array);
// console.log('---- ---- ---- ----');
// THIS (DESIRED WAY) DOES NOT WORK ^^
// AS YOU CAN SEE: 'data' DOES NOT ACT AS AN ARRAY:
// for (let a = 0; a < data.length; a++) {
// let p = document.createElement('p');
// p.textContent = data[a];
// inputField.appendChild(p);
// };
// AS YOU CAN SEE: 'data' DOES NOT ACT AS AN ARRAY ^^
// THIS (OLD WAY) DOES WORK:
// for (let item of data) {
// const part1 = document.createElement('span');
// part1.textContent = item.part1;
// inputField.appendChild(part1);
// };
// THIS (OLD WAY) DOES WORK ^^
});
// FIRST TRY ^^
// SECOND TRY:
let jso = fetch(`a.json`)
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log(data);
// THIS (DESIRED WAY) DOES NOT WORK:
// let array = JSON.parse(data);
// console.log('this is the new way');
// console.log(array);
// console.log('---- ---- ---- ----');
// THIS (DESIRED WAY) DOES NOT WORK ^^
// AS YOU CAN SEE: 'data' DOES NOT ACT AS AN ARRAY:
// for (let a = 0; a < data.length; a++) {
// let p = document.createElement('p');
// p.textContent = data[a];
// inputField.appendChild(p);
// };
// AS YOU CAN SEE: 'data' DOES NOT ACT AS AN ARRAY ^^
// THIS (OLD WAY) DOES WORK:
// for (let item of data) {
// const part1 = document.createElement('span');
// part1.textContent = item.part1;
// inputField.appendChild(part1);
// };
// THIS (OLD WAY) DOES WORK ^^
});
let array = JSON.parse(jso);
console.log('this is the new way');
console.log(array);
console.log('---- ---- ---- ----');
// SECOND TRY ^^
JSON file:
<code>[
{
"Item": "Text"
}
]
</code>
<code>[
{
"Item": "Text"
}
]
</code>
[
{
"Item": "Text"
}
]
HTML:
<code><!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="input"></div>
<script src="a.js"></script>
</body>
</html>
</code>
<code><!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="input"></div>
<script src="a.js"></script>
</body>
</html>
</code>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="input"></div>
<script src="a.js"></script>
</body>
</html>
4