current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

This is my JS ("data" is from the json call):

if (data.projectReports.length) {
  for (var i in data.projectReports){
    var report = data.projectReports[i];
    $('#reports').append(
        '<div class="report-description">' +
          '<h2>' + report.header + '</h2>' +
          '<p>' + report.text + '</p>' +
        '</div>' +
        '<ul class=\"report-moreinfo\">' +

          // I want to loop through "persons" here.

        '</ul>'
    );
  }
} else

. . .

This is my JSON:

{
  "projectReports":[
    {
      "header":"Headline",
      "text":"Description of item",
      "estimate":10,
      "actual":7,
      "persons":{
        "Robert":5,
        "Erik":10,
        "Juan":3
      }
    }
  ]
}

I am new to JSON and after searching for an answer and actually finding a few different answers, new problems arose so I thought I would post the question in it's entirety here.

Where the comment is in my JavaScript code, I want to loop through report.persons.

In all of the solutions I found they could point directly to "header" or "text" like I have done before, but in this case I just have a key and value. How would I go about doing something like this?

<li><p> persons.key </p><p> persons.value </p></li>

I understand that I will have to do another for loop, but my knowledge isn't good enough to be able to figure out on my own how to construct it.

share|improve this question
1  
for (var i in report.persons){? anyway you can't loop through an object inside a string declaration! –  LightStyle Jun 18 '13 at 8:06
    
why do you have the property persons as an object and not as an array holding objects? –  Zim84 Jun 18 '13 at 8:06
1  
possible duplicate of How do I enumerate the properties of a javascript object? –  Felix Kling Jun 18 '13 at 8:06

3 Answers 3

up vote 0 down vote accepted

For your code I'd use a function that loops through reports.persons and returns what you need:

var showPersons = function(persons){
  var appendedData = '';
  for (var person in persons) {
    if (!persons.hasOwnProperty(person)) continue;
    appendedData += '<li><p>' + person + '</p><p>' + persons[person] +'</p></li>'
  }
  return appendedData;
};

And now you can use this to append all that stuff inside the <ul> tags:

listPersons(report.persons);

If you wanted the code read closer to what you wanted (and to be able to use person.name and person.value), you'd need to have the JSON in this format:

{
    "projectReports": [
        {
            "header": "Headline",
            "text": "Description of item",
            "estimate": 10,
            "actual": 7,
            "persons": [
                {
                    "name": "Robert",
                    "value": 5
                },
                {
                    "name": "Erik",
                    "value": 10
                },
                {
                    "name": "Juan",
                    "value": 3
                }
            ]
        }
    ]
}
share|improve this answer
    
Thank you so much! This worked perfectly. –  Erik Hellman Jun 18 '13 at 12:55
up vote 1 down vote

This is pretty basic stuff

var personsMarkup = "";
for (var i in persons){
   if (persons.hasOwnProperty(i)){
     console.log(i);          // the key
     console.log(persons[i]); // the value
     // cancat this all together
     personsMarkup =+ "<li><p>"+i+"</p><p>"+persons[i]+"</p></li>";
   }
}

and then:

$('#reports').append(
    /* ... */
    '<ul class=\"report-moreinfo\">' +
    personsMarkup +
    '</ul>';
    /* ... */
);
share|improve this answer
up vote 0 down vote 
$('#reports').append(
    '<div class="report-description">' +
      '<h2>' + report.header + '</h2>' +
      '<p>' + report.text + '</p>' +
    '</div>' +
    '<ul class=\"report-moreinfo\">');
for (var personKey in report.persons){
  $('#reports').append('<li><p>' + personKey + '</p><p>' + report.persons[personKey] + '</p></li>');
}
$('#reports').append(
    '</ul>'
);
share|improve this answer
    
You should have used person instead of person.key and report.persons[person] instead of person.value. –  Rafał Rutkowski Jun 18 '13 at 8:44
    
@RafałRutkowski you are correct. Fixed. –  Cœur Jun 18 '13 at 17:03

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.