Step 1: Sending JSON Data

To integrate our API, you need to send data in JSON format. Here is the JavaScript code to do this:

async function fetchData() {
    const url = 'http://127.0.0.1:5000/api';
    const token = 'YOUR_API_KEY'; // Replace with your Bearer token
    const consignmentIdsInput = document.getElementById('consignmentIds');
    const consignmentIds = consignmentIdsInput.value.split(',').map(id => id.trim());

    try {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                ids: consignmentIds
            })
        });

        if (!response.ok) {
            throw new Error('Failed to fetch data');
        }

        const data = await response.json();
        renderData(data.scraped_data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

function renderData(data) {
    const resultContainer = document.getElementById('result');
    resultContainer.innerHTML = JSON.stringify(data, null, 2);
}
        

Step 2: Converting CSV to JSON If uploading CSV File

You can convert a CSV file to JSON format using the following JavaScript code:

function csvToJson(csv) {
    const lines = csv.split("\n");
    const result = [];
    const headers = lines[0].split(",");

    for (let i = 1; i < lines.length; i++) {
        let obj = {};
        let currentline = lines[i].split(",");

        for (let j = 0; j < headers.length; j++) {
            obj[headers[j]] = currentline[j];
        }

        result.push(obj);
    }
    
    return JSON.stringify(result, null, 2);
}

function handleFileSelect(evt) {
    const file = evt.target.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
        const csv = e.target.result;
        const json = csvToJson(csv);
        document.getElementById('jsonOutput').textContent = json;
    };
    reader.readAsText(file);
}

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('csvFile').addEventListener('change', handleFileSelect, false);
});
        

Select a CSV file to convert it to JSON:

After chosing a csv file you can click on Fetch data . This will convert CSV file to JSON first and then Send Request for fetching data.

Step 3: Integration Example

Here is a complete example combining the API request and CSV to JSON conversion:

After choosing a file Click on Scrape or Show status (Note: Don't Forget to add convert CSV to JSOn OnClick() and Send request).

You will have to target each Th of table individually like this:

        <table>
            <thead>
                <tr class="center">
                    <th>Consignment ID</th>
                    <th>Booked At</th>
                    <th>Booked On</th>
                    <th>Destination Pincode</th>
                    <th>Tariff</th>
                    <th>Article Type</th>
                    <th>Delivery Location</th>
                    <th>Delivery Confirmed On</th>
                    <th>Status</th>
                    <th>Action</th>    //In Action  you can add detail button to show more info Like Date, Time, Office and Event. Like below !
                </tr>
            </thead>
        </table>
        <table>
            <thead>
                <tr class="center">
                    <th>Date</th>
                    <th>Time</th>
                    <th>Office</th>
                    <th>Event</th>
                    
                </tr>
            </thead>
        </table>
         
            

After adding HTML and CSS The Data would be shown Like this