从json文件导入时，如何修复未定义对象数组的变量？

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
  }
}

Answer 1

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

Answer 2

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>