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
    New Coder
    Join Date
    Nov 2010
    Posts
    76
    Thanks
    13
    Thanked 3 Times in 3 Posts

    Backbone.js Model with JSON issues?

    Hey, I'm having an issue trying to understand the connection of models and manipulating data with them and putting them into a collection then spitting out a view. uuugghhhh!! ..
    Not too much on the web about getting a complex JSON src and manipulating it. ..
    I have a rather large JSON object, that I'm trying to figure out how to 'fetch()' it and then manipulate it for little models.

    I have an external JSON object that hold categories, stories,page headlines and all info related to them.
    Code:
    {
       "result":{
          "resultHeadline":"INTRO HEADLINE COPY",
          "resultSubhead":"Proin placerat adipiscing nunc",
          "resultText":"Mauris ornare rhoncus massa, quis sodales augue egestas non. Vivamus metus diam, consectetur id felis sed.pharetra aliquet.",
          "resultImg":"/some/img/path.jpg",
          "resultAlign":"left",
          "resultUrl":"/some_page.html",
          "resultAltText":"",
          "categories":[
             {
                "catTitle":"Life",
                "catID":"Life",
                "catHeadline":"HeadLine of Life Only",
                "catSubhead":"",
                "catText":"",
                "catImg":"",
                "catAltText":"",
                "catAlign":"",
                "catURL":"",
                "articles":[
                  {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   }           
                ]
             },
             {
                "catTitle":"Events",
                "catID":"Events",
                "catHeadline":"HeadLine of Events Only",
                "catSubhead":"",
                "catText":"",
                "catImg":"",
                "catAltText":"",
                "catAlign":"",
                "catURL":"",
                "articles":[               
                  {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   }           
                ]
             },
             {
                "catTitle":"Travel",
                "catID":"Travel",
                "catHeadline":"HeadLine of Travel Only",
                "catSubhead":"",
                "catText":"",
                "catImg":"",
                "catAltText":"",
                "catAlign":"",
                "catURL":"",
                "articles":[
                   {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   },
                   {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   }           ]
                }
                  
             {
                "catTitle":"Music",
                "catID":"Music",
                "catHeadline":"HeadLine of Music Only",
                "catSubhead":"",
                "catText":"",
                "catImg":"",
                "catAltText":"",
                "catAlign":"",
                "catURL":"",
                "articles":[
                   {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   },           
                  {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   },
                 {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   }           
                ]
             },
             {
                "catTitle":"Sports",
                "catID":"Sports",
                "catHeadline":"HeadLine of Sports Only",
                "catSubhead":"",
                "catText":"",
                "catImg":"",
                "catAltText":"",
                "catAlign":"",
                "catURL":"",
                "articles":[
                   {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   }           
                ]
             }
          ]
       }
    }
    Now I'm getting so confused on how to get THAT, into little article Models, headline intro Models, and such, that can be added into collections and output into views.

    Any direction is helpful. Thanks in advance

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    you need to look at JSON object notation and how to parse it. It would help if you supplied the real JSON - what you posted isn't valid. Here's something that may get you started...

    Code:
    <!HTML>
    <html>
     
    	<head>
    	</head>  
    	<body>
    <div id="disp"></div>
    <script>
    
    	 var res = {
      
       "result":{
          "resultHeadline":"INTRO HEADLINE COPY",
          "resultSubhead":"Proin placerat adipiscing nunc",
          "resultText":"Mauris ornare rhoncus massa, quis sodales augue egestas non. Vivamus metus diam, consectetur id felis sed.pharetra aliquet.",
          "resultImg":"/some/img/path.jpg",
          "resultAlign":"left",
          "resultUrl":"/some_page.html",
          "resultAltText":"",
          "categories":[
             {
                "catTitle":"Life",
                "catID":"Life",
                "catHeadline":"HeadLine of Life Only",
                "catSubhead":"",
                "catText":"",
                "catImg":"",
                "catAltText":"",
                "catAlign":"",
                "catURL":"",
                "articles":[
                  {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   }           
                ]
             },
             {
                "catTitle":"Events",
                "catID":"Events",
                "catHeadline":"HeadLine of Events Only",
                "catSubhead":"",
                "catText":"",
                "catImg":"",
                "catAltText":"",
                "catAlign":"",
                "catURL":"",
                "articles":[               
                  {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   }           
                ]
             },
             {
                "catTitle":"Travel",
                "catID":"Travel",
                "catHeadline":"HeadLine of Travel Only",
                "catSubhead":"",
                "catText":"",
                "catImg":"",
                "catAltText":"",
                "catAlign":"",
                "catURL":"",
                "articles":[
                   {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   },
                   {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   }           ]
                },
                  
             {
                "catTitle":"Music",
                "catID":"Music",
                "catHeadline":"HeadLine of Music Only",
                "catSubhead":"",
                "catText":"",
                "catImg":"",
                "catAltText":"",
                "catAlign":"",
                "catURL":"",
                "articles":[
                   {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   },           
                  {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   },
                 {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   }           
                ]
             },
             {
                "catTitle":"Sports",
                "catID":"Sports",
                "catHeadline":"HeadLine of Sports Only",
                "catSubhead":"",
                "catText":"",
                "catImg":"",
                "catAltText":"",
                "catAlign":"",
                "catURL":"",
                "articles":[
                   {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   }           
                ]
             }
          ]
       }
    }
    
    var cats=res.result.categories;
    for (var i = 0; i < cats.length; i++) {
    document.getElementById("disp").innerHTML+=cats[i].catTitle+"<br>";
    }
    	</script>			
      </body>
    </html>

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    76
    Thanks
    13
    Thanked 3 Times in 3 Posts
    Crap, sorry.. I tried to simplify the JSON and screwed it up .. this JSON source is on the server. I'm using Backbone.js templating and 'fetch' the data .. I'm having a hard time understanding how to achieve this the right way. I don't want to make constant calls to the service for the object but rather manipulate an object after one call until another call is needed. I have a most-recent and most popular JSON object .. most recent is by default until users click for most popular.
    right now I have the Backbone.View fetching the data .. I don't think that is right at all.

    Here's the correct valid JSON

    Code:
    {
       "result":{
          "resultHeadline":"INTRO HEADLINE COPY",
          "resultSubhead":"Proin placerat adipiscing nunc",
          "resultText":"Mauris ornare rhoncus massa, quis sodales augue egestas non. Vivamus metus diam, consectetur id felis sed.pharetra aliquet.",
          "resultImg":"/some/img/path.jpg",
          "resultAlign":"left",
          "resultUrl":"/some_page.html",
          "resultAltText":"",
          "categories":[
             {
                "catTitle":"Life",
                "catID":"Life",
                "catHeadline":"HeadLine of Life Only",
                "catSubhead":"",
                "catText":"",
                "catImg":"",
                "catAltText":"",
                "catAlign":"",
                "catURL":"",
                "articles":[
                   {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   }
                ]
             },
             {
                "catTitle":"Events",
                "catID":"Events",
                "catHeadline":"HeadLine of Events Only",
                "catSubhead":"",
                "catText":"",
                "catImg":"",
                "catAltText":"",
                "catAlign":"",
                "catURL":"",
                "articles":[
                   {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   }
                ]
             },
             {
                "catTitle":"Travel",
                "catID":"Travel",
                "catHeadline":"HeadLine of Travel Only",
                "catSubhead":"",
                "catText":"",
                "catImg":"",
                "catAltText":"",
                "catAlign":"",
                "catURL":"",
                "articles":[
                   {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   },
                   {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   }
                ]
             },
             {
                "catTitle":"Music",
                "catID":"Music",
                "catHeadline":"HeadLine of Music Only",
                "catSubhead":"",
                "catText":"",
                "catImg":"",
                "catAltText":"",
                "catAlign":"",
                "catURL":"",
                "articles":[
                   {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   },
                   {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   },
                   {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   }
                ]
             },
             {
                "catTitle":"Sports",
                "catID":"Sports",
                "catHeadline":"HeadLine of Sports Only",
                "catSubhead":"",
                "catText":"",
                "catImg":"",
                "catAltText":"",
                "catAlign":"",
                "catURL":"",
                "articles":[
                   {
                      "articleID":"id",
                      "articleTitle":"SomeStuff",
                      "articleLeader":"",
                      "datestamp":"Wed, 04 Dec 2013",
                      "thumbnail":"somimg.jpg",
                      "shortDesc":"",
                      "longDesc":"",
                      "url":"/location/of/article.html"
                   }
                ]
             }
          ]
       }
    }
    Also heres some of the script for what I'm currently doing.

    Code:
     var dataURL = $mod.data('url');
                articlesLayout = Backbone.Model.extend();
                storiesData = Backbone.Collection.extend({
                    model : articlesLayout,
                    url: dataURL,
                });
                var allArticles = Backbone.View.extend({
                    el: $(".content", $mod),
                    render: function(){                  
                        value = ($mod.find('select').length) ? $mod.find('select option:selected').val() : null;
                        var that = this;
                        var data = new storiesData();                  
                        data.fetch({
                            success: function(collection, response){
                                if (value !== null)) {
                                    that.configData(response.result); // if there is a select dropdown and value isn't null
                                } else {
                                    that.specificView(response.result.categories); // if there is NO dropdown value is null
                                }
                            }
                        });
    },
    configData: function(data){
     // do data stuff and supply template
    },
    specificView: function(data){
      // do data stuff and supply template
    }
    });
    Last edited by joanzn; 12-05-2013 at 02:08 PM. Reason: supply more code


  •  

    Tags for this Thread

    Posting Permissions

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