如何使用敲除JS从前端访问数组中的嵌套元素？

发布于 2025-01-30 06:15:06 字数 1503 浏览 1 评论 0原文

我从后端获得了一个数据，并在前端使用了其中的一部分。看来这些

    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)}

数量的元素和元素名称可能每次都会改变。我的目标是访问此列表中的每个城市。意义：该代码

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

给了我2021-22（如果我在foreach中使用它，则为2020-22）。我想访问Newyork，Paris等。子元素。

DIV看起来像这个

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

  </div>

*Pricings（）是包含所有数据的列表。

编辑：我使用了Console.Log（$ context）。这是$ root下显示的数据

更新：如建议，我更改了我的代码：

 <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>

第一个日志给了我整个对象，第二个日志是未定义的。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

贱贱哒 2025-02-06 06:15:06

因此，一种方法可能是仅使用嵌套的foreach绑定是

 # 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"

另一种方法是将数据转换为不存储数据中的数据的数组

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

回复收藏 0 原文

~没有更多了~