Best way to display data via JSON using jQuery

Question

i am trying to find the best way to display results on my page via an Ajax call using jQuery  do you think the best way is to pass it as JSON or plain text  I have worked with ajax calls before  but not sure which is preferred over the other and for the JSON version what is the best way to read from a JSON file generated by a PHP page to display my results   i know I would include a  each to run through it to display them all

User · Answer

JQuery has an inbuilt json data type for Ajax and converts the data into a object  PHP  also has inbuilt json encode function which converts an array into json formatted string  Saves a lot of parsing  decoding effort

User · Answer

Perfect  Thank you Jay  below is my HTML    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset UTF-8    gt   lt title gt Facebook like ajax post - jQuery - ryancoughlin com lt  title gt   lt link rel  stylesheet  href     css screen css  type  text css  media  screen  projection    gt   lt link rel  stylesheet  href     css print css  type  text css  media  print    gt   lt  -- if IE  gt  lt link rel  stylesheet  href     css ie css  type  text css  media  screen  projection  gt  lt   endif -- gt   lt link href     css highlight css  rel  stylesheet  type  text css  media  screen    gt   lt script src  js jquery js  type  text javascript  charset  utf-8  gt  lt  script gt   lt script type  text javascript  gt      lt   CDATA       document  ready function          getJSON  readJSON php  function data             each data post  function i post               content      lt p gt     post post author     lt  p gt                content      lt p gt     post post content     lt  p gt                content      lt p    post date     lt  p gt                content      lt br  gt                  content  appendTo   posts                                     gt      lt  script gt   lt  head gt   lt body gt           lt div class  container  gt                   lt div class  span-24  gt                          lt h2 gt Check out the following posts  lt  h2 gt                           lt div id  posts  gt                           lt  di gt                   lt  div gt           lt  div gt   lt  body gt   lt  html gt    And my JSON outputs     posts     id   1   date added   0001-02-22 00 00 00   post content   This is a post   author   Ryan Coughlin       I get this error  when I run my code   object is undefined http   localhost 8888 rks post js jquery js Line 19

User · Answer

JQuery has an inbuilt json data type for Ajax and converts the data into a object  PHP  also has inbuilt json encode function which converts an array into json formatted string  Saves a lot of parsing  decoding effort

User · Answer

Perfect  Thank you Jay  below is my HTML    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset UTF-8    gt   lt title gt Facebook like ajax post - jQuery - ryancoughlin com lt  title gt   lt link rel  stylesheet  href     css screen css  type  text css  media  screen  projection    gt   lt link rel  stylesheet  href     css print css  type  text css  media  print    gt   lt  -- if IE  gt  lt link rel  stylesheet  href     css ie css  type  text css  media  screen  projection  gt  lt   endif -- gt   lt link href     css highlight css  rel  stylesheet  type  text css  media  screen    gt   lt script src  js jquery js  type  text javascript  charset  utf-8  gt  lt  script gt   lt script type  text javascript  gt      lt   CDATA       document  ready function          getJSON  readJSON php  function data             each data post  function i post               content      lt p gt     post post author     lt  p gt                content      lt p gt     post post content     lt  p gt                content      lt p    post date     lt  p gt                content      lt br  gt                  content  appendTo   posts                                     gt      lt  script gt   lt  head gt   lt body gt           lt div class  container  gt                   lt div class  span-24  gt                          lt h2 gt Check out the following posts  lt  h2 gt                           lt div id  posts  gt                           lt  di gt                   lt  div gt           lt  div gt   lt  body gt   lt  html gt    And my JSON outputs     posts     id   1   date added   0001-02-22 00 00 00   post content   This is a post   author   Ryan Coughlin       I get this error  when I run my code   object is undefined http   localhost 8888 rks post js jquery js Line 19

User · Answer

You can create a jQuery object from a JSON object     getJSON url  data  function json          json  each function                YOUR CODE HERE

User · Answer

JQuery has an inbuilt json data type for Ajax and converts the data into a object  PHP  also has inbuilt json encode function which converts an array into json formatted string  Saves a lot of parsing  decoding effort

User · Answer

Something like this     getJSON  http   mywebsite com json get php cid 15           function data               each data products  function i product               content     lt p gt     product product title     lt  p gt                content      lt p gt     product product short description     lt  p gt                content      lt img src      product product thumbnail src       gt                content      lt br  gt                  content  appendTo   product list                                Would take a json object made from a PHP array returned with the key of products  e g   Array  products    gt  Array 0   gt  Array  product title    gt   Product 1                                         product short description    gt   Product 1 is a useful product                                         product thumbnail src    gt    images 15 1 jpg                                                                  1   gt  Array  product title    gt   Product 2                                         product short description    gt   Product 2 is a not so useful product                                         product thumbnail src    gt    images 15 2 jpg                                                                            To reload the list you would simply do       product list   empty      And then call getJSON again with new parameters

User · Answer

Something like this     getJSON  http   mywebsite com json get php cid 15           function data               each data products  function i product               content     lt p gt     product product title     lt  p gt                content      lt p gt     product product short description     lt  p gt                content      lt img src      product product thumbnail src       gt                content      lt br  gt                  content  appendTo   product list                                Would take a json object made from a PHP array returned with the key of products  e g   Array  products    gt  Array 0   gt  Array  product title    gt   Product 1                                         product short description    gt   Product 1 is a useful product                                         product thumbnail src    gt    images 15 1 jpg                                                                  1   gt  Array  product title    gt   Product 2                                         product short description    gt   Product 2 is a not so useful product                                         product thumbnail src    gt    images 15 2 jpg                                                                            To reload the list you would simply do       product list   empty      And then call getJSON again with new parameters

