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

The parsing of source maps fails due to issues with the .htaccess file

Express API encounters an issue with multer and body-parser as req.file is undefined

Expanding Image with HTML and CSS: A Guide

Experiencing Excessive Recursion While Dynamically Attaching Click Event Listener With Post Method to a Div Element

Troubleshooting: AngularJS - Issues with nested controllers not functioning properly within ng-include

Challenges when it comes to exporting files using Firebase Cloud Functions

Express js routing issue ("Page Not Found")

Is there a similar alternative to ignoring in webpack or browserify?

Is there a way to instantly show the contents of a newly opened tab in BootstrapVue?

Designing a toggle button interface with Material UI

Arranging divs using inline-block display. How to adjust the heights consecutively?

React Native encounters issues with removing the reference to the callback attribute upon unmounting

Determine whether either of these elements has the mouse hovering over it using jQuery

decoding json field containing forward slashes using javascript

Comparing the use of jQuery click event with the button to trigger a function that calculates the

Struggling to get the picture and text to line up

Automatically calculate the product of two columns in a gridview

Enhancing the appearance of the MUI DatePicker

In the world of MUI, how should one interpret the symbols '&', '>', and '*' when used together?

Best practices for managing an array of buttons and handling click events in ReactJs