How to output JSON data with filter applied JavaScript /jQuery

Question

I have some data on JSON file.

var data = [{
    "gender": "male",
    "name": {
      "first": "rubween",
      "last": "dean"
    }
  },
  {
    "gender": "male",
    "name": {
      "first": "rubween",
      "last": "dean"
    }
  },
  {
    "gender": "female",
    "name": {
      "first": "rubenq",
      "last": "dean"
    }
  }, {
    "gender": "female",
    "name": {
      "first": "rubenr",
      "last": "dean"
    }
  }
];

I want to output only gender: male with their name on HTML div id='output' using jQuery or JavaScript

This is an invalid json. – gurvinder372 Sep 28 '17 at 13:58 — gurvinder372, Sep 28 '17 at 13:58
add your json data properly – Pankaj Makwana Sep 28 '17 at 14:00 — Pankaj Makwana, Sep 28 '17 at 14:00

score 0 · Answer 1 · answered Sep 28 '17 at 14:00

Just try it like below.

var data = [{
    "gender": "male",
    "name": {
      "first": "rubween",
      "last": "dean"
    }
  },
  {
    "gender": "male",
    "name": {
      "first": "rubween",
      "last": "dean"
    }
  },
  {
    "gender": "female",
    "name": {
      "first": "rubenq",
      "last": "dean"
    }
  }, {
    "gender": "female",
    "name": {
      "first": "rubenr",
      "last": "dean"
    }
  }
];

data.forEach(function(person) {
  if (person.gender === "male") {
    document.getElementById("output").innerHTML += person.name.first + " " + person.name.last + "<br>";
  }
});

<div id="output"></div>

score 0 · Answer 2 · answered Sep 28 '17 at 14:06

Inspired by: jquery loop on Json data using $.each

var obj = [{
    "gender": "male",
    "name": {
      "first": "rubween",
      "last": "dean"
    }
  },
  {
    "gender": "male",
    "name": {
      "first": "rubween",
      "last": "dean"
    }
  },
  {
    "gender": "female",
    "name": {
      "first": "rubenq",
      "last": "dean"
    }
  }, {
    "gender": "female",
    "name": {
      "first": "rubenr",
      "last": "dean"
    }
  }
];

$.each(obj, function(i, item) {
if(obj[i].gender=="male")
  $("#output").append(obj[i].name.first+" - "+obj[i].gender+"<br>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">

</div>

score 0 · Answer 3 · answered Sep 28 '17 at 14:11

Here you go with a solution

var data = [{
    "gender": "male",
    "name": {
      "first": "rubween",
      "last": "dean"
    }
  },
  {
    "gender": "male",
    "name": {
      "first": "rubween",
      "last": "dean"
    }
  },
  {
    "gender": "female",
    "name": {
      "first": "rubenq",
      "last": "dean"
    }
  }, {
    "gender": "female",
    "name": {
      "first": "rubenr",
      "last": "dean"
    }
  }
];

$.each(data, function(i){
  if(data[i].gender === 'male')
    $('body').append(`${data[i].name.first} ${data[i].name.last} <br/>`); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Hope this will help you.

How to output JSON data with filter applied JavaScript /jQuery

3 Answers3