CODEWITHSUNDEEP
javascriptjsonreactjs
Yayang Kurniawan
Yayang Kurniawan

Reputation: 25

JS loop for with condition getting 0 on javascript

I have JSON data like this:

[{20181:{jum:27}},{20182:{jum:27}},{20191:{jum:27}},{20192:{jum:27}},{20201:{jum:27}},{20202}]

I tried to use the for function to call the data, with code :

let i = 0;
let {mhsaktif}=this.state;
          let t20181 = [];
          let t20182 = [];
          let t20191 = [];
          let t20192 = [];
          let t20201 = [];
          let t20202 = [];
          for(i = 0; i < mhsaktif.length; i++){
            if(mhsaktif[i][20181] != undefined){
              t20181 =<td style={{textAlign:'center'}}>{mhsaktif[i][20181].jum}</td>;
            }else{
              t20181 =<td style={{textAlign:'center'}}>0</td>;
            }
            if(mhsaktif[i][20182] != undefined){
              t20182 =<td style={{textAlign:'center'}}>{mhsaktif[i][20182].jum}</td>;
            }else{
              t20182 =<td style={{textAlign:'center'}}>0</td>;
            }
            if(mhsaktif[i][20191] != undefined){
              t20191 =<td style={{textAlign:'center'}}>{mhsaktif[i][20191].jum}</td>;
            }else{
              t20191 =<td style={{textAlign:'center'}}>0</td>;
            }
            if(mhsaktif[i][20192] != undefined){
              t20192 =<td style={{textAlign:'center'}}>{mhsaktif[i][20192].jum}</td>;
            }else{
              t20192 =<td style={{textAlign:'center'}}>0</td>;
            }
            if(mhsaktif[i][20201] != undefined){
              t20201 =<td style={{textAlign:'center'}}>{mhsaktif[i][20201].jum}</td>;
            }else{
              t20201 =<td style={{textAlign:'center'}}>0</td>;
            }
            if(mhsaktif[i][20202] != undefined){
              t20202 =<td style={{textAlign:'center'}}>{mhsaktif[i][20202].jum}</td>;
            }else{
              t20202 =<td style={{textAlign:'center'}}>0</td>;
            }
       }

so I call on return

{t20181}{t20182}{t20191}{t20192}{t20201}{t20202}

Why does the output produce an image like the one below: enter image description here

My thanks for yout answer sir

Upvotes: 0

Views: 35

Answers (1)

Wendelin
Wendelin

Reputation: 2401

I'll explain with with an example.

Let's say i is 0
The first condition will go into the if branch and set t20181.

t20181 =<td style={{textAlign:'center'}}>{mhsaktif[i][20181].jum}</td>;

Next when i becomes 1
The first condition is executed again and will go into the else branch and override t20181

t20181 =<td style={{textAlign:'center'}}>0</td>;

Now t20181 will forever be <td style={{textAlign:'center'}}>0</td>.

You could use this loop to fix the problem

let elements = []
for(i = 0; i < mhsaktif.length; i++) {
  let key = Object.keys(mhsaktif[i])[0]
  if(key != null && mhsaktif[i][key] != null) {
    elements[key] = <td style={{textAlign:'center'}}>{mhsaktif[i][key].jum}</td>;
  } else {
    elements[key] = <td style={{textAlign:'center'}}>0</td>;
  }
}

Upvotes: 2

Related Questions