HTML Elements Forums General Discussions How to get ONLY data properties?

This topic contains 11 replies, has 3 voices, and was last updated by Avatar admin 1 year ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #100206
    Avatar
    Anonymous

    How can I get an object with ONLY the data properties?

     

    Example:

     

    const app = new Smart.App(
    {
    // Note: data can only be nested one-deep!
    // As well, event functions cannot be nested!
    data: {
    enrollmentNew: {
    courseID: ‘test123’,
    loginName: ‘jon@example.com’,
    studentID: ‘123test’
    }
    }
    }
    );

    Since I have each form input bound to a property of data.enrollmentNew, I thought it might be neat to use it to create JSON for submission to backend using Fetch/ajax.

    So, I used e.g. attrsForSubmit = Object.assign({}, app.data.enrollmentNew) (to get only own properties without ES7 .assign() or polyfill).

    However, I find there are “extra” properties, such as name, propertyName, etc. and of course that doesn’t make my backend happy.

    <hr />

    In general, I find the documentation – while extensive – lacking – particularly on basics. I find I have to do a LOT of experiments to guess how this stuff works. For example, I find NO comprehensive listing of functions for each object. There is SOME information buried throughout the examples and a bit in the (ALSO buried) “framework” section of the docs. If I could just easily look-up the functions in each object, (especially fundametal “framework” type objects!) it would be a HUGE improvement. Am I missing something?

     

     

    #100207
    Avatar
    Anonymous

    FWIW, for now I revert to gathering input values using a little formToObj function that goes through and collects input, select, textarea values from the form…

    #100208
    Avatar
    admin
    Keymaster

    Hi jtara,

    We will consider your comments about our documentation and framework. About the listing of functions of objects – we document only built-in functions, not all inherited from HTMLElement.

    Regards,
    George

    Smart HTML Elements Team
    https://www.htmlelements.com

    #100221
    Avatar
    Anonymous

    I think you missed the point. Sorry, I should not have mixed comments about the documentation with comments about Observables.

    So, apparently, app.data items are Observables.

    I want to be able to enumerate through e.g. app.data.enrollmentNew so that I can do something with all of the key/value pairs.

    But I find that Observable objects are polluted with many additional properties that are NOT the properties that I defined in app.data.enrollmentNew. This makes it fairly useless for many purposes.

    How can I iterate through ONLY the properties that I defined?

    boundAttrs.keys:
    <div class=”console-view-object-properties-section object-value-array source-code expanded”>
    <div class=”tree-outline-disclosure tree-outline-disclosure-hide-overflow”>

      <li class=”parent object-properties-section-root-element expanded selected” tabindex=”-1″><span class=”console-object console-object-preview” tabindex=”-1″><span class=”object-description”>(23) </span><span class=”object-properties-preview”>[<span class=”object-value-string”>”name”</span>, <span class=”object-value-string”>”shortName”</span>, <span class=”object-value-string”>”description”</span>, <span class=”object-value-string”>”address”</span>, <span class=”object-value-string”>”city”</span>, <span class=”object-value-string”>”stateCode”</span>, <span class=”object-value-string”>”zipCode”</span>, <span class=”object-value-string”>”province”</span>, <span class=”object-value-string”>”country”</span>, <span class=”object-value-string”>”postalCode”</span>, <span class=”object-value-string”>”codes”</span>, <span class=”object-value-string”>”tags”</span>, <span class=”object-value-string”>”notes”</span>, <span class=”object-value-string”>”annex”</span>, <span class=”object-value-string”>”hasOwnProperty”</span>, <span class=”object-value-string”>”isPrototypeOf”</span>, <span class=”object-value-string”>”propertyIsEnumerable”</span>, <span class=”object-value-string”>”toString”</span>, <span class=”object-value-string”>”valueOf”</span>, <span class=”object-value-string”>”toLocaleString”</span>, <span class=”object-value-string”>”_canNotify”</span>, <span class=”object-value-string”>”notifyFn”</span>, <span class=”object-value-string”>”propertyName”</span>]</span></span>
    1. <span class=”name-and-value”><span class=”name”>0</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>name<span class=”object-value-string-quote”>”</span></span></span>
    2. <span class=”name-and-value”><span class=”name”>1</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>shortName<span class=”object-value-string-quote”>”</span></span></span>
    3. <span class=”name-and-value”><span class=”name”>2</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>description<span class=”object-value-string-quote”>”</span></span></span>
    4. <span class=”name-and-value”><span class=”name”>3</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>address<span class=”object-value-string-quote”>”</span></span></span>
    5. <span class=”name-and-value”><span class=”name”>4</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>city<span class=”object-value-string-quote”>”</span></span></span>
    6. <span class=”name-and-value”><span class=”name”>5</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>stateCode<span class=”object-value-string-quote”>”</span></span></span>
    7. <span class=”name-and-value”><span class=”name”>6</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>zipCode<span class=”object-value-string-quote”>”</span></span></span>
    8. <span class=”name-and-value”><span class=”name”>7</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>province<span class=”object-value-string-quote”>”</span></span></span>
    9. <span class=”name-and-value”><span class=”name”>8</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>country<span class=”object-value-string-quote”>”</span></span></span>
    10. <span class=”name-and-value”><span class=”name”>9</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>postalCode<span class=”object-value-string-quote”>”</span></span></span>
    11. <span class=”name-and-value”><span class=”name”>10</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>codes<span class=”object-value-string-quote”>”</span></span></span>
    12. <span class=”name-and-value”><span class=”name”>11</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>tags<span class=”object-value-string-quote”>”</span></span></span>
    13. <span class=”name-and-value”><span class=”name”>12</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>notes<span class=”object-value-string-quote”>”</span></span></span>
    14. <span class=”name-and-value”><span class=”name”>13</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>annex<span class=”object-value-string-quote”>”</span></span></span>
    15. <span class=”name-and-value”><span class=”name”>14</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>hasOwnProperty<span class=”object-value-string-quote”>”</span></span></span>
    16. <span class=”name-and-value”><span class=”name”>15</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>isPrototypeOf<span class=”object-value-string-quote”>”</span></span></span>
    17. <span class=”name-and-value”><span class=”name”>16</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>propertyIsEnumerable<span class=”object-value-string-quote”>”</span></span></span>
    18. <span class=”name-and-value”><span class=”name”>17</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>toString<span class=”object-value-string-quote”>”</span></span></span>
    19. <li class=””><span class=”name-and-value”><span class=”name”>18</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>valueOf<span class=”object-value-string-quote”>”</span></span></span>

    20. <span class=”name-and-value”><span class=”name”>19</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>toLocaleString<span class=”object-value-string-quote”>”</span></span></span>
    21. <span class=”name-and-value”><span class=”name”>20</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>_canNotify<span class=”object-value-string-quote”>”</span></span></span>
    22. <span class=”name-and-value”><span class=”name”>21</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>notifyFn<span class=”object-value-string-quote”>”</span></span></span>
    23. <li class=””><span class=”name-and-value”><span class=”name”>22</span>: <span class=”object-value-string value”><span class=”object-value-string-quote”>”</span>propertyName<span class=”object-value-string-quote”>”</span></span></span>
      <li class=””><span class=”name-and-value”><span class=”name object-properties-section-dimmed”>length</span>: <span class=”object-value-number value”>23</span></span>

    </div>
    </div>

    #100222
    Avatar
    Anonymous

    Sorry. That did not paste as I expected! (And there doesn’t seem to be any way to edit a post?)

    boundAttrs.keys: (23) [“name”, “shortName”, “description”, “address”, “city”, “stateCode”, “zipCode”, “province”, “country”, “postalCode”, “codes”, “tags”, “notes”, “annex”, “hasOwnProperty”, “isPrototypeOf”, “propertyIsEnumerable”, “toString”, “valueOf”, “toLocaleString”, “_canNotify”, “notifyFn”, “propertyName”]

    #100223
    Avatar
    Anonymous

    To be more clear:

    const boundAttrs = app.data.schoolNew;
    console.info(‘boundAttrs’, boundAttrs);
    console.info(‘boundAttrs.keys:’, Object.keys(boundAttrs));

    for (const key of Object.keys(boundAttrs)) {
    console.log(key: ${key} hasOwnProperty: ${boundAttrs.hasOwnProperty(key)});
    }

    This gives me the list of keys from above, and after adding check for own property, they are all own property.

    So, how do I get JUST the bound variables from the Proxy object, WITHOUT pollution like “propertyName”, etc?

    I guess I can filter out functions, and what is left will just be my properties? Isn’t there some function to do that for me? It would seem very common to want to iterate through bound variables, but there seems no convenient way to do it.

     

    #100224
    Avatar
    Anonymous

    Ugh! This forum is IMPOSSIBLE! That code did not paste right. The forum did not like my backticks!

    The line in my “for” is: (I substitute <backtick> for actual backtick below, because the forum doesn’t like backtick…)

    console.log(<backtick>key: ${key} hasOwnProperty: ${boundAttrs.hasOwnProperty(key)}<backtick>);

    #100225
    Avatar
    Anonymous

    Well, ignoring functions won’t do it. Because the Proxy object has e.g. _canNotify which is boolean, propertyName string, notifyFn object.

    I could filter these out explicitly (along with functions) after copying with Object.assign() but then I have to worry with each future release what has been added that I have to filter out.

    What am I missing here? What is the use of of this if I cannot iterate my own properties that I added in app.data without pollution? I need to make a separate redundant list of my key names, it is a royal pain.

    #100226
    Avatar
    Anonymous

    I have a workaround – I actually already had the keys in my own object, which I used to initialize app.

    // Note: data can only be nested one-deep!
    // As well, event functions cannot be nested!
    const smartData = {
    enrollmentNewSubmit: newEnrollmentSubmit,
    enrollmentNew: {
    courseID: ”,
    loginName: ”,
    studentID: ”
    },
    schoolNewSubmit: newSchoolSubmit,
    schoolNew: {
    name: ”,
    shortName: ”,
    description: ”,
    address: ”,
    city: ”,
    stateCode: ”,
    zipCode: ”,
    province: ”,
    country: ‘US’,
    postalCode: ”,
    codes: ”,
    tags: ”,
    notes: ”,
    annex: ”
    }
    };

    So, I can e.g.

    for (const key of Object.keys(smartData.schoolNew)) {
    console.log(<backtick>key: ${key} hasOwnProperty: ${boundAttrs.hasOwnProperty(key)} type: ${typeof boundAttrs[key]}<backtick>);
    }

     

    So, I can iterate through that way and get only my own added properties.

    Please add some easy way to do this in the future, or let me know what I am missing if it already exists.

    #100260
    Avatar
    admin
    Keymaster

    Hi jtara,

    With the Smart ver. 4.3.0, Smart.App is extended with “jsonData” and “formData” properties. “jsonData” gets the “data” without the extended observable properties. “formData” returns FormData object.

    Regards,
    George

    Smart HTML Elements Team
    https://www.htmlelements.com

    #100263
    Avatar
    Anonymous

    4.3 has an app.toJSON() method – cannot find app.jsonData property though.

    #100270
    Avatar
    admin
    Keymaster

    Sorry, for the typo. It is toJSON(), not jsonData in 4.3.

    Regards,
    George

    Smart HTML Elements Team
    https://www.htmlelements.com

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.