How can I fix variables of an array of objects being undefined when being imported from a json file?

Question

I am creating a website to practice my coding on and I came across a problem while doing so. I am trying to import data from a json file with a forloop and the variables came back as undefined. I think it has to do with the i variable in the foreach, but I could be wrong. Any help is much appreciated. Thanks!

<script>
    $.getJSON('package.json', function(data){
        for(var i in data)
        {
            var username = i.username;
            var value = i.value;
            var tokens= i.tokens;
            $(".list-group").append('<li>' + username + ' has deposited $' + value + ' in ' + tokens + ' tokens</li>');
        }
    });
</script>

And here is a copy of the json file

{
  "u1":
  {
    "username": "Username1",
    "tokens": 2,
    "value": 26
  },
  "u2":
  {
    "username": "Username2",
    "tokens": 4,
    "value": 292
  },
  "u3":
  {
    "username": "Username3",
    "tokens": 10,
    "value": 127
  },
  "u4":
  {
    "username": "Username4",
    "tokens": 3,
    "value": 12
  }
}

I think you're right, it has something to do with the `i`, as it's really the objects key, most likely a string, and you should be doing `data[i].username` — adeneo, May 28 '15 at 20:24
@ NightShadows: If `data` is an array, probably best not to use `for-in` on it, as that's not what `for-in` is for. Use `forEach` or jQuery's `$.each` or a simple `for` loop or [any of several other ways](http://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript/9329476#9329476). — T.J. Crowder, May 28 '15 at 20:28

Mulan · Answer 1 · 2015-05-28T20:26:21.830

3

if data is an array, i will be an Integer-value string of the index.

You'll want data[i].username, data[i].value, data[i].tokens instead

if data is an object, you don't need to iterate through it

You'll want data.username, data.value, data.tokens instead

edited May 28 '15 at 20:26

answered May 28 '15 at 20:25

Mulan

129,518
31
228
259

1

@T.J.Crowder thanks for the technical clarification <3 – Mulan May 28 '15 at 20:27

score 0 · Answer 2 · answered May 28 '15 at 20:24

if the data from json is array of object use it;

    <script>
            $.getJSON('package.json', function(data){
                for(var i in data)
                {
                    var username = data[i].username;
                    var value = data[i].value;
                    var tokens= data[i].tokens;
                    $(".list-group").append('<li>' + username + ' has deposited $' + value + ' in ' + tokens + ' tokens</li>');
                }
            });
</script>

else use it

 <script>
            $.getJSON('package.json', function(data){

                    var username = data.username;
                    var value = data.value;
                    var tokens= data.tokens;
                    $(".list-group").append('<li>' + username + ' has deposited $' + value + ' in ' + tokens + ' tokens</li>');

            });
</script>

How can I fix variables of an array of objects being undefined when being imported from a json file?

2 Answers2