jQuery each loop with JSON array

Question

I m trying to use jQuery s each loop to go through this JSON and add it to a div named  contentHere  The JSON is as follows      justIn          textId    123    text    Hello    textType    Greeting          textId    514    text   What s up     textType    Question          textId    122    text   Come over here    textType    Order           recent          textId    1255    text    Hello    textType    Greeting          textId    6564    text   What s up     textType    Question          textId    0192    text   Come over here    textType    Order           old          textId    5213    text    Hello    textType    Greeting          textId    9758    text   What s up     textType    Question          textId    7655    text   Come over here    textType    Order           I m getting this JSON through use of this code     get  data php   function data          Any solutions

User · Answer

My solutions in one of my own sites  with a table     getJSON  sections view numbers update php   function data       each data  function index  objNumber          tr     objNumber intID  find  td   eq 3  html objNumber datLastCalled         tr     objNumber intID  find  td   eq 4  html objNumber strStatus         tr     objNumber intID  find  td   eq 5  html objNumber intDuration         tr     objNumber intID  find  td   eq 6  html objNumber blnWasHuman              sections view numbers update php Returns something like      intID   19   datLastCalled   Thu  10 Jan 13 08 52 20  0000   strStatus   Completed   intDuration   0 04 secs   blnWasHuman   Yes   datModified  1357807940     intID   22   datLastCalled   Thu  10 Jan 13 08 54 43  0000   strStatus   Completed   intDuration   0 00 secs   blnWasHuman   Yes   datModified  1357808079     HTML table    lt table id  table numbers  gt    lt tr gt     lt th gt       lt  th gt     lt th gt       lt  th gt     lt th gt       lt  th gt     lt th gt Last Call lt  th gt     lt th gt Status lt  th gt     lt th gt Duration lt  th gt     lt th gt Human  lt  th gt     lt th gt       lt  th gt    lt  tr gt    lt tr id  tr 123456  gt            lt  tr gt   lt  table gt    This essentially gives every row a unique id preceding with  tr   to allow for other numbered element ids  at server script time  The jQuery script then just gets this TR  id  element  and fills the correct indexed cell with the json return   The advantage is you could get the complete array from the DB  and either foreach  array as  record  to create the table html  OR  if there is an update request  you can die json encode  array   before displaying the table  all in the same page  but same display code

User · Answer

Brief code but full-featured  The following is a hybrid jQuery solution that formats each data  record  into an HTML element and uses the data s properties as HTML attribute values    The jquery each runs the inner loop  I needed the regular JavaScript for on the outer loop to be able to grab the property name  instead of value  for display as the heading  According to taste it can be modified for slightly different behaviour   This is only 5 main lines of code but wrapped onto multiple lines for display     get  data php   function data        for  var propTitle in data                 lt div gt  lt  div gt                  addClass  heading                insertBefore   contentHere                text propTitle                  data propTitle   each function iRec  oRec                         lt div gt  lt  div gt                         addClass oRec textType                       attr  id    T  oRec textId                       insertBefore   contentHere                        text oRec text                                Produces the output     Note  I modified the JSON data text values by prepending a number to ensure I was displaying the proper records in the proper sequence - while  debugging     lt div class  heading  gt      justIn  lt  div gt   lt div id  T123  class  Greeting  gt      1Hello  lt  div gt   lt div id  T514  class  Question  gt      1What s up   lt  div gt   lt div id  T122  class  Order  gt      1Come over here  lt  div gt   lt div class  heading  gt      recent  lt  div gt   lt div id  T1255  class  Greeting  gt      2Hello  lt  div gt   lt div id  T6564  class  Question  gt      2What s up   lt  div gt   lt div id  T0192  class  Order  gt      2Come over here  lt  div gt   lt div class  heading  gt      old  lt  div gt   lt div id  T5213  class  Greeting  gt      3Hello  lt  div gt   lt div id  T9758  class  Question  gt      3What s up   lt  div gt   lt div id  T7655  class  Order  gt      3Come over here  lt  div gt   lt div id  contentHere  gt  lt  div gt    Apply a style sheet   lt style gt   heading   font-size  24px  text-decoration underline    Greeting   color  green     Question   color  blue     Order   color  red     lt  style gt    to get a  beautiful  looking set of data     More Info The JSON data was used in the following way   for each category  key name the array is held under     the key name is used as the section heading  e g  justIn    for each object held inside an array     text  becomes the content of a div  textType  becomes the class of the div  hooked into a style sheet   textId  becomes the id of the div e g   lt div id  T122  class  Order  gt Come over here lt  div gt

User · Answer

This works for me     get  data php   function data       var expected     justIn    recent    old        var outString             each expected  function i  val           var contentArray   data val           outString      lt ul gt  lt li gt  lt b gt     val     lt  b gt                each contentArray  function i1  val2               var textID   val2 textId              var text   val2 text              var textType   val2 textType              outString      lt br   gt    textID        lt i gt   text   lt  i gt    textType                      outString      lt  li gt  lt  ul gt                    contentHere   append outString       json      This produces this output    lt div id  contentHere  gt  lt ul gt   lt li gt  lt b gt justIn lt  b gt    lt br   gt   123   lt i gt Hello lt  i gt  Greeting lt br gt   514   lt i gt What s up  lt  i gt  Question lt br gt   122   lt i gt Come over here lt  i gt  Order lt  li gt   lt  ul gt  lt ul gt   lt li gt  lt b gt recent lt  b gt    lt br   gt   1255   lt i gt Hello lt  i gt  Greeting lt br gt   6564   lt i gt What s up  lt  i gt  Question lt br gt   0192   lt i gt Come over here lt  i gt  Order lt  li gt   lt  ul gt  lt ul gt   lt li gt  lt b gt old lt  b gt    lt br   gt   5213   lt i gt Hello lt  i gt  Greeting lt br gt   9758   lt i gt What s up  lt  i gt  Question lt br gt   7655   lt i gt Come over here lt  i gt  Order lt  li gt   lt  ul gt  lt  div gt    And looks like this   justIn  123  Hello Greeting 514  What s up  Question 122  Come over here Order  recent  1255  Hello Greeting 6564  What s up  Question 0192  Come over here Order  old  5213  Hello Greeting 9758  What s up  Question 7655  Come over here Order  Also  remember to set the contentType as  json

User · Answer

Try  untested      getJSON  data php   function data         each data justIn  function               each this  function k  v                alert k         v                             each data recent  function               each this  function k  v                alert k         v                             each data old  function               each this  function k  v                alert k         v                                 I figured  three separate loops since you ll probably want to treat each dataset differently  justIn  recent  old   If not  you can do     getJSON  data php   function data         each data  function k  v            alert k         v             each v  function k1  v1                alert k1         v1

[javascript] jQuery 'each' loop with JSON array

Examples related to javascript

Examples related to jquery

Examples related to json

Examples related to each