How can I export my bookmarks and import them into a table?

Question

I have hundreds of bookmarks that I have collected over the years that I would like to put into a searchable table with extra information such as categories, types, descriptions etc.

My first attempt at this was manually putting them into a JSON file and then using the DataTables plug-in to display them, however, this was tedious and time-consuming.

The second attempt was to use Wordpress and use Advanced Custom Fields to do this but again still quite tedious.

Obviously, I can export my bookmarks as an HTML file and I'm considering editing and styling this file to suit my needs but it is absolutely massive and also has loads of extraneous information. I've been trying to use CSV conversions of this file to import it into various Wordpress plug-ins that say they offer this exact functionality to know avail. I've also tried doing something similar with firefox's backup that exports to a JSON file but again no luck.

I know that I will have to manually put in some of the information, but I'm trying to cut down on the workload by about a third. Am I going about this the wrong way? Is it even possible? Just wondering if anyone out there has tried to do the same thing and how they went about it.

Answer 1

That was a lovely challenge, thanks. Basically, what I've done is saved the exported bookmarks as HTML and then created a simple page with an empty table. Then my JS does this:

$(function() {
    var example = $("#example").DataTable({
        "responsive": true,
        "columns": [
            {
                "title": "Title",
                "data": "text"
            },{
                "title": "Date added",
                "data": "date",
                "render": function(d){
                    return moment(d, "X").format("DD/MM/YYYY");
                }
            },{
                "title": "URI",
                "data": "href",
                "render": function(d){
                    return $("<a></a>",{
                        "text": d,
                        "href": d
                    }).prop("outerHTML");
                }
            }
        ],
        "initComplete": function(settings, json) {
            $.get("bookmarks_12_2_16.html", function( data ) {
                $(data).find("dl").children("dt").children("a").each(function(k, v){
                    if(!~~$(v).attr("href").indexOf("http")){
                        example.row.add({
                            "href": $(v).attr("href"),
                            "text": $(v).text(),
                            "date": $(v).attr("add_date")
                        });
                    }
                });
                example.draw();
            });
        }
    });
});

Basically it gets the HTML and iterates over the dts within the dl and, if the href is http or https, it adds it to the table with the correct date (you'd date function might have to be different seeing as I'm in the UK and I'm using momentjs). Hope that helps.