How to access nested elements in array from the front-end using knockout JS?

Question

I got a data from back-end and used parts of it in the front-end. It looks like this

    2021-22:
        NewYork: {PriceHeaders: Array(9), Comment: 'qwert', Pricings: Array(11)}
        Paris: {PriceHeaders: Array(2), Comment: null, Pricings: Array(3)}
    2020-21:
        Washington: {PriceHeaders: Array(19), Comment: 'fdsfdsf', Pricings: Array(121)}
        Berlin: {PriceHeaders: Array(21), Comment: null, Pricings: Array(143)}

number of elements and names of elements may change every time. My goal is to access every city in this list. Meaning : this code

data: Object.keys(pricings()), as: '_propertykey'

gives me 2021-22(and 2020-22 if I use it in foreach). I want to access NewYork, Paris etc.. Subelements.

div looks like this

  <div data-bind="foreach: { data: Object.keys(pricings()), as: '_propertykey', afterRender: tableRenderedHandler}">

  </div>

*pricings() is the list that contains all that data.

EDIT : I used console.log($context). This is the data displayed under $root

UPDATE : As suggested, I changed my code like this :

 <div data-bind="foreach: { data: pricings(), as: '_propertykey', afterRender: pricingTableRenderedHandler}">
        <div data-bind="foreach: { data: Object.keys(_propertykey), as: '_propkey'}">
            <div data-bind="text: console.log($parent[_propkey])"></div>
            <div data-bind="text: console.log($parent[_propkey].Comment)"></div>

First log gives me whole object and second one is undefined.

can you please provide a valid example of your data? The way you show it it is not clear if i.e NewYork and Paris are inside an array or object properties — john Smith
– john Smith, Commented May 19, 2022 at 7:04

john Smith · Accepted Answer · 2022-05-19 07:17:31Z

1

So one way could be to just use nested foreach bindings

 # First iterate over the "root-keys 2021-22 ..."
  data-bind="foreach: pricings()"

    # Then iterate the keys of the "root keys"
    data-bind="foreach: Object.keys($data)" 

      # Then u can dynamically acces data from Paris, NewYork
      data-bind="text: $parent[$data].Comment"
      data-bind="foreach: $parent[$data].PriceHeaders"
      
      # To just print e.g "NewYork"
      data-bind="text: $data"

Another way would be to transform and flatten your data to arrays where no data is stored in keys

answered May 19, 2022 at 7:17

john Smith

18k12 gold badges80 silver badges124 bronze badges

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

1 Comment

Greg Over a year ago

I have a progress after applying your solution. But, I can not get the Keys of root keys. Updated the question and attached another screenshot

Collectives™ on Stack Overflow

How to access nested elements in array from the front-end using knockout JS?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related