Click here to Skip to main content
14,973,021 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a Jquery script that pulling external data from a json file.

How can i filter result by date? Thanks

JavaScript
$.getJSON("Content/Chart/iron/Test2.json", function (data) {
         var items = [];
         $.each(data, function (key, val) {
             items.push("<div id='" + key + "' class='list-group-item list-group-item-action'>" + val.date + " " + val.cars + "</div>");
         });

         $("<div/>", {
             "class": "container list-group",
             html: items.join("")
         }).appendTo("#Secim");
     });


This is my json file content

[
  {
    "date": "2009.10.14",
    "cars": 1587,
    "motorcycles": 650,
    "bicycles": 121
  },
  {
    "date": "2009.10.15",
    "cars": 1567,
    "motorcycles": 683,
    "bicycles": 146
  },
  {
    "date": "2009.10.16",
    "cars": 1617,
    "motorcycles": 691,
    "bicycles": 138
  },
  {
    "date": "2009.10.17",
    "cars": 1630,
    "motorcycles": 642,
    "bicycles": 127
  },
  {
    "date": "2009.10.18",
    "cars": 1660,
    "motorcycles": 699,
    "bicycles": 105
  },
  {
    "date": "2009.10.19",
    "cars": 1683,
    "motorcycles": 721,
    "bicycles": 109
  }
]


What I have tried:

Perhaps i found two solutions from internet (stackoverflow) but i dont know how can i use it

JavaScript
var filteredData = this.orders.filter(function(a){
    aDate = new Date(a.fecha);
    return aDate >= startDate && aDate <= endDate;
});


or this

JavaScript
var startDate = new Date("2015-08-04");
        var endDate = new Date("2015-08-12");

        var resultProductData = product_data.filter(function (a) {
            var hitDates = a.ProductHits || {};
            // extract all date strings
            hitDates = Object.keys(hitDates);
            // improvement: use some. this is an improment because .map()
            // and .filter() are walking through all elements.
            // .some() stops this process if one item is found that returns true in the callback function and returns true for the whole expression
            hitDateMatchExists = hitDates.some(function(dateStr) {
                var date = new Date(dateStr);
                return date >= startDate && date <= endDate
            });
            return hitDateMatchExists;
        });
        console.log(resultProductData);
Posted
Updated 11-Apr-21 22:13pm
v2

1 solution

If you want a jQuery solution, use grep:
jQuery.grep() | jQuery API Documentation[^]
JavaScript
$.getJSON("Content/Chart/iron/Test2.json", function (data) {
    var startDate = new Date("2015-08-04");
    var endDate = new Date("2015-08-12");

    var filteredData = $.grep(data, function(a){
        var aDate = new Date(a.date);
        return aDate >= startDate && aDate <= endDate;
    });
    
    var div = $("<div/>", { "class": "container list-group" });
    
    $.each(filteredData, function (key, val) {
        var item = $("<div/>", {
            id: key,
            "class": "list-group-item list-group-item-action"
        });
        
        item.text(val.date);
        item.appendTo(div);
    });
    
    div.appendTo("#Secim");
});
   
Comments
gacar 12-Apr-21 5:16am
   
Thank you very much, Worked.
gacar 12-Apr-21 5:50am
   
I also thank you for my Other Problem. Fixed my problem with your solution.
gacar 12-Apr-21 5:51am
   
If you solution there, i will accept it.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900