Creating an easy-to-update catalog utilizing an external file: A step-by-step guide

Question

Creating an easy-to-update catalog utilizing an external file: A step-by-step guide

I am looking to create a product catalog with 1-4 products in a row, each displayed in a box with details and prices. I would like to be able to generate the catalog easily using an XML/CSV file that can be updated. Can anyone provide guidance on how to accomplish this? I have basic knowledge of HTML/CSS and can learn JavaScript if needed.

Once completed, the page will include a header followed by the products below. I plan to convert the page into a PDF for sharing with other users.

javascript css xml csv

Answer 1

Answer №1

To start, it's essential to read your file and load it using JavaScript.

Once the file is loaded, you can then parse it into a JSON object.

Next step is to preview the content within an HTML table. (This HTML table will be used to create the PDF)

Using the library jsPDF and its plugin AutoTable, we create a PDF file with the previously generated HTML table.

Here is a sample CSV file that was used for testing:

Product,Price,Barcode
Sample product 1,100,802760000926
Sample product 2,95,802760000926
Sample product 3,20,802760000926

You can test it on my fiddle: https://jsfiddle.net/rogeliomonter/2f9m0qse/

let myList = {};
/*Function to load from CSV file*/
function openFile(event) {
    var input = event.target;
    var node = document.getElementById('output');
    node.innerText = '';
    var reader = new FileReader();
    reader.onload = function () {
        text = reader.result;
       //set to myList variable to be used later
        myList = JSON.parse(csvJSON(reader.result));
        buildHtmlTable('#output');
    };
    reader.readAsText(input.files[0]);
};

/*this function generates the HTML table*/
function buildHtmlTable(selector) {
    var columns = addAllColumnHeaders(myList, selector);

    for (var i = 0; i < myList.length; i++) {
        var row$ = $('<tr/>');
        for (var colIndex = 0; colIndex < columns.length; colIndex++) {
            var cellValue = myList[i][columns[colIndex]];
            if (cellValue == null) cellValue = "";
            row$.append($('<td/>').html(cellValue));
        }
        $(selector).append(row$);
    }
}

/*Supports the function that generates the HTML table*/
function addAllColumnHeaders(myList, selector) {
    var columnSet = [];
    var headerTr$ = $('<tr/>');

    for (var i = 0; i < myList.length; i++) {
        var rowHash = myList[i];
        for (var key in rowHash) {
            if ($.inArray(key, columnSet) == -1) {
                columnSet.push(key);
                headerTr$.append($('<th/>').html(key));
            }
        }
    }
    $(selector).append(headerTr$);

    return columnSet;
}

/*Converts CSV values into JSON object*/
function csvJSON(csv) {
    var lines = csv.split("\n");
    var result = [];
    var headers = lines[0].split(",");
    for (var i = 1; i < lines.length; i++) {

        var obj = {};
        var currentline = lines[i].split(",");
        for (var j = 0; j < headers.length; j++) {
            obj[headers[j]] = currentline[j];
        }
        result.push(obj);
    }
    //return result; //JavaScript object
    return JSON.stringify(result); //JSON
}

/*Uses jsPDF libary to generate a PDF File from the HTML table*/
function download() {
    // Default export is a4 paper, portrait, using millimeters for units
    const doc = new jsPDF();

    doc.text("My List", 10, 10);

    var columns = ["Product", "Price", "Barcode"];
    
    //Here we use the id of the table
    doc.autoTable({ html: '#output' })

    doc.save("myList.pdf");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>  
<input type='file' accept='text/csv' onchange='openFile(event)'>
  <br>
  <!-- the HTML table that will have the csv table -->
  <table id='output' border="1"></table>
  <br>
  <button onclick="download()">Generate PDF</button>

Answer 2

To start, it's essential to read your file and load it using JavaScript.

Once the file is loaded, you can then parse it into a JSON object.

Next step is to preview the content within an HTML table. (This HTML table will be used to create the PDF)

Using the library jsPDF and its plugin AutoTable, we create a PDF file with the previously generated HTML table.

Here is a sample CSV file that was used for testing:

Product,Price,Barcode
Sample product 1,100,802760000926
Sample product 2,95,802760000926
Sample product 3,20,802760000926

You can test it on my fiddle: https://jsfiddle.net/rogeliomonter/2f9m0qse/

let myList = {};
/*Function to load from CSV file*/
function openFile(event) {
    var input = event.target;
    var node = document.getElementById('output');
    node.innerText = '';
    var reader = new FileReader();
    reader.onload = function () {
        text = reader.result;
       //set to myList variable to be used later
        myList = JSON.parse(csvJSON(reader.result));
        buildHtmlTable('#output');
    };
    reader.readAsText(input.files[0]);
};

/*this function generates the HTML table*/
function buildHtmlTable(selector) {
    var columns = addAllColumnHeaders(myList, selector);

    for (var i = 0; i < myList.length; i++) {
        var row$ = $('<tr/>');
        for (var colIndex = 0; colIndex < columns.length; colIndex++) {
            var cellValue = myList[i][columns[colIndex]];
            if (cellValue == null) cellValue = "";
            row$.append($('<td/>').html(cellValue));
        }
        $(selector).append(row$);
    }
}

/*Supports the function that generates the HTML table*/
function addAllColumnHeaders(myList, selector) {
    var columnSet = [];
    var headerTr$ = $('<tr/>');

    for (var i = 0; i < myList.length; i++) {
        var rowHash = myList[i];
        for (var key in rowHash) {
            if ($.inArray(key, columnSet) == -1) {
                columnSet.push(key);
                headerTr$.append($('<th/>').html(key));
            }
        }
    }
    $(selector).append(headerTr$);

    return columnSet;
}

/*Converts CSV values into JSON object*/
function csvJSON(csv) {
    var lines = csv.split("\n");
    var result = [];
    var headers = lines[0].split(",");
    for (var i = 1; i < lines.length; i++) {

        var obj = {};
        var currentline = lines[i].split(",");
        for (var j = 0; j < headers.length; j++) {
            obj[headers[j]] = currentline[j];
        }
        result.push(obj);
    }
    //return result; //JavaScript object
    return JSON.stringify(result); //JSON
}

/*Uses jsPDF libary to generate a PDF File from the HTML table*/
function download() {
    // Default export is a4 paper, portrait, using millimeters for units
    const doc = new jsPDF();

    doc.text("My List", 10, 10);

    var columns = ["Product", "Price", "Barcode"];
    
    //Here we use the id of the table
    doc.autoTable({ html: '#output' })

    doc.save("myList.pdf");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>  
<input type='file' accept='text/csv' onchange='openFile(event)'>
  <br>
  <!-- the HTML table that will have the csv table -->
  <table id='output' border="1"></table>
  <br>
  <button onclick="download()">Generate PDF</button>

Creating an easy-to-update catalog utilizing an external file: A step-by-step guide

Answer №1

Similar questions

What is the best way to use CSS to hyphenate a capitalized word?

Updating a column in a SQL Table via an Ajax request

"Step-by-step guide for incorporating a mask in the Ant Design Datepicker component in React

Error encountered: Attempting to render an object as a react component is invalid

"multer's single file upload functionality is not functioning properly, but the array upload

Preventing child element clicks in Angular 5: A helpful guide

Utilize a custom function on dynamically generated elements

How to Achieve an Overlapping Background Image Effect with Divs Using HTML and CSS

Error occurs when attempting to clear the cache storage

Developing numerous global objects within the context of JavaScript in Rails

Is it possible to trigger an event each time an Ajax request is made within AngularJS?

Enhance user experience with a flexbox navigation bar that dynamically adjusts link heights to ensure

What steps can I take to resolve the issue of the "self signed certificate in certificate chain" error while trying to install plugins on VS Code?

In PHP, it is essential to always complete the necessary information in form validation

What is the most efficient method for appending /.json to the conclusion of express routes?

The conditional statement in the given code snippet is failing to execute properly

Exploring Nested Objects in ReactJS

Angular2 bootstrapping of multiple components

Tips on transmitting form information from client-side JavaScript to server-side JavaScript with Node.js

Having trouble retrieving data from the table with AJAX and CodeIgniter