What are the steps for importing and utilizing data from a JSON object?

Question

What are the steps for importing and utilizing data from a JSON object?

After successfully importing data from a JSON file that was an Array, I've encountered a new challenge - my variable is now an object. My goal is to push all the questions from the object into an array and then display them on the HTML document. You can find the link to the JSON file in the code below.

Here is the JS code:


const myjson = 'http://tnij.xyz/bj5'; // LINK TO JSON FILE!
const questions = [];
fetch(myjson)
    .then(blob => blob.json('questions'))
    .then(data => questions.push(data))

console.log(questions);

javascript arrays json object

Answer 1

Answer №1

(DISCLAIMER: I faced difficulties running the code due to cross-origin restrictions)

To address your issue, you have the option to either concatenate the incoming values using `.concat` or utilize `.apply`. In my opinion, opting for `.concat` would be preferable:

const myjson = 'http://tnij.xyz/bj5'; // URL TO JSON RESOURCE!
const inquiries = [];
fetch(myjson)
    .then(response => response.json())
    .then(data => {
        inquiries = inquiries.concat(data);
        console.log(inquiries);
    });

Keep in mind that the `inquiries` array will be empty outside of the `fetch` operation.

Answer 2

(DISCLAIMER: I faced difficulties running the code due to cross-origin restrictions)

To address your issue, you have the option to either concatenate the incoming values using `.concat` or utilize `.apply`. In my opinion, opting for `.concat` would be preferable:

const myjson = 'http://tnij.xyz/bj5'; // URL TO JSON RESOURCE!
const inquiries = [];
fetch(myjson)
    .then(response => response.json())
    .then(data => {
        inquiries = inquiries.concat(data);
        console.log(inquiries);
    });

Keep in mind that the `inquiries` array will be empty outside of the `fetch` operation.

Answer 3

Answer №2

Here are a few things to note:

Instead of pushing the object retrieved from into an array, you can directly access the questions array by using jsonObj.questions. The entire JSON object received in response is referred to as jsonObj.
To display questions and answers in the HTML, you can follow this method:

var questions = [
    {
      "id": 1,
      "question": "Obwód trójkąta ABC wynosi 20cm. Jaką długość ma podstawa AB?",
      "answers": [
        {
          "id": 1,
          "answer": "8.4 cm",
          "correct": true
        },
        
        {
          "id": 2,
          "answer": "5.8 cm",
          "correct": false
        },
        
        {
          "id": 1,
          "answer": "0.6 cm",
          "correct": false
        },
        
        {
          "id": 1,
          "answer": "1.2 cm",
          "correct": false
        }
      ]
    }];
    
for(var i in questions) {
  document.getElementById('questions').innerHTML = questions[i].question;
  var answers = document.getElementById("answers");
  for(var j in questions[i].answers) {
    var label = document.createElement("label");
    var radio = document.createElement("input");
    radio.type = "radio";
    radio.name = "choices";
    radio.value = questions[i].answers[j].correct;
    label.appendChild(radio);
    label.appendChild(document.createTextNode(questions[i].answers[j].answer));
    answers.appendChild(label);
  }
}

<div id="questions">
</div>
<div id="answers"></div>

Answer 4

Here are a few things to note:

Instead of pushing the object retrieved from into an array, you can directly access the questions array by using jsonObj.questions. The entire JSON object received in response is referred to as jsonObj.
To display questions and answers in the HTML, you can follow this method:

var questions = [
    {
      "id": 1,
      "question": "Obwód trójkąta ABC wynosi 20cm. Jaką długość ma podstawa AB?",
      "answers": [
        {
          "id": 1,
          "answer": "8.4 cm",
          "correct": true
        },
        
        {
          "id": 2,
          "answer": "5.8 cm",
          "correct": false
        },
        
        {
          "id": 1,
          "answer": "0.6 cm",
          "correct": false
        },
        
        {
          "id": 1,
          "answer": "1.2 cm",
          "correct": false
        }
      ]
    }];
    
for(var i in questions) {
  document.getElementById('questions').innerHTML = questions[i].question;
  var answers = document.getElementById("answers");
  for(var j in questions[i].answers) {
    var label = document.createElement("label");
    var radio = document.createElement("input");
    radio.type = "radio";
    radio.name = "choices";
    radio.value = questions[i].answers[j].correct;
    label.appendChild(radio);
    label.appendChild(document.createTextNode(questions[i].answers[j].answer));
    answers.appendChild(label);
  }
}

<div id="questions">
</div>
<div id="answers"></div>

What are the steps for importing and utilizing data from a JSON object?

Answer №1

Answer №2

Similar questions

Accessing elements within a gridview

Having trouble locating the CSS and JavaScript files within my Spring Maven project

Adding elements to an array within a JSON object in Angular: What you need to know

Storing the model on the server with the help of Backbone and NodeJS

The href link does not direct to the main landing page

Is it possible to change the name of a PHP file using the value entered in an input

A guide to effortlessly converting Any[] to CustomType for seamless IntelliSense access to Properties within Angular/Typescript

Having trouble linking a sqlite file in your tauri + vue project?

Storing a field of JSON object in Solr

Tips on effectively extracting data from a SQLite JSON field that contains an array value

Ways to efficiently populate HTML elements with JSON data

Replacing field names in JSON using Lumen PHP

Issue: Adjustment of elements' size using an "onclick" method when reaching specific screen width

What is the best way to add a component into a MAP of other components in a React application?

Tips for choosing the following row in an Angular user interface grid

Decrease the dimensions of the image while maintaining its width at 100%

React Traffic Light Component: Colors Stuck After Timeout

Unexpected Error: Unable to access the 'position' property of an undefined element (D3.JS)

Determine all subarrays within two integer arrays whose sum matches a specified target number

How can I transfer Gmail message using express rendering parameters?