User · Answer

Perfect  Thank you Jay  below is my HTML    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset UTF-8    gt   lt title gt Facebook like ajax post - jQuery - ryancoughlin com lt  title gt   lt link rel  stylesheet  href     css screen css  type  text css  media  screen  projection    gt   lt link rel  stylesheet  href     css print css  type  text css  media  print    gt   lt  -- if IE  gt  lt link rel  stylesheet  href     css ie css  type  text css  media  screen  projection  gt  lt   endif -- gt   lt link href     css highlight css  rel  stylesheet  type  text css  media  screen    gt   lt script src  js jquery js  type  text javascript  charset  utf-8  gt  lt  script gt   lt script type  text javascript  gt      lt   CDATA       document  ready function          getJSON  readJSON php  function data             each data post  function i post               content      lt p gt     post post author     lt  p gt                content      lt p gt     post post content     lt  p gt                content      lt p    post date     lt  p gt                content      lt br  gt                  content  appendTo   posts                                     gt      lt  script gt   lt  head gt   lt body gt           lt div class  container  gt                   lt div class  span-24  gt                          lt h2 gt Check out the following posts  lt  h2 gt                           lt div id  posts  gt                           lt  di gt                   lt  div gt           lt  div gt   lt  body gt   lt  html gt    And my JSON outputs     posts     id   1   date added   0001-02-22 00 00 00   post content   This is a post   author   Ryan Coughlin       I get this error  when I run my code   object is undefined http   localhost 8888 rks post js jquery js Line 19

User · Answer

Something like this     getJSON  http   mywebsite com json get php cid 15           function data               each data products  function i product               content     lt p gt     product product title     lt  p gt                content      lt p gt     product product short description     lt  p gt                content      lt img src      product product thumbnail src       gt                content      lt br  gt                  content  appendTo   product list                                Would take a json object made from a PHP array returned with the key of products  e g   Array  products    gt  Array 0   gt  Array  product title    gt   Product 1                                         product short description    gt   Product 1 is a useful product                                         product thumbnail src    gt    images 15 1 jpg                                                                  1   gt  Array  product title    gt   Product 2                                         product short description    gt   Product 2 is a not so useful product                                         product thumbnail src    gt    images 15 2 jpg                                                                            To reload the list you would simply do       product list   empty      And then call getJSON again with new parameters

User · Answer

You can create a jQuery object from a JSON object     getJSON url  data  function json          json  each function                YOUR CODE HERE

User · Answer

Perfect  Thank you Jay  below is my HTML    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset UTF-8    gt   lt title gt Facebook like ajax post - jQuery - ryancoughlin com lt  title gt   lt link rel  stylesheet  href     css screen css  type  text css  media  screen  projection    gt   lt link rel  stylesheet  href     css print css  type  text css  media  print    gt   lt  -- if IE  gt  lt link rel  stylesheet  href     css ie css  type  text css  media  screen  projection  gt  lt   endif -- gt   lt link href     css highlight css  rel  stylesheet  type  text css  media  screen    gt   lt script src  js jquery js  type  text javascript  charset  utf-8  gt  lt  script gt   lt script type  text javascript  gt      lt   CDATA       document  ready function          getJSON  readJSON php  function data             each data post  function i post               content      lt p gt     post post author     lt  p gt                content      lt p gt     post post content     lt  p gt                content      lt p    post date     lt  p gt                content      lt br  gt                  content  appendTo   posts                                     gt      lt  script gt   lt  head gt   lt body gt           lt div class  container  gt                   lt div class  span-24  gt                          lt h2 gt Check out the following posts  lt  h2 gt                           lt div id  posts  gt                           lt  di gt                   lt  div gt           lt  div gt   lt  body gt   lt  html gt    And my JSON outputs     posts     id   1   date added   0001-02-22 00 00 00   post content   This is a post   author   Ryan Coughlin       I get this error  when I run my code   object is undefined http   localhost 8888 rks post js jquery js Line 19

User · Answer

Something like this     getJSON  http   mywebsite com json get php cid 15           function data               each data products  function i product               content     lt p gt     product product title     lt  p gt                content      lt p gt     product product short description     lt  p gt                content      lt img src      product product thumbnail src       gt                content      lt br  gt                  content  appendTo   product list                                Would take a json object made from a PHP array returned with the key of products  e g   Array  products    gt  Array 0   gt  Array  product title    gt   Product 1                                         product short description    gt   Product 1 is a useful product                                         product thumbnail src    gt    images 15 1 jpg                                                                  1   gt  Array  product title    gt   Product 2                                         product short description    gt   Product 2 is a not so useful product                                         product thumbnail src    gt    images 15 2 jpg                                                                            To reload the list you would simply do       product list   empty      And then call getJSON again with new parameters

User · Answer

You can create a jQuery object from a JSON object     getJSON url  data  function json          json  each function                YOUR CODE HERE

User · Answer

JQuery has an inbuilt json data type for Ajax and converts the data into a object  PHP  also has inbuilt json encode function which converts an array into json formatted string  Saves a lot of parsing  decoding effort

User · Answer

You can create a jQuery object from a JSON object     getJSON url  data  function json          json  each function                YOUR CODE HERE

[jquery] Best way to display data via JSON using jQuery

Examples related to jquery

Examples related to json