Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts

    How to get .JSON Item

    Hey guys,

    New coder here. I've just got a sample.json file, and am wondering what the basic principle is to grab some data and display on an html page (assuming using javascript).

    EX:
    Code:
    {
       "title":"Show",
       "students":[
          {
             "STUDENT_NAME":"John Doe",
             "MAJOR":"Digital Media",
             "PICTURE":"john-doe.jpg",
             "BIO":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce luctus risus quis est iaculis consequat. Cras volutpat vehicula ante, vitae aliquet risus aliquam in. Phasellus sed felis ac augue ullamcorper mollis ac sit amet orci. Nulla vitae euismod lorem. Aliquam eget metus sed velit elementum tincidunt sed dignissim mauris. Integer quis suscipit augue. Etiam eget pretium tortor. Nam vulputate fringilla erat, vel gravida nunc aliquet eget.",
            "PORTFOLIO":[
                {
                   "1":"john-doe-1.jpg",
                   "2":"john-doe-2.jpg",
                   "3":"john-doe-3.jpg"
                }
             ],
             "LINKS":[
                {
                   "LinkedIn":"http://www.linkedin.com",
                   "behance":"http://www.behance.com",
                   "dribble":"http://dribbble.com"
                }
             ]
          }
       ]
    }
    Web Design Portfolio 1 | Web Design Portfolio 2
    --------------------------------------------------------------------
    *Reminder to self. Validate code - then ask forum questions.

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    both of these files need
    to be on same server
    (same domain)

    Code:
     
    <!doctype html>
    <html>
    <head>
    </HEAD>
    <body>
    <script>
    req=new XMLHttpRequest;
    req.open("GET","json.txt",false);
    req.send(null);
    curseIt(JSON.parse(req.responseText))
    function curseIt(obj){
        for (var k in obj)    
     if (typeof obj[k] == "object")
                curseIt(obj[k]);
            else
                document.write(k," = ",obj[k],"<br>")
        }
     
    </script>
    </body>
    </html>

    json.txt
    Code:
     
    {
       "title":"Show",
       "students":[
          {
             "STUDENT_NAME":"John Doe",
             "MAJOR":"Digital Media",
             "PICTURE":"john-doe.jpg",
             "BIO":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce luctus risus quis est iaculis consequat. Cras volutpat vehicula ante, vitae aliquet risus aliquam in. Phasellus sed felis ac augue ullamcorper mollis ac sit amet orci. Nulla vitae euismod lorem. Aliquam eget metus sed velit elementum tincidunt sed dignissim mauris. Integer quis suscipit augue. Etiam eget pretium tortor. Nam vulputate fringilla erat, vel gravida nunc aliquet eget.",
            "PORTFOLIO":[
                {
                   "1":"john-doe-1.jpg",
                   "2":"john-doe-2.jpg",
                   "3":"john-doe-3.jpg"
                }
             ],
             "LINKS":[
                {
                   "LinkedIn":"http://www.linkedin.com",
                   "behance":"http://www.behance.com",
                   "dribble":"http://dribbble.com"
                }
             ]
          }
       ]
    }

  • Users who have thanked DaveyErwin for this post:

    bdbolin (03-30-2013)

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,400
    Thanks
    11
    Thanked 595 Times in 575 Posts
    using just js, json can be a pain to navigate, since it doesn't have the DOM that XML documents do.

    you might try a javascript library to make it easier. many templating packages like mousatche, handlebars, razor, and knockout will let you easily code data placeholders into regular HTML code.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    bdbolin (03-30-2013)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •