jquery - JavaScript - Loading data faster?

Question

I have a JSON file, which has 1000 lines of different data. There's name, price, picture etc. At the moment it gets information from there and then JavaScript puts that into HTML and into the <ul> class, if all done it shows it on website.

It all takes 30 seconds to 1 minute, but how could I speed it up? There's one website, what basically does same, but they don't use information in JSON, they got HTML code in JSON file. How could I speed it up? On their site, it does it within 1-5 seconds.

Javascript

items.forEach(function (item, index, arr) {
                console.log(item.price);
                var message = 'BitSkins Price: $' + item.bprice + '';
                if (item.price != null) {
                    if (item.bprice == '') {
                        message = 'Item never sold on BitSkins!';
                    }
                    if (item.name != 'Operation Phoenix Case Key' && item.name != 'CS:GO Case Key' && item.name != 'Winter Offensive Case Key' && item.name != 'Revolver Case Key' && item.name != 'Operation Vanguard Case Key' && item.name != 'Operation Wildfire Case Key' && item.name != 'Shadow Case Key' && item.name != 'Operation Breakout Case Key' && item.name != 'Chroma Case Key' && item.name != 'Huntsman Case Key' && item.name != 'Falchion Case Key' && item.name != 'Chroma 2 Case Key') {
                        $("#inventory").html($("#inventory").html() + "<li class='col 2' style='padding:8px;font-weight:bold;font-size:16px'><div class='card item-card waves-effect waves-light' style='margin:0%;min-height:295px;width:245.438px;border-radius: 15px;' id='" + item.id + "'><div class='iteam' style='text-decoration: underline;text-align: left'>" + item.name + "</div><div class='condition' style='text-align: left;text-size:13px'>" + item.condition + "</div><div class='center-align' style='padding:6%'><img title="" + item.originalname + "" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/" + item.iconurl + "/200fx200'><div class 'floatvalue'>Float: 0.11503319442272186<div class='bitskinscomp' style='font-weight: normal;font-size:12px'>" + message + "</div><div class='buyer-price center-align'>$" + numberWithCommas(item.price) + "</li></div></div>");
                    }
                }
            });

Answer 1

Is the speed issue here with retrieving the JSON data or with looping that data into the DOM?

If it's the latter case then you may wish to consider how you're manipulating the DOM. A more efficient approach in this case would be to create a document fragment which is then inserted into the DOM when fully constructed.

Ok so based on your edit I've done a few things to this:

1. Moved out all your if clauses to an array which for me is more readable
2. The function I've created now makes a single reference to the #inventory container and then builds up a large text string for all of your items which is then appended. The real performance hit in your code is referencing the #inventory's .html and then passing a reference to itself again.

var items = [{
    id: 123,
    condition: 'good',
    iconurl: 'www.test.com',
    price: '$55',
    originalname: 'old test',
    name: 'new test'
}, {
    id: 456,
    condition: 'ruined',
    iconurl: 'www.test.com',
    price: '$15',
    originalname: 'old junk',
    name: 'junk made new'
}];

function buildDomStringForItems(item) {
    var message = 'BitSkins Price: $' + item.bprice + '',
        exclusionArray = ['Operation Phoenix Case Key', 'CS:GO Case Key', 'Winter Offensive Case Key'],
        newDomString = '', //holds the entire built up string
        inventoryContainer = $("#inventory");

    items.forEach(function (item, index, arr) {
        if (item.price != null) {
            if (item.bprice == '') {
                message = 'Item never sold on BitSkins!';
            }
            if (exclusionArray.indexOf(item.name) === -1) {
                newDomString += "<li class='col 2' style='padding:8px;font-weight:bold;font-size:16px'><div class='card item-card waves-effect waves-light' style='margin:0%;min-height:295px;width:245.438px;border-radius: 15px;' id='" + item.id + "'><div class='iteam' style='text-decoration: underline;text-align: left'>" + item.name + "</div><div class='condition' style='text-align: left;text-size:13px'>" + item.condition + "</div><div class='center-align' style='padding:6%'><img title="" + item.originalname + "" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/" + item.iconurl + "/200fx200'><div class 'floatvalue'>Float: 0.11503319442272186<div class='bitskinscomp' style='font-weight: normal;font-size:12px'>" + message + "</div><div class='buyer-price center-align'>$" + "</li></div></div>";
            }
        }
    });

    //now you have a whole text string built up you can just append it all at once          
    inventoryContainer.append(newDomString);

}

//call new function
buildDomStringForItems(items);