Javascript $.each function

Question

this.CurrentComponent.ExtendedProperties is a Dictionary<string, string> returned from .Net. When I try and read the values within the Dictionary on the client side, in the javascript, I get all objects of the property, and I do not want that.

I have the following code to populate an object and push to an array in 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 is what the this.CurrentComponent.ExtendedProperties object looks like: All I want is to return the FirstName in the key, and the FirstValue in the value to the callback, but I get the event: object etc as well, and this is not what I want.

How can I only return the actual values that is within the Dictionary, and not all of the memnbers/properties/functions of the javascript object?

UPDATE

Here is the the Object I am returning from the server side, .Net. As can be seen here, the ExtendedProperties Property is a 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; }

}

This ComponentItem class, is returned to the front end in response to a Ajax call.

This ExtendedProperty value is received from the Database, as a JSON string, as follow: {"FirstName":"FirstValue"}

I use the following piece of code, to deserialize this JSON string into a Dictionary, as follow:

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

Answer 1

Quick and dirty would be to check the type of value, however that could give you too much if you add more properties.

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 isn't really the best solution since it means you have to account for expected keys and you can't just add new ones to the server-side at any time without also updating the client to allow them, but depending on how many possible keys there are, you could 'whitelist' the ones you wanted to allow, and only push those:

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

As I mentioned above, I'm not that familiar with .NET so I'm not sure what happens server-side. As Naveen says, maybe there's a way you can trim everything but the actual Dictionary items before it gets to the client. That would obviously be a better solution... then you wouldn't have to worry about these "internal" properties getting mixed in with your data.

Answer 3

Without more information on the server-side of your .NET application, there is really no best solution to this question. If you could update the question with more details in how you send a response to your front-end framework would be a great start. Without these information, I will assume a lot of things in my answer.

First off, I will assume that you have full control over your server-side code, and can change the code base at ApiController/Controller level. I will also assume that you are using .NET MVC framework. Finally, I will assume that you are sending a JSON response back. If you are using XML to send responses to your front-end framework, then this answer does not apply.

Within your .NET ApiController/Controller(s) you can exclude properties that you don't want to include in the JSON response. It's as easy as the following code:

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

The above [JsonIgnore] (data annotation) will force .NET JSON response handler to ignore the state when serializing an object (in your case Dictionary<string, string>).

More details can be found on this answer.

Answer 4

Why I was not getting only the Dictionary items back in the client side, is still a mystery to me, which I will investigate and update this answer with when I find the solution.

For now, I changed my populateExtendedProps function, and created a new server side WebMethod that returns a fresh list of ExtendedProperties.

Here is my server side code:

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

And my updated Javascript code:

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

So the populateExtendedProps function does an ajax post to the server, and calls the the populateExtendedPropsSuccess on successfully returning from the server, and passes the response, and then I loop through the response.