在淘汰赛js中显示json对象详细信息答案

【问题标题】：Displaying json object details in knockout js在淘汰赛js中显示json对象详细信息
【发布时间】：2016-08-24 02:15:04
【问题描述】：

我有以下小提琴，我试图在键：值对中显示数据，即，键作为标题，后跟信息作为行。

我有这种格式的数据：

 self.data = ko.observableArray([{
        1:
        {

            name: 'Name 1',
            lastLogin: '8/5/2012'

        }
        }
    , {
         2:
         {
            name: 'Name 2',
            lastLogin: '2/8/2013'
        }
    }

    ]);

我有小提琴：

https://jsfiddle.net/1988/z7nnf0fh/1/

我期待：

1

name    Name 1  lastLogin   8/5/2012

2
name    Name 2  lastLogin   2/8/2013

【问题讨论】：

标签： javascript jquery json knockout.js

【解决方案1】：

我会亲自将所有逻辑移至您的视图模型。然后你可以使用 ko.toJSON 对每个对象的内容进行字符串化，或者如果你真的想要像上面那样的输出，你可以这样做：

function DataModel() {
  var self = this;
  self.data = ko.observableArray([{
      1: {

        name: 'Name 1',
        lastLogin: '8/5/2012'

      }
    }, {
      2: {
        name: 'Name 2',
        lastLogin: '2/8/2013'
      }
    }

  ]);
  self.formattedValues = ko.observableArray([]);
  self.formatData = function() {
    var tempRow = [];
    ko.utils.arrayForEach(self.data(), function(item) {
      for (var i in item) {
        for (var j in item[i]) {
          tempRow.push({
            key: j,
            value: item[i][j]
          });
        }
        self.formattedValues.push({
          key: i,
          rows: tempRow
        });
        tempRow = [];
      }
    })
  };
  self.formatData();
}

var dataModel = new DataModel();
ko.applyBindings(dataModel);

.name {
  color: #bbb;
}
.value {
  fot-weight: bold
}
th {
  width: 25px;
}
p {
  margin-right: 10px;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="template: { name: 'template', data: formattedValues }"></div>

<script type="text/html" id="template">
  <table>
    <tbody data-bind="foreach: $data">
      <tr>
        <td data-bind="text: key"></td>
      </tr>
      <tr>
        <td data-bind="foreach: rows">
          <p>
            <span class="name" data-bind="text: key + ': '"></span>
            <span class="value" data-bind="text: value"></span>
          </p>
        </td>
      </tr>
    </tbody>
  </table>
</script>

希望在某种程度上有所帮助

【讨论】：