How to use mustache and jquery to display a single registry data from a large json?

Question

This is a JSON I get from a "post" request inside the system I'm working on right now:

{
"return": [
    {
        "id": 1,
        "first_name": "Bonnie",
        "last_name": "Little",
        "email": "[email protected]",
        "country": "Portugal",
        "ip_address": "48.218.146.63"
    },
    {
        "id": 2,
        "first_name": "Judith",
        "last_name": "Martin",
        "email": "[email protected]",
        "country": "Sierra Leone",
        "ip_address": "233.120.55.214"
    },
    {
        "id": 3,
        "first_name": "Carl",
        "last_name": "Richardson",
        "email": "[email protected]",
        "country": "Luxembourg",
        "ip_address": "26.228.244.43"
    },
    {
        "id": 4,
        "first_name": "Carl",
        "last_name": "Richardson",
        "email": "[email protected]",
        "country": "Luxembourg",
        "ip_address": "26.228.244.43"
    }
]
}

Do I have a way to use mustache to display only the data from the id=3 registry?

I'm using mustache and pure jquery

Answer 1

Here's a mustache like template. You'll need to find your item and then parse the template. I don't the calls for the mustache library but it shouldn't be too different.

var obj = {
  "return": [{
    "id": 1,
    "first_name": "Bonnie",
    "last_name": "Little",
    "email": "[email protected]",
    "country": "Portugal",
    "ip_address": "48.218.146.63"
  }, {
    "id": 2,
    "first_name": "Judith",
    "last_name": "Martin",
    "email": "[email protected]",
    "country": "Sierra Leone",
    "ip_address": "233.120.55.214"
  }, {
    "id": 3,
    "first_name": "Carl",
    "last_name": "Richardson",
    "email": "[email protected]",
    "country": "Luxembourg",
    "ip_address": "26.228.244.43"
  }, {
    "id": 4,
    "first_name": "Carl",
    "last_name": "Richardson",
    "email": "[email protected]",
    "country": "Luxembourg",
    "ip_address": "26.228.244.43"
  }]
};

var arr = obj.return;
var i = 0;
var len = arr.length;
var found = null;

for (i = 0; i < len; i++) {
  if (arr[i].id == 3) {
    found = arr[i];
    break;
  }
}

if (found != null) {
  var el = document.getElementById("output");
  var template = el.innerHTML;
  template = template.replace(/{{(.*?)}}/g, function(match, name) {
    return found[name];
  });
  el.innerHTML = template;
}

<div id="output">
  <b>{{first_name}} {{last_name}}</b> is from <b>{{country}}</b>.
</div>