JSON shows different value in console.log than it does in inspection

Question

why does 'period' show a different value in the top, but then when i open it it is the incorrect value? it seems to be getting set to 'trans'. When i change trans, period changes to match it. I can't figure out why.

here's the json which passes a validator

{
  "path": [
    {
      "startPoint": [
        51.18405179866264,
        186.67944723553336
      ],
      "endPoint": [
        -52.87910536481125,
        185.58745779436651
      ],
      "startControlPoint": [
        -9.510210753822385,
        185.74676954768933
      ],
      "endControlPoint": [
        -58.288952135056356,
        202.15686252421276
      ]
    },
    {
      "startPoint": [
        -52.87910536481125,
        185.58745779436651
      ],
      "endPoint": [
        -6.037247155642847,
        155.23717435838498
      ],
      "startControlPoint": [
        -47.46925859456615,
        169.01805306452027
      ],
      "endControlPoint": [
        -23.50210316708793,
        163.0773808334999
      ]
    },
    {
      "startPoint": [
        -6.037247155642847,
        155.23717435838498
      ],
      "endPoint": [
        4.568646820797503,
        4.602575453558272
      ],
      "startControlPoint": [
        10.417755364462082,
        147.8503045656071
      ],
      "endControlPoint": [
        -9.723822478696025,
        105.85178701663659
      ]
    },
    {
      "startPoint": [
        4.568646820797503,
        4.602575453558272
      ],
      "endPoint": [
        8.595066726515185,
        -128.67691658985896
      ],
      "startControlPoint": [
        18.397402736935422,
        -93.36164640814859
      ],
      "endControlPoint": [
        -2.2825914192229018,
        -71.8164372099004
      ]
    },
    {
      "startPoint": [
        8.595066726515185,
        -128.67691658985896
      ],
      "endPoint": [
        53.251085563353215,
        -193.02748433952422
      ],
      "startControlPoint": [
        17.323331371413573,
        -174.3019312037367
      ],
      "endControlPoint": [
        27.53703941339505,
        -193.02748433952422
      ]
    }
  ],
  "fx": [
    {
      "type": "waves",
      "values": {
        "amount": 70,
        "period": 60,
        "trans": 30,
        "area": [
          0,
          100
        ],
        "waveform": "half-sine"
      }
    }
  ]
}

here's where it gets set

set_fx_from_json(obj){
    this.clear_fx();
    console.log(obj);

    var fx = obj['fx'];
    console.log(fx);
    for( var i = 0; i<fx.length; i++){
        console.log(fx[i]);
        var type = fx[i]["type"];
        var data = fx[i]["values"];
        console.log(type);
        console.log(data);
        this.add_new_effect(type, data);
    }
}

if i do a console.log(data["period"]); i get 60, making things more confusing