current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

I would like to get values from JSON file and insert to html.

based on this JSON array I am trying to pull data insert to html tags using jquery and create page:

 $.getJSON( "/general.json", function( data ) {

var jarray = data;
for(i = 0; i <=jarray.length; i++){
  var project  = jarray[i].project;
  var fulltime = jarray[i].bars.fulltime.resource;
  var contractor = jarray[i].bars.contractor.resource;
  var vendor = jarray[i].bars.vendor.resource;
  var capacity = jarray[i].bars.contractor.resource;
  var dept = jarray[i].department;

  jarray.push('<div class = "projects" >');
  jarray.push('<div class = "project" >');
  jarray.push('<div class = "label" >"'+ project+'"</div>');
  jarray.push('<div class = "progress" >');
  jarray.push('<span class = "'+ fulltime +'" ></span>');
  jarray.push('<span class = "'+ contractor +'" ></span>');
  jarray.push('<span class = "'+ vendor +'" ></span>');
  jarray.push('<span class = "'+ capacity +'" ></span>');
  jarray.push('</div>');  
  jarray.push('</div>');  
  jarray.push('</div>');

}

  $('.projects').html(jarray.join('')).appendTo(".department_other  > h2");

}); but because the array is to complicated cant access desirable values. Would be appreciated any suggestion, thanks.

share|improve this question
    
I have edited JSON structure and was trying implement @Pualo Roberto's suggested code but still cant make it work – IrecoGnizedYou Jan 23 '14 at 20:32
    
if you used the structure of @PauloRoberto then you need to write var jarray = data.jsonArray. – darthmaim Jan 24 '14 at 8:03
up vote 0 down vote accepted

First: name your JSON childs and the father, i have corrected your JSON, but i'll give you a hint use this site http://json.parser.online.fr/ to manipulate JSON and see how it is.

Second: NEVER use child names as numbers like you did with {"0":{}},{"1":{}} etc.. ALWAYS use a name, or do not use anything, like i did, so you can access directly, otherwise you cannot.

Third: to be precise, first think about what do you want and separate it in groups, organizated, before creating the JSON.

var j = {
            "jsonArray":[
              {
                      "project": "x2 Mobile",
                      "bars": {
                          "fulltime": {
                              "resource": "progress-bar red",
                              "amount": 2
                          },
                          "contractor": {
                              "resource": "progress-bar blue",
                              "amount": 1
                          }
                      },
                      "project": "x2 PC/Web",
                      "bars": {
                          "fulltime": {
                              "resource": "progress-bar red",
                              "amount": 1
                          },
                          "contractor": {
                              "resource": "progress-bar blue",
                              "amount": 1
                          }
                      },
                      "project": "x2 Global/STB",
                      "bars": {
                          "fulltime": {
                              "resource": "progress-bar red",
                              "amount": 11
                          },
                          "contractor": {
                              "resource": "progress-bar blue",
                              "amount": 3
                          }
                      },
                      "project": "x3 Mobile/Apps",
                      "bars": {
                          "fulltime": {
                              "resource": "progress-bar red",
                              "amount": 2
                          },
                          "contractor": {
                              "resource": "progress-bar blue",
                              "amount": 2
                          }
                      },

                  "department": "Herrin"
              },
              {
                      "project": "App Icon Strategy",
                      "bars": {
                          "fulltime": {
                              "resource": "progress-bar red",
                              "amount": 1
                          }
                      },
                  "department": "Herrin/Other"
              },
              {
                      "project": "Packaging",
                      "bars": {
                          "fulltime": {
                              "resource": "progress-bar red",
                              "amount": 1
                          }
                      },
                      "project": "Customer Journey",
                      "bars": {
                          "fulltime": {
                              "resource": "progress-bar red",
                              "amount": 1
                          },
                          "contractor": {
                              "resource": "progress-bar blue",
                              "amount": 1
                          },
                          "vendor": {
                              "resource": "progress-bar green",
                              "amount": 5
                          }
                      },
                  "department": "Other"
              }
          ]
};

Now you can access it by (for example, assuming that i=0):

for(i=0;i<5;i++){
  var project  = j.jsonArray[i].project;
  var fulltime = j.jsonArray[i].bars.fulltime;
  var resource = j.jsonArray[i].bars.contractor.resource;
}
share|improve this answer
    
Thank you, I think it's gonna work. I'll check and post my working code thanks again. – IrecoGnizedYou Jan 23 '14 at 18:44
    
You're welcome. – Paulo Roberto Jan 23 '14 at 18:47
up vote 0 down vote

You can access them in your loop with val.bars.fulltime.resource or data[ i ].bars.fulltime.resource for example.

share|improve this answer
    
thanks so much! – IrecoGnizedYou Jan 23 '14 at 18:45
up vote 0 down vote

Checkout using underscore (http://underscorejs.org/) or lodash (http://lodash.com/). You could use uderscore's .pluck method to easily get at elements within your JSON object...

share|improve this answer
    
Jason object. Its yours! – Paulo Roberto Jan 23 '14 at 18:42
    
thanks, these libraries really would be helpful – IrecoGnizedYou Jan 23 '14 at 18:45

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.