Home>

I have data based on which I build a dynamic table

Const dbobj= [
  {
    ID: '5C2286FB23E87BE312D55D9A',
    Name: {FirstName: 'Brooks', LastName: 'Stone'},
    Phone: '+7 (843) 431-2190',
    About: 'QUI Aliquip Esse Occaecat Voluptate Cillum Laborum Do Adipisicing EA. Lorem Dolor Pariatur Exercitation et Lorem Voluptate Reprehenderit. Culpa Nisi Sunt Laborum Culpa EU ET NULLA AUTE ALIQUA Commodo Cupidatat Culpa. Eu Laboris Dolor Enim Officia Mollit Labore Proident Proident Tempor Ex Minim Magna Dolor. Ipsum Cillum Officia IRRUE Amet Enim Voluptate Consequat Deserunt Laborum Nulla Excepteur Pariatur Voluptate Incididunt. In Excepteur Adipisicing Dolor Ea Occaecat ELIT. IRURE DOLOR QUIS CILLUM MINIM VOLUPTATE. ',
    EyeColor: 'Blue'
  }
  {
    ID: '5C2286FB25005BD0905C04E1',
    Name: {firstName: 'Susie', LastName: 'newman'},
    Phone: '+7 (910) 551-3326',
    About: 'Non Eiusmod Minim UT Anim Qui Non Dolore Veniam. Lorem Veniam Nostrud Ullamco AD Enim Commodo Incididunt Amet Ipsum IRURE. Minim Sint Tempor Incididunt Quis. Excepteur Commodo Mollit Elit Voluptate Reprehenderit Eiusmod Ex Nostrud Dolor Mollit. Culpa Duis Pariatur Anim Sunt In IruRe Ex Aliqua. '
    EyeColor: 'Red'
  }
  {
    ID: '5C2286FB7F4C26C63EFF1B66',
    Name: {FirstName: 'Armani', LastName: 'Armani'},
    Phone: '+7 (939) 409-2841',
    About: 'EU IPSUM EST IN Exercitation Voluptate Occaecat Fugiat Fugiat Ea Elit Ad Veniam Adipisicing ULLAMCO. Laboris Consectetur ENIM DOLORE AMET EXERCITATION SIT NON DO REPREREHENIT NON. Proident Consequat Anim Non Voluptate Non Culpa Sit Occaecat Adipisicing. REPREREHENDERIT DOL CILLUM LABORIS INCIDIDUNT EXERCITATION QUIS ESSE IN AD UT VOLUPTATE COMMODO IN. Exercitation Veniam Adipisicing IRURE UT Qui Nulla. ',
    EyeColor: 'brown'
  }
];

I'm trying to build a table with the sorting function according to the alphabet. JS code:

let dbobj= [
  {
    ID: '5C2286FB23E87BE312D55D9A',
    Name: {FirstName: 'Brooks', LastName: 'Stone'},
    Phone: '+7 (843) 431-2190',
    About: 'QUI Aliquip Esse Occaecat Voluptate Cillum Laborum Do Adipisicing EA. Lorem Dolor Pariatur Exercitation et Lorem Voluptate Reprehenderit. Culpa Nisi Sunt Laborum Culpa EU ET NULLA AUTE ALIQUA Commodo Cupidatat Culpa. Eu Laboris Dolor Enim Officia Mollit Labore Proident Proident Tempor Ex Minim Magna Dolor. Ipsum Cillum Officia IRRUE Amet Enim Voluptate Consequat Deserunt Laborum Nulla Excepteur Pariatur Voluptate Incididunt. In Excepteur Adipisicing Dolor Ea Occaecat ELIT. IRURE DOLOR QUIS CILLUM MINIM VOLUPTATE. ',
    EyeColor: 'Blue'
  }
  {
    ID: '5C2286FB25005BD0905C04E1',
    Name: {firstName: 'Susie', LastName: 'newman'},
    Phone: '+7 (910) 551-3326',
    About: 'Non Eiusmod Minim UT Anim Qui Non Dolore Veniam. Lorem Veniam Nostrud Ullamco AD Enim Commodo Incididunt Amet Ipsum IRURE. Minim Sint Tempor Incididunt Quis. Excepteur Commodo Mollit Elit Voluptate Reprehenderit Eiusmod Ex Nostrud Dolor Mollit. Culpa Duis Pariatur Anim Sunt In IruRe Ex Aliqua. '
    EyeColor: 'Red'
  }
  {
    ID: '5C2286FB7F4C26C63EFF1B66',
    Name: {FirstName: 'Armani', LastName: 'Armani'},
    Phone: '+7 (939) 409-2841',
    About: 'EU IPSUM EST IN Exercitation Voluptate Occaecat Fugiat Fugiat Ea Elit Ad Veniam Adipisicing ULLAMCO. Laboris Consectetur ENIM DOLORE AMET EXERCITATION SIT NON DO REPREREHENIT NON. Proident Consequat Anim Non Voluptate Non Culpa Sit Occaecat Adipisicing. REPREREHENDERIT DOL CILLUM LABORIS INCIDIDUNT EXERCITATION QUIS ESSE IN AD UT VOLUPTATE COMMODO IN. Exercitation Veniam Adipisicing IRURE UT Qui Nulla. ',
    EyeColor: 'brown'
  }
];
FUNCTION CREATETABLE (DB) {
  Let TableContent= Document.getelementByid ('Content');
  Let MaxTextLen= 50;
  TableContent.innerhtml= '';
  For (Let i= 0; I <
 db.Length; I ++) {
    Let Row= `<
TR >
 ≪
TD >
$ {db [i] .name.firstName} <
/TD >
                 ≪
TD >
$ {db [i] .name.lastName} <
/TD >
                 ≪
TD >$ {(db [i] .about.Length > MaxTextLen)? DB [i]. But.substring (0, MaxTextLen) + '...': DB [i] .about} <
/TD >
                 ≪
TD >
$ {db [i] .eyecolor} <
/TD >
 ≪
/TR >
`;
 TableContent.innerhtml += Row;
  }
}
CreateTable (DBOBJ);
Const Headers= Document.QuerySelectorall ('. Header');
Headers.Foreach (Element= >
 {
  element.addeventlistener ('Click', E= >
 {
 Console.log (E.Target.ID);
 if (e.target.dataset.order== 'des') {
 e.target.dataset.order= 'ASC';
 dbobj= dbobj.sort ((a, b)= >
 A [E.Target.ID] >
 B [E.Target.ID]? eleven
 );
    } ELSE {
 e.target.dataset.order= 'des';
 dbobj= dbobj.sort ((a, b)= >
      A [E.Target.ID] <
 B [E.Target.ID]? eleven
 )
  }
 CreateTable (DBOBJ);
 Console.log (e.target.dataset.order);
  });
});
//Console.log (Headers); 
<
Table Class= "Table" >
    ≪
TR class= "info" >
      ≪
Th Class= "Header" id= "firstName" data-order= "des" >
Name <
/th >
      ≪
Th Class= "Header" id= "LastName" Data-Order= "DES" >
Surname <
/th >
      ≪
Th Class= "Header" id= "About" data-order= "des" >
Description <
/th >
      ≪
Th Class= "Header" id= "EyeColor" Data-Order= "DES" >
Eye color <
/th >
    ≪
/TR >
    ≪
TBODY ID= "CONTENT" CLASS= "CONTENT" >
≪
/TBODY >
  ≪
/Table >

The essence of the question: EyeColor and About columns are sorted as alphabetically, everything works correctly. But the first two columns firstName and LastName are not sorted by alphabetically. Moreover, if you remove the object nesting in the source file with the name of the FIRSTNAME and LASTNAME), then everything works fine as the remaining speakers. I do not understand why so can someone tell me how to be in this situation? What is wrong in the code?

PS, of course, I made a crutch, removing nesting, but there is such a shockode and, as it seems to me, this is absolutely wrong manipulation. Therefore, I recalculate the options of the rule

PS without jQuery pls

Thank you all!

Why do you sort the object? Sort the table rows.

nazarpunk2021-09-17 00:57:11

But you do not have in the objects of the field of FIRStName and LastName fields, there is only a Name field -no wonder that sorting over these fields does not work, there all the time compares undefined and undefined. Or remove the nesting, or add an additional conditional branching to the sort function, depending on the title, which will compare the fields of different nesting levels.

vsemozhebuty2021-09-17 00:57:11

IMHO, the solution is too confusing and not quite faithful ... I propose to do a sort of sorting state with fields: a sorted object (reference); Sort property name (string); direction of sorting (Boolean value, as he ascending); order of following (array of indexes of elements); The general method of sorting by property (function with the optional argument of the comparator Callback, FallBekk using the internal implementation of the comparator via LocalecomPare); Optional methods -hooks start and completing sorting (CallBacks). There will be a code that it will work, and work will work, and rewarding.

yar852021-09-17 00:57:11

Scriptures of course will do more, but the amount of advantages (forgot another mention: useful practice of working with OOP) significantly outweighs this conditional flaw.

yar852021-09-17 00:57:11

@vsemozhebuty Thank you

Skrr Boy2021-09-17 00:57:11