title: Flutter reading from JSON if value matches
body: <p>I have a json of customers:</p>
  
  <p><strong>customer.json</strong></p>
  
  <pre><code>[
    {
      "name": "Customer 1",
      "id": "1"
    },
    {
      "name": "Customer 2",
      "id": "2"
    },
    {
      "name": "Customer 3",
      "id": "3"
    }
  ]
  </code></pre>
  
  <p>This is the dart file using this json data:</p>
  
  <p><strong>customerslist.dart</strong></p>
  
  <p><strong>Future Method</strong></p>
  
  <pre><code>Future&lt;String&gt; loadCustomers() async{
    var res = await http.get(
        Uri.encodeFull(url),
        headers: {"Accept": "application/json"});
    return res.body;
  }
  </code></pre>
  
  <p><strong>Widget</strong></p>
  
  <pre><code>widgets.add(new FutureBuilder(
                future: loadCustomers(),
                builder: (context, snapshot){
                  if(snapshot.hasData){
  
                    //get snapshot data from JSON tree
                    var jsondecode = json.decode(snapshot.data);
  
                    return new ListView.builder(
                        shrinkWrap: true,
                        itemCount: jsondecode.length,
                        itemBuilder: (context, index){
                          String name = jsondecode[index]["name"];
                          String id = jsondecode[index]["id"];
  
                          if(name == "Customer 2"){
                            return new Column(
                              children: &lt;Widget&gt;[
  
                                new ListTile(
                                  title: new Text("Name"),
                                  trailing: new Text(name),
                                ),
                                new ListTile(
                                  title: new Text("ID"),
                                  trailing: new Text(id),
                                )
                              ],
                            );
                          }
                        });
                  }else{
                    return new Center(
                      child: new CircularProgressIndicator(),
                    );
                  }
                }));
  </code></pre>
  
  <p>What I am trying to do is bringing out the values if the name matches as you can see from <code>if(name == "Customer 2")</code>.</p>
  
  <p>But the problem I am having is:</p>
  
  <p>When i change the if statement to <code>if(name == "Customer 1")</code>, the output is as you would expect:</p>
  
  <p><a href="https://i.stack.imgur.com/eiJWk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eiJWk.png" alt="First output"></a></p>
  
  <p>But if i were to change it to <code>if(name == "Customer 2")</code>, the output turns out blank as such:</p>
  
  <p><a href="https://i.stack.imgur.com/GZJHv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GZJHv.png" alt="Second output"></a></p>
  
  <p>Could someone explain why is it turning out like this or is there another method I could go about doing to fix this issue?</p>