2

I've created an application in angular-JS for sorting values in tables. Certain columns in tables are dynamic and been created based on the child JSON array

For example the JSON structure returning from a service is in the structure where the others field of the main JSON contains another JSON array which is the additional columns,

In the below structure the
first object has File 4,
second object has File 1 and File 2,
third object has File 2 and File 3 and
fourth object has File 3 and File 4

so all together there will be four additional dynamic columns i.e File 1, File 2, File 3, File 4 each object has value for the corresponding File field, sometime present sometime not present. 

<th ng-repeat="colms in getcolumns()"><a ng-click="sort_by("dont know wat to pass")">
              <i>{{colms}}</i>
            </a>
</th>

I've shown the tables with the dynamic columns perfectly also I've implemented the sorting for each columns using angular-js. But the problem is that the sorting is working for all table columns except the dynamic columns

Can anyone please tell me some solution for this

My JS-Fiddle is given below

Demo

Improve this question

2 Answers 2

Reset to default
1
+50

I understand you cant change the service that brings you the datas but you can transform it after you have it inside your controller. I created a function for you that should change your list's other column into individual columns having id as key and value as value.

$scope.transformDatas = function() {
    $scope.newDatas = [];
    for(var i in $scope.datas) {
        var auxData = {};
        angular.forEach($scope.datas[i], function(value, key) {
            if(key != 'others')
                auxData[key] = value;
            else {
                for(var j in $scope.datas[i].others) {
                    var nth = 1;
                    while(auxData[$scope.datas[i].others[j].id + ',' + nth] != undefined)
                        nth++;
                    auxData[$scope.datas[i].others[j].id + ',' + nth] = $scope.datas[i].others[j].value;
                }
            }
        });
        $scope.newDatas.push(auxData);
    }
}

From here to your goal it's easy job, you already done it (sorting the normal fields).

Fiddle http://jsfiddle.net/KR6Xh/15/

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

But there are also duplicates columns ..like File4, File4 with different values since in ur transform json wont allow duplicate keys right so one column is dropped.....actually I want that duplicates columns also....and should be sorting
From data representation view point i wouldnt recommend on having duplicate columns. I see in the Question user123 posted; for workname:France there are two files for id:File4 so instead of having two columns of File4 have two rows in the table one row for file4a.png and other for file4b.png. ideally table should be normalized if possible
@RishulMatta but the requirement is to print it as two columns in a single row......
Pacuraru Daniel , is there any way to implement the same with sorting..need duplicate columns too.
@user123 i updated my answer, now the only thing you need is to get the part of the string before the comma, if im not mistaken you can do that with name.split(',')[0] or something
|
1

In order to sort the incoming JSON file you need to address the JSON fields. you can, when pressing the File1 for example, sort by the 'other' field ng-click="sort_by('others')" but it has no meaning.

my advice is to implement a more sophisticated sorting method when sorting the dynamic columns, like these:

<div ng-repeat="item in items | orderBy:foo">

and foo implementation will be:

$scope.foo = function(a, b) {
  comparison code here;
}

the comparison function should be as documented in here - http://docs.angularjs.org/api/ng/filter/orderBy

Improve this answer

5 Comments

the key press can change a variable that the foo function use.
but in my case the dynamic columns informations are within a child field right as another JSON array....so how can we do the sorting for that
actually a better solution is to flatten the API JSON response to your own JSON and work with that.
a and b represent any item in the original array, so a.other returns the inner array.
can you please tell me how to flatten the API JSON response ....also into which format so many days i'm working with this....not getting any solution.....

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.