Javascript $.each 函数

Question

this.CurrentComponent.ExtendedProperties 是从 .Net 返回的 Dictionary<string, string>。当我尝试在客户端读取字典中的值时，在 javascript 中，我得到了该属性的所有对象，我不希望这样。

我有以下代码来填充对象并在 Javascript 中推送到数组。

this.populateExtendedProps = function () {
    if (this.CurrentComponent.ExtendedProperties != null) {
        $.each(this.CurrentComponent.ExtendedProperties, function (key, value) {
            debugger;
            var data = {};
            data.Key = key;
            data.Value = value;
            data.Id = key + "_" + value; //generate
            result.push(data);
        });
    }
};

this.CurrentComponent.ExtendedProperties 对象如下所示： 我想要的只是将键中的 FirstName 和值中的 FirstValue 返回给回调，但我也得到了event: object 等，这不是我想要的。

我怎样才能只返回字典中的实际值，而不是 javascript 对象的所有成员/属性/函数？

更新

这是我从服务器端返回的对象，.Net。从这里可以看出，ExtendedProperties 属性是Dictionary<string, string>

public class ComponentItem 
{
    public Guid ItemId { get; set; }
    public Guid ComponentId { get; set; }
    public Guid? ParentItemId { get; set; }
    public string Name { get; set; }
    public int Rank { get; set; }
    public string Text { get; set; }
    public string Description { get; set; }
    public string URL { get; set; }
    public ComponentRendering OpenIn { get; set; }
    public string Property1 { get; set; }
    public string Property2 { get; set; }
    public bool ActiveOnPreview { get; set; }
    public bool ActiveOnLive { get; set; }
    public Guid RepositoryId { get; set; }
    public string RepositoryPath { get; set; }
    public string CDNUrl { get; set; }
    public bool CanDisableInLive { get; set; }
    public bool CanDelete { get; set; }
    public Dictionary<string, string> ExtendedProperties { get; set; }

}

这个ComponentItem 类被返回到前端以响应Ajax 调用。

这个ExtendedProperty 值是从数据库接收的，作为JSON 字符串，如下：{"FirstName":"FirstValue"}

我使用下面这段代码，将这个 JSON 字符串反序列化为 Dictionary，如下：

private Dictionary<string, string> GetExtendedPropertiesFromJson(string extendedPropertiesJson)
    {
        return JsonConvert.DeserializeObject<Dictionary<string, string>>(extendedPropertiesJson);
    }

Answer 1

检查value 的类型是快速而肮脏的，但是如果您添加更多属性，这可能会给您带来太多负担。

this.populateExtendedProps = function () {
    if (this.CurrentComponent.ExtendedProperties != null) {
        $.each(this.CurrentComponent.ExtendedProperties, function (key, value) {
            if (typeof (value) === 'string') {
                debugger;
                var data = {};
                data.Key = key;
                data.Value = value;
                data.Id = key + "_" + value; //generate
                result.push(data);
            }
        });
    }
};

Answer 2

这并不是真正的最佳解决方案，因为这意味着您必须考虑预期的密钥，并且您不能随时将新密钥添加到服务器端而不更新客户端以允许它们，但取决于有多少可能的键，您可以将您想要允许的键“列入白名单”，然后只推送这些键：

this.populateExtendedProps = function () {

    // List of properties you expect and want
    // to allow into the final list of results.
    var allowedProps = {
      FirstName: true, 
      FooKey: true, 
      BarKey: true
    };

    if (this.CurrentComponent.ExtendedProperties != null) {
        $.each(this.CurrentComponent.ExtendedProperties, function (key, value) {
            debugger;

            if (key in allowedProps) {
              var data = {};
              data.Key = key;
              data.Value = value;
              data.Id = key + "_" + value; //generate
              result.push(data);
            }
        });
    }
};

正如我上面提到的，我对 .NET 不太熟悉，所以我不确定服务器端会发生什么。正如 Naveen 所说，也许有一种方法可以在到达客户端之前修剪除实际 Dictionary 项目之外的所有内容。这显然是一个更好的解决方案……那么您就不必担心这些“内部”属性会混入您的数据中。

Answer 3

如果没有关于 .NET 应用程序服务器端的更多信息，那么这个问题确实没有最佳解决方案。如果您可以用更多关于如何向前端框架发送响应的详细信息来更新问题，那将是一个很好的开始。如果没有这些信息，我会在我的回答中假设很多东西。

首先，我假设您可以完全控制服务器端代码，并且可以在ApiController/Controller 级别更改代码库。我还将假设您使用的是 .NET MVC 框架。最后，我将假设您正在发回一个 JSON 响应。如果您使用 XML 向前端框架发送响应，则此答案不适用。

在您的 .NET ApiController/Controller(s) 中，您可以排除您不想包含在 JSON 响应中的属性。就像下面的代码一样简单：

[JsonIgnore]
public int Foobar { get; set; }

上述[JsonIgnore]（数据注释）将强制.NET JSON响应处理程序在序列化对象时忽略状态（在您的情况下为Dictionary<string, string>）。

更多细节可以在这个answer找到。

Answer 4

为什么我没有只在客户端返回字典项，这对我来说仍然是一个谜，当我找到解决方案时，我会调查并更新这个答案。

现在，我更改了我的 populateExtendedProps 函数，并创建了一个新的服务器端 WebMethod，它返回一个新的 ExtendedProperties 列表。

这是我的服务器端代码：

[WebMethod]
    public Dictionary<string, string> GetExtendedPropertiesForComponentItem(Guid componentItemId)
    {
        return Api.ComponentManager.GetComponentItem(componentItemId).ExtendedProperties;
    }

还有我更新的 Javascript 代码：

this.populateExtendedProps = function () {
    ajax.request(this.baseUrl + "GetExtendedPropertiesForComponentItem", { componentItemId: this.CurrentComponent.ItemId }, this.populateExtendedPropsSuccess);
};

this.populateExtendedPropsSuccess = function (resp) {
    var collection = [];
    if (resp != null) {
        $.each(resp, function (key, value) {
            var data = {};
            debugger;
            data.Key = key;
            data.Value = value;
            data.Id = key + "_" + value; //generate
            collection.push(data);
        });
        scope.onSaveExtendedPropertySuccess(collection);
    }
}

所以populateExtendedProps函数向服务器发送一个ajax post，并在从服务器成功返回时调用populateExtendedPropsSuccess，并传递响应，然后我循环响应。