Generating links within a Json file

Question

Generating links within a Json file

Excuse me if this is a basic inquiry that has already been addressed, but I am not very familiar with javascript.

I want to design a json catalog that will be displayed as a table on an HTML page. I specifically need one of the cells to contain a hyperlink, but I am struggling to make it work.

Here is my json script:

"beer": [{
    "name": "NAME",
    "type": "TYPE",
    "company": "BREWERY",
    "website": "WWW.SITE.COM",
    "price": 6.00
}],

And here is my HTML script:

<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest()}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","catalog.json",false);
xmlhttp.send();
json=JSON.parse(xmlhttp.responseText);

document.write("<table class=table table-bordered>");
var x=json.beer;
for (i=0;i<x.length;i++)
{ 
document.write("<tr><td>");
document.write(x[i].name);
document.write("</td><td>");
document.write(x[i].type);
document.write("</td><td>");
document.write(x[i].company);
document.write("</td><td>");
document.write(x[i].website);
document.write("</td><td>$");
document.write(x[i].price.toFixed(2));                                    
document.write("</td></tr>");
 }
document.write("</table>");
</script>

If anyone can assist with this issue, I would greatly appreciate it.

javascript json

Answer 1

Answer №1

First and foremost, it is strongly advised to avoid using document.write. If this function is invoked after the page has finished loading, it will completely overwrite the entire content. It is much more advisable to utilize DOM methods for adding new elements dynamically.

Additionally, since AJAX is meant to be asynchronous, there seems to be no apparent reason for passing in false to the .open() method. Moreover, considering the outdated versions of Internet Explorer are unlikely to access the site, the use of new ActiveXObject can probably be omitted as well.

// As of 2014, the following code suffices
var xhr = new XMLHttpRequest;

// Define the callback function upon request completion
xhr.onload = function(){
    // Checking if readyState is 4 (request complete) and status is 200 (HTTP OK)
    if(xhr.readyState === 4 && xhr.status === 200){
        var json = JSON.parse(xhr.responseText),
            x = json.beer,
            table = document.createElement('table');

        // Assigning relevant classes
        table.className = "table table-bordered";

        // Iterating over the data
        for(var i = 0; i < x.length; i++){
            // Constructing HTML for each row
            var row = '<tr>' +
                '<td>'+x[i].name+'</td>' +
                '<td>'+x[i].type+'</td>' +
                '<td>'+x[i].company+'</td>' +
                '<td><a href="'+x[i].website+'">'+x[i].website+'</a></td>' +
                '<td>'+x[i].price.toFixed(2)+'</td>'+
            '</tr>';

            // Appending each row to the table's innerHTML
            table.innerHTML += row;
        }

        // Adding the generated table to the page
        document.body.appendChild(table);
    }
};

// By default, the request is asynchronous
xhr.open("GET","catalog.json");

// Initiating the request
xhr.send();

Answer 2

First and foremost, it is strongly advised to avoid using document.write. If this function is invoked after the page has finished loading, it will completely overwrite the entire content. It is much more advisable to utilize DOM methods for adding new elements dynamically.

Additionally, since AJAX is meant to be asynchronous, there seems to be no apparent reason for passing in false to the .open() method. Moreover, considering the outdated versions of Internet Explorer are unlikely to access the site, the use of new ActiveXObject can probably be omitted as well.

// As of 2014, the following code suffices
var xhr = new XMLHttpRequest;

// Define the callback function upon request completion
xhr.onload = function(){
    // Checking if readyState is 4 (request complete) and status is 200 (HTTP OK)
    if(xhr.readyState === 4 && xhr.status === 200){
        var json = JSON.parse(xhr.responseText),
            x = json.beer,
            table = document.createElement('table');

        // Assigning relevant classes
        table.className = "table table-bordered";

        // Iterating over the data
        for(var i = 0; i < x.length; i++){
            // Constructing HTML for each row
            var row = '<tr>' +
                '<td>'+x[i].name+'</td>' +
                '<td>'+x[i].type+'</td>' +
                '<td>'+x[i].company+'</td>' +
                '<td><a href="'+x[i].website+'">'+x[i].website+'</a></td>' +
                '<td>'+x[i].price.toFixed(2)+'</td>'+
            '</tr>';

            // Appending each row to the table's innerHTML
            table.innerHTML += row;
        }

        // Adding the generated table to the page
        document.body.appendChild(table);
    }
};

// By default, the request is asynchronous
xhr.open("GET","catalog.json");

// Initiating the request
xhr.send();

Generating links within a Json file

Answer №1

Similar questions

How can you retrieve a value from a loop in JavaScript?

Issue encountered when compiling Vue 3 with TypeScript and Webpack Encore: Vue Router's $route is missing

Tips for saving information from a textarea into an HTML file

Lens Flare Troubles in Three JS

What is the process for including an SVG file in my JavaScript .textContent?

Converting a CSV file to JSON in C++: A step-by-step guide

Is there a method to introduce a line break for each piece of data that is shown?

Using JavaScript, create a script that will automatically convert the value of an AJAX calendar to a datetime

Rebooting checkbox data with AJAX on MVC 5 form submission

What is the best way to toggle the visibility of multiple column groups in Ag-Grid community using dynamic

Using Angular to dynamically display JSON data on an HTML page

The property of Three.js Quaternion is immutable and cannot be reassigned

Tips for creating fonts that adjust depending on the length of characters

I need these buttons to determine which div is displayed or appears "on top"

An error occurred as the requested resource does not have the necessary 'Access-Control-Allow-Origin' header. The response code received was 403

Pinia store encountering a Typescript Vue component issue: error message "The property 'testStore' does not exist on the 'CreateComponentPublicInstance' type."

The Slider.prepend() function in lightSlider is not functioning as intended for the 'onSliderLoad' event in lightGallery

What is the significance of passing an argument within curly braces in the renderItem function of React Native's Flat List component?

Click on the button to add a new question and watch as another row magically appears

Move the modal dialog so it appears closer to the top of the page