CODEWITHSUNDEEP
javascriptjqueryjson
tomas271
tomas271

Reputation: 25

Select element by id json, jquery

I have a problem witch select only one element. I send in adres URL two parameters id category and id course. When i click in first course i have id=1, id=1. How can I select an item using the id

[
    {
        "id": 1,
        "name": "Tytu³",
        "isNew": true,
        "description": "Opis dzia³u",
        "courses": [
            {
                "id": 1,
                "isNew": true,
                "price": 120,
                "time": 50,
                "assumptions": "Assumption 1",
                "knowledge": "Wiedza",
                "domainId": 1,
                "programs": [

and this is my question on jQuery

var idKategori = $.urlParam('idkat');
var idKursu = $.urlParam('id');

      $.getJSON('http://tommagisterka.apphb.com/api/Domains', function(response) {

      }); 

  });

Upvotes: 1

Views: 755

Answers (1)

Duncan
Duncan

Reputation: 841

There are a couple of ways you can solve this problem. You can write some script to loop through each item in the outer an inner array, and check each for your key. There are also libraries available to extract the portion you are interested in without writing a bunch of code.

Firstly if you want to write the code yourself you would do something like this:

function findCourse(json, idKategori, idKursu) {

    for (var i = 0; i < response.length; i++) {
        var kategori = response[i];

        if (kategori.id == idKategori && kategori.courses) {
            for (var j = 0; j < kategori.courses.length; j++) {
                var kursu = kategori.courses[j];
                if (kursu.id == idKursu) {
                    return kursu;
                }
            }
        }
    }
}

var idKategori = $.urlParam('idkat');
var idKursu = $.urlParam('id');

  $.getJSON('http://tommagisterka.apphb.com/api/Domains', function(response) {
        var course = findCourse(response, idKategori, idKursu);
  });

This is quite a bit of code. There are libraries available to make this simpler. JSON Path (http://goessner.net/articles/JsonPath/) and Lodash (https://lodash.com) are just two examples.

Using JSON Path you would do something like this:

var idKategori = $.urlParam('idkat');
var idKursu = $.urlParam('id');

  $.getJSON('http://tommagisterka.apphb.com/api/Domains', function(response) {
        var course = jsonPath(response, "$[?(@.id==" + idKategori + ")].courses[?(@.id==" + idKursu + ")]")[0];
  });

The parameter passed to JSON Path is $[?(@.id==1)].courses[?(@.id==1)] which basically says, find me the first item in the array with id equal to 1, and then under that the first course with id equal to 1. Note that JSON Path always returns an array hence the [0] at the end.

See a working example here: http://www.jsonquerytool.com/sample/jsonpathmultilevelfilter

If you were to use Lodash it would look like this.

var idKategori = $.urlParam('idkat');
var idKursu = $.urlParam('id');

  $.getJSON('http://tommagisterka.apphb.com/api/Domains', function(response) {
    var course = _(response).chain()                // Setup the response for chaining multiple filters
        .where(function (x) { return x.id == idKategori; })  // Select the category with id of idKategori
        .first()                                             // Take the first item in the result array
        .result('courses')                                   // Get the courses property from the category object
        .where(function (x) { return x.id == idKursu; })     // Get the course with id of idKursu in the course array
        .first()                                             // Get the first item in the result array
        .value();                                            // Get the output from the lodash query

  });

See a working example here: http://www.jsonquerytool.com/sample/lodashmultilevelfilter

Upvotes: 1

Related Questions