1

I'm new in the field of JSON and I've done a lot of research the past week on the topic in regards to only showing a certain quantity and using a button click to show X count after I initially load 12. I have learned how to call an API with PHP, extract data from the JSON, use a foreach statement with PHP to output the JSON contents but I'm not finding much luck in a definitive answer or explanation if performance is effected when I use a button to show the next quantity.

The JSON I am calling has well over 100 objects with each object having up to 20 values (my terminology understanding after reading here) and it's updated every hour with PHP. I thought it would be good performance to render the first 12 with PHP after reading how to limit the statement:

$showList = 12;
$countRecords = 0;
foreach($products as $product) {
    if ($countRecords < $showList) {
        // more code
    }
    ++$countRecords;
}

and reading a few questions that suggest doing this on the server side.

After referencing several questions on how to create a button click to load the next 12 count I'm worried that using .slice() would hinder performance because it looks like it goes through the entire file each time then slices the content:

I did see another approach where a hidden class was added and the button removes the class but wouldn't that defeat performance:

another approach with AJAX:

I did think about modifying the counter:

What is the appropriate execution to load more objects with an Ajax button click that wouldn't delay the return or hinder on performance if I do have a large JSON file or is there no effect with .slice()?

Community
  • 1
  • 1
DᴀʀᴛʜVᴀᴅᴇʀ
  • 7,681
  • 17
  • 73
  • 127
  • 1
    100 records with 20 keys each with 20 chars is roughly going to take up 100*20*20= 40k of memory. That is nothing for the computers of today. Problems start when you start overwhelming browsers with 10s of MB of data. – Phil Mar 28 '16 at 23:07

1 Answers1

1

As far as I'm aware, any solution in jQuery (or anything client-side) will still return the entire JSON before you limit it, and since your purpose for doing that is performance, that is pretty useless.

You need to limit the returned JSON server-side. You can still use jQuery to for the ajax, but instead of directly calling your JSON, create a PHP file that limits the response.

jQuery

// set initial variables
var limit = 10;
var offset = 0;

// get data on button click
$.('#load-more').on('click', function(){
    getData();
});

function getData() {
    $.ajax({
        url:"ajax.php",
        type: "POST",
        data: { limit: limit, offset: offset },
        success: function(json) {

            // increase offset for next call
            offset++;

            // do something with your JSON
        },
   });
}

ajax.php

// get your POST variables
if( isset($_POST['limit']) ) $limit = (int)$_POST['limit'];
if( isset($_POST['offset']) ) $offset = (int)$_POST['offset'];

// get your JSON
if ( isset($limit) && isset($offset) ) {

    $from = ($offset + 1) * $limit;
    $to   = $from + $limit;

    $json = // get JSON objects $from to $to        

    echo $json;        
}

How you get the correct JSON results in ajax.php depends on how you are getting and/or storing your JSON.

  • If you are making an API call, see what limit/offset parameters the API has. Depending on the API you may be able to use $offset & $limit or $from & $to. If you're doing this though you can do it directly from your ajax call.

  • If you are storing the JSON in a database you may be able to get the results with a MYSQL query.

  • If you all you have is one JSON string/file you can loop through it like your first PHP example. Something like this:

// get your POST variables
if( isset($_POST['limit']) ) $limit = (int)$_POST['limit'];
if( isset($_POST['offset']) ) $offset = (int)$_POST['offset'];

// get your JSON
if ( isset($limit) && isset($offset) ) {

    // limit & offset
    $from = ($offset + 1) * $limit;
    $to   = $from + $limit;

    // get existing json
    $products = json_decode($existing_json, true);
    $countRecords = 0;
    $products_to_return = array();

    foreach($products as $product) {

        // skip to next product if we are before $from
        if ($countRecords < $from) continue;

        // end the loop if we are after $to
        if ($countRecords > $to) break;

        $products_to_return[] = $product;

        ++$countRecords;
    }

    // encode your new limited json
    $json = json_encode($products_to_return);

    echo $json;        
}

Note—none of this code is tested and may very well be full of errors (it's late!) but it gives you an idea of what to do

Cai
  • 441
  • 4
  • 15