Iterating through key-values in ember.js handlebars template










0















I have a javascript object



this.attributes = 
key: value,
// etc..



I would like to iterate through it and output key:value



Here is my solution:



import Ember from 'ember';

export default Ember.Component.extend(
init()
this._super(...arguments);
this.attributes =
'SKU': '123',
'UPC': 'ABC',
'Title': 'Hour Glass'


,

ProductAttributes: Ember.computed('attributes', function()

var attribs = this.get('attributes');
var kvp = Object.keys(attribs).map(key =>
return
'attribute_name': key,
'attribute_value': attribs[key]
;
);
return kvp;
));


The template I came up with:



attribute
attribute.attribute_name : attribute.attribute_value
/each


I am not happy with this solution since it looks cumbersome: first I convert object into an array of auxiliary objects with non-dynamic keys attribute_name and attribute_value, and then I references non-dynamic names directly within my template.



It works fine but is there a better way of doing this?










share|improve this question






















  • You can iterate the properties of an object directly with #each-in, key value

    – James
    Nov 14 '18 at 22:18











  • unfortunately #each-in is not supported by Ember 1.*

    – AstroSharp
    Nov 14 '18 at 22:32















0















I have a javascript object



this.attributes = 
key: value,
// etc..



I would like to iterate through it and output key:value



Here is my solution:



import Ember from 'ember';

export default Ember.Component.extend(
init()
this._super(...arguments);
this.attributes =
'SKU': '123',
'UPC': 'ABC',
'Title': 'Hour Glass'


,

ProductAttributes: Ember.computed('attributes', function()

var attribs = this.get('attributes');
var kvp = Object.keys(attribs).map(key =>
return
'attribute_name': key,
'attribute_value': attribs[key]
;
);
return kvp;
));


The template I came up with:



attribute
attribute.attribute_name : attribute.attribute_value
/each


I am not happy with this solution since it looks cumbersome: first I convert object into an array of auxiliary objects with non-dynamic keys attribute_name and attribute_value, and then I references non-dynamic names directly within my template.



It works fine but is there a better way of doing this?










share|improve this question






















  • You can iterate the properties of an object directly with #each-in, key value

    – James
    Nov 14 '18 at 22:18











  • unfortunately #each-in is not supported by Ember 1.*

    – AstroSharp
    Nov 14 '18 at 22:32













0












0








0








I have a javascript object



this.attributes = 
key: value,
// etc..



I would like to iterate through it and output key:value



Here is my solution:



import Ember from 'ember';

export default Ember.Component.extend(
init()
this._super(...arguments);
this.attributes =
'SKU': '123',
'UPC': 'ABC',
'Title': 'Hour Glass'


,

ProductAttributes: Ember.computed('attributes', function()

var attribs = this.get('attributes');
var kvp = Object.keys(attribs).map(key =>
return
'attribute_name': key,
'attribute_value': attribs[key]
;
);
return kvp;
));


The template I came up with:



attribute
attribute.attribute_name : attribute.attribute_value
/each


I am not happy with this solution since it looks cumbersome: first I convert object into an array of auxiliary objects with non-dynamic keys attribute_name and attribute_value, and then I references non-dynamic names directly within my template.



It works fine but is there a better way of doing this?










share|improve this question














I have a javascript object



this.attributes = 
key: value,
// etc..



I would like to iterate through it and output key:value



Here is my solution:



import Ember from 'ember';

export default Ember.Component.extend(
init()
this._super(...arguments);
this.attributes =
'SKU': '123',
'UPC': 'ABC',
'Title': 'Hour Glass'


,

ProductAttributes: Ember.computed('attributes', function()

var attribs = this.get('attributes');
var kvp = Object.keys(attribs).map(key =>
return
'attribute_name': key,
'attribute_value': attribs[key]
;
);
return kvp;
));


The template I came up with:



attribute
attribute.attribute_name : attribute.attribute_value
/each


I am not happy with this solution since it looks cumbersome: first I convert object into an array of auxiliary objects with non-dynamic keys attribute_name and attribute_value, and then I references non-dynamic names directly within my template.



It works fine but is there a better way of doing this?







javascript ember.js ember-1






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 14 '18 at 22:06









AstroSharpAstroSharp

82921122




82921122












  • You can iterate the properties of an object directly with #each-in, key value

    – James
    Nov 14 '18 at 22:18











  • unfortunately #each-in is not supported by Ember 1.*

    – AstroSharp
    Nov 14 '18 at 22:32

















  • You can iterate the properties of an object directly with #each-in, key value

    – James
    Nov 14 '18 at 22:18











  • unfortunately #each-in is not supported by Ember 1.*

    – AstroSharp
    Nov 14 '18 at 22:32
















You can iterate the properties of an object directly with #each-in, key value

– James
Nov 14 '18 at 22:18





You can iterate the properties of an object directly with #each-in, key value

– James
Nov 14 '18 at 22:18













unfortunately #each-in is not supported by Ember 1.*

– AstroSharp
Nov 14 '18 at 22:32





unfortunately #each-in is not supported by Ember 1.*

– AstroSharp
Nov 14 '18 at 22:32












1 Answer
1






active

oldest

votes


















1














My suggestion for this is not that different from the solution you had already described in the question explanation; but my suggestion will provide a you a more reusable and more each-in helper-like approach:



How about creating a tagless contextual component with a positional param named each-in-component and moving all the computed property definition to that component. I am using kind of Ember 2.x syntax but I guess Ember 1.x will not be very different; so that component will be sth. like:



import Ember from 'ember';

export default Ember.Component.extend(
objectProperties: Ember.computed('object', function()
let object = this.get('object');
return Object.keys(object).map(key =>
return
'key': key,
'value': Ember.get(object, key)
;
);
),

tagName: ''
).reopenClass(
positionalParams: ['object']
);


and the corresponding component template will be yielding the computed property array:



#each objectProperties as 
yield objectProperty.key objectProperty.value
/each


So you can now use that component just like regular each-in; which does not exist in Ember 1.x.



key value
key : value<br>
/each-in-component


With this approach; you can re-use the very same component multiple times and the code you did not want to have in your very own component will be lying within each-in-component. I have wrapped up my solution to illustrate it in action in the following twiddle. I hope it works.






share|improve this answer






















    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













    draft saved

    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53309437%2fiterating-through-key-values-in-ember-js-handlebars-template%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    My suggestion for this is not that different from the solution you had already described in the question explanation; but my suggestion will provide a you a more reusable and more each-in helper-like approach:



    How about creating a tagless contextual component with a positional param named each-in-component and moving all the computed property definition to that component. I am using kind of Ember 2.x syntax but I guess Ember 1.x will not be very different; so that component will be sth. like:



    import Ember from 'ember';

    export default Ember.Component.extend(
    objectProperties: Ember.computed('object', function()
    let object = this.get('object');
    return Object.keys(object).map(key =>
    return
    'key': key,
    'value': Ember.get(object, key)
    ;
    );
    ),

    tagName: ''
    ).reopenClass(
    positionalParams: ['object']
    );


    and the corresponding component template will be yielding the computed property array:



    #each objectProperties as 
    yield objectProperty.key objectProperty.value
    /each


    So you can now use that component just like regular each-in; which does not exist in Ember 1.x.



    key value
    key : value<br>
    /each-in-component


    With this approach; you can re-use the very same component multiple times and the code you did not want to have in your very own component will be lying within each-in-component. I have wrapped up my solution to illustrate it in action in the following twiddle. I hope it works.






    share|improve this answer



























      1














      My suggestion for this is not that different from the solution you had already described in the question explanation; but my suggestion will provide a you a more reusable and more each-in helper-like approach:



      How about creating a tagless contextual component with a positional param named each-in-component and moving all the computed property definition to that component. I am using kind of Ember 2.x syntax but I guess Ember 1.x will not be very different; so that component will be sth. like:



      import Ember from 'ember';

      export default Ember.Component.extend(
      objectProperties: Ember.computed('object', function()
      let object = this.get('object');
      return Object.keys(object).map(key =>
      return
      'key': key,
      'value': Ember.get(object, key)
      ;
      );
      ),

      tagName: ''
      ).reopenClass(
      positionalParams: ['object']
      );


      and the corresponding component template will be yielding the computed property array:



      #each objectProperties as 
      yield objectProperty.key objectProperty.value
      /each


      So you can now use that component just like regular each-in; which does not exist in Ember 1.x.



      key value
      key : value<br>
      /each-in-component


      With this approach; you can re-use the very same component multiple times and the code you did not want to have in your very own component will be lying within each-in-component. I have wrapped up my solution to illustrate it in action in the following twiddle. I hope it works.






      share|improve this answer

























        1












        1








        1







        My suggestion for this is not that different from the solution you had already described in the question explanation; but my suggestion will provide a you a more reusable and more each-in helper-like approach:



        How about creating a tagless contextual component with a positional param named each-in-component and moving all the computed property definition to that component. I am using kind of Ember 2.x syntax but I guess Ember 1.x will not be very different; so that component will be sth. like:



        import Ember from 'ember';

        export default Ember.Component.extend(
        objectProperties: Ember.computed('object', function()
        let object = this.get('object');
        return Object.keys(object).map(key =>
        return
        'key': key,
        'value': Ember.get(object, key)
        ;
        );
        ),

        tagName: ''
        ).reopenClass(
        positionalParams: ['object']
        );


        and the corresponding component template will be yielding the computed property array:



        #each objectProperties as 
        yield objectProperty.key objectProperty.value
        /each


        So you can now use that component just like regular each-in; which does not exist in Ember 1.x.



        key value
        key : value<br>
        /each-in-component


        With this approach; you can re-use the very same component multiple times and the code you did not want to have in your very own component will be lying within each-in-component. I have wrapped up my solution to illustrate it in action in the following twiddle. I hope it works.






        share|improve this answer













        My suggestion for this is not that different from the solution you had already described in the question explanation; but my suggestion will provide a you a more reusable and more each-in helper-like approach:



        How about creating a tagless contextual component with a positional param named each-in-component and moving all the computed property definition to that component. I am using kind of Ember 2.x syntax but I guess Ember 1.x will not be very different; so that component will be sth. like:



        import Ember from 'ember';

        export default Ember.Component.extend(
        objectProperties: Ember.computed('object', function()
        let object = this.get('object');
        return Object.keys(object).map(key =>
        return
        'key': key,
        'value': Ember.get(object, key)
        ;
        );
        ),

        tagName: ''
        ).reopenClass(
        positionalParams: ['object']
        );


        and the corresponding component template will be yielding the computed property array:



        #each objectProperties as 
        yield objectProperty.key objectProperty.value
        /each


        So you can now use that component just like regular each-in; which does not exist in Ember 1.x.



        key value
        key : value<br>
        /each-in-component


        With this approach; you can re-use the very same component multiple times and the code you did not want to have in your very own component will be lying within each-in-component. I have wrapped up my solution to illustrate it in action in the following twiddle. I hope it works.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Dec 3 '18 at 11:48









        feanor07feanor07

        2,921823




        2,921823





























            draft saved

            draft discarded
















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53309437%2fiterating-through-key-values-in-ember-js-handlebars-template%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Darth Vader #20

            How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

            Ondo