title: Parsing JSON data efficiently into front end list
body: <p>I have been browsing for the past 2 days and can't seem to find an answer to this anywhere.</p>
  
  <p>I am using PHP to parse all of my SQL data into a JSON format here is an example of the JSON: </p>
  
  <pre><code>[
      {
          "id": "1",
          "name": "Jim",
          "age": "39",
          "address": "12 High Street, London",
          "hasCar": "1",
          "speaksForeignLanguage": "1",
          "canWorkNights": "1",
          "isStudent": "1"
      },
      {
          "id": "2",
          "name": "Fred",
          "age": "29",
          "address": "13 High Street, London",
          "hasCar": "1",
          "speaksForeignLanguage": "1",
          "canWorkNights": "1",
          "isStudent": "0"
      },
      {
          "id": "3",
          "name": "Bill",
          "age": "19",
          "address": "14 High Street, London",
          "hasCar": "1",
          "speaksForeignLanguage": "1",
          "canWorkNights": "0",
          "isStudent": "0"
      },
      {
          "id": "4",
          "name": "Tom",
          "age": "39",
          "address": "15 High Street, London",
          "hasCar": "1",
          "speaksForeignLanguage": "0",
          "canWorkNights": "0",
          "isStudent": "0"
      },
      {
          "id": "5",
          "name": "Cathy",
          "age": "29",
          "address": "16 High Street, London",
          "hasCar": "1",
          "speaksForeignLanguage": "0",
          "canWorkNights": "0",
          "isStudent": "1"
      },
      {
          "id": "6",
          "name": "Petra",
          "age": "19",
          "address": "17 High Street, London",
          "hasCar": "1",
          "speaksForeignLanguage": "0",
          "canWorkNights": "1",
          "isStudent": "0"
      },
      {
          "id": "7",
          "name": "Heide",
          "age": "39",
          "address": "18 High Street, London",
          "hasCar": "1",
          "speaksForeignLanguage": "1",
          "canWorkNights": "0",
          "isStudent": "0"
      },
      {
          "id": "8",
          "name": "William",
          "age": "29",
          "address": "19 High Street, London",
          "hasCar": "1",
          "speaksForeignLanguage": "1",
          "canWorkNights": "0",
          "isStudent": "1"
      },
      {
          "id": "9",
          "name": "Ted",
          "age": "19",
          "address": "20 High Street, London",
          "hasCar": "0",
          "speaksForeignLanguage": "0",
          "canWorkNights": "0",
          "isStudent": "1"
      },
      {
          "id": "10",
          "name": "Mike",
          "age": "19",
          "address": "21 High Street, London",
          "hasCar": "1",
          "speaksForeignLanguage": "0",
          "canWorkNights": "0",
          "isStudent": "1"
      },
      {
          "id": "11",
          "name": "Jo",
          "age": "19",
          "address": "22 High Street, London",
          "hasCar": "0",
          "speaksForeignLanguage": "1",
          "canWorkNights": "0",
          "isStudent": "1"
      }
  ]
  </code></pre>
  
  <p>That is just an example and isn't the actual data I am using, my JSON data contains 8 image image links for each row and contains more string data.</p>
  
  <p>I need to list up to 120 records on the front end, this list will have filtered search options.</p>
  
  <p>When the client visits the search page I am guessing they will need to load all of the JSON data which would probably cause a slow user experience.</p>
  
  <p>Is there anyway JSON data can be loaded on request so the client doesn't need to load all of that data at once? So for example maybe only request the data for 10 records per page so the whole JSON file isn't loaded?</p>
  
  <p>Any advice would be great.</p>