Retrieving Data from a JSON URL and Publishing it on a Website

Question

Retrieving Data from a JSON URL and Publishing it on a Website

I have been experimenting with various coding methods, specifically p5js.org's, but I am facing difficulties in getting the json code to display on my website using document.write. Strangely, it does show up in the console log. Any suggestions?

var bibleVerse;

function setup() {
  loadJSON('http://labs.bible.org/api/?passage=votd&type=json', gotData, 'jsonp');
}

function gotData(data){
  println(data);
  bibleVerse = data;  
}    

document.write(bookname.chapter.verse.text);

javascript json dom

Answer 1

Answer №1

Assuming that the p5js library functions properly, you should refrain from using document.write in your code. Instead, locate where you would like the data to appear on your webpage and insert it into that specific element using its unique id.

For instance, suppose you want to display a quote within a paragraph:

<p id="quote">Alternate Text</p>

To achieve this, replace any instances of document.write with the following snippet:

document.getElementById("quote").innerHTML = data;

Incorporating all these elements, your JavaScript code may resemble the following:

function setup() {
  loadJSON('http://labs.bible.org/api/?passage=votd&type=json', gotData, 'jsonp');
}

function gotData(data){
  document.getElementById("quote").innerHTML = data;
  // note: var bibleVerse is never used
}

The text "Alternate Text" serves as a fallback in case the JavaScript functions encounter errors.

For those new to web development: if you opt not to utilize jQuery's $(document).ready() function, ensure that the JavaScript script is placed inside the <body> tag towards the bottom. This arrangement ensures that the page content loads first before executing the JavaScript code.

Answer 2

Assuming that the p5js library functions properly, you should refrain from using document.write in your code. Instead, locate where you would like the data to appear on your webpage and insert it into that specific element using its unique id.

For instance, suppose you want to display a quote within a paragraph:

<p id="quote">Alternate Text</p>

To achieve this, replace any instances of document.write with the following snippet:

document.getElementById("quote").innerHTML = data;

Incorporating all these elements, your JavaScript code may resemble the following:

function setup() {
  loadJSON('http://labs.bible.org/api/?passage=votd&type=json', gotData, 'jsonp');
}

function gotData(data){
  document.getElementById("quote").innerHTML = data;
  // note: var bibleVerse is never used
}

The text "Alternate Text" serves as a fallback in case the JavaScript functions encounter errors.

For those new to web development: if you opt not to utilize jQuery's $(document).ready() function, ensure that the JavaScript script is placed inside the <body> tag towards the bottom. This arrangement ensures that the page content loads first before executing the JavaScript code.

Answer 3

Answer №2

By following this code in a sequential manner:

var scriptureVerse;

function initialization() {
  loadJSON('http://labs.bible.org/api/?passage=votd&type=json', dataRetrieved, 'jsonp');
}

function dataRetrieved(data){
  console.log(data);
  scriptureVerse = data;  
}    

document.write(bookname.chapter.verse.text);

The code executes the following actions:

Creates a variable called scriptureVerse
Defines an initialization function
Defines a dataRetrieved function
Attempts to write bookname.chapter.verse.text to the document.

This setup will not be successful due to the following reasons:

The initialization function is not being called anywhere in the code
document.write is being executed prior to the dataRetrieved function
The variable bookname has not been defined
Regardless of the sequence, using document.write after page load completion is not recommended

To rectify this issue, consider the following steps:

Include a placeholder in the HTML (e.g.,
```
<div id="verse"></div>
```
) where the verse will be displayed
Attach the initialization function to a DOM event (such as
```
document.addEventListener('load', initialization);
```
)
Replace document.write with the following in the dataRetrieved function:

Example:

var textNode = document.createTextNode(data.bookname.chapter.verse.text);
document.querySelector('#verse').appendChild(textNode);

Answer 4

By following this code in a sequential manner:

var scriptureVerse;

function initialization() {
  loadJSON('http://labs.bible.org/api/?passage=votd&type=json', dataRetrieved, 'jsonp');
}

function dataRetrieved(data){
  console.log(data);
  scriptureVerse = data;  
}    

document.write(bookname.chapter.verse.text);

The code executes the following actions:

Creates a variable called scriptureVerse
Defines an initialization function
Defines a dataRetrieved function
Attempts to write bookname.chapter.verse.text to the document.

This setup will not be successful due to the following reasons:

The initialization function is not being called anywhere in the code
document.write is being executed prior to the dataRetrieved function
The variable bookname has not been defined
Regardless of the sequence, using document.write after page load completion is not recommended

To rectify this issue, consider the following steps:

Include a placeholder in the HTML (e.g.,
```
<div id="verse"></div>
```
) where the verse will be displayed
Attach the initialization function to a DOM event (such as
```
document.addEventListener('load', initialization);
```
)
Replace document.write with the following in the dataRetrieved function:

Example:

var textNode = document.createTextNode(data.bookname.chapter.verse.text);
document.querySelector('#verse').appendChild(textNode);

Retrieving Data from a JSON URL and Publishing it on a Website

Answer №1

Answer №2

Similar questions

The Mean stack application is throwing an error message: "user.comparePassword is not

Guide on converting a string into an array using PHP

Is it possible to control the positioning of a tooltip for an input element?

The issue with 'this' not resolving correctly within a prototype method is causing unexpected behavior in the context of inheritance

Using JSON with Google Chart Tools

An unhandled error has occurred, please address

Displaying a list of entities in a dropdown menu upon loading an HTML page through a web API

Array JSON Encoding

Performing synchronized execution in a node.js application by utilizing the 'readline' package

Unexpected error arises in Typescript despite code functioning properly

Is there a method to determine if localForage/indexedDb is currently handling data operations?

The concept of encapsulation in JavaScript, which refers to the ability of

JSON retrieved images are failing to appear in a grid layout

An easy way to add an array to another array within a Redux reducer

Issue with code displaying boxes according to selected radio checkboxes

Why does Axios keep timing out despite successful testing in Postman?

Discovering the previously dropped value from a droppable div

Parsing additional JSON strings from a single file

Using JavaScript to parse a time string and update it by adding minutes

Updating JSON data from PHP using jQuery periodically