Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ronak Panchal 71 posts 230 karma points
    Mar 11, 2016 @ 08:30
    Ronak Panchal
    0

    How to set dynamic values to java script two-dimensional array

    Hello all,

    I need to display a google map on contact us page with location.For that i use java script in java script there is multi dimensional array looks like below.

    var locations = [
      //For Ahmedabad Location
      ['addressline 1 </br> Country', 13.012895, 12.503075],
      //for new Delhi location
      ['addressline 1 </br> Country', 18.654401, 717.152701],
    ];
    

    And i got the properties value from back office like using nested content.

    var MapLocationList = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("setLocationsOnMap");
    

    from above code i got all the values that i need. Now i convert this values into c# string array.using following code.

    string[] array = new string[MapLocationList.Count()];
    if (MapLocationList.Any())
    {
        int i = 0;
        foreach (var item in MapLocationList)
        {
            var Addresss = Umbraco.Field(item, "fullAddress");
            var latitude = Umbraco.Field(item, "latitude");
            var longitude = Umbraco.Field(item, "longitude");
            string[] childarray = new string[1];
            childarray[0] = "['" + Addresss + "'," + latitude + "," + longitude + "]";
    
            array[i] = childarray[0];
    
            i = i + 1;
        }
    }
    

    Now i must have to give the array values to java script location multi -dimension array.

    Now my question is how can i set java script values dynamically.

    any help would be appreciated.

    Ronak Panchal.

  • Steve Morgan 1301 posts 4351 karma points c-trib
    Mar 11, 2016 @ 08:33
    Steve Morgan
    0

    Hi Ronak,

    What I tend to do is write the data as a json string out to a data attribute in a div and pick that up from the javascript. That way you can keep all of your JS in separate files and not inline on a template and still inject values from the CMS into the page.

    Let me know if you need a bit more help than that.

    Kind regards

    Steve

  • Ronak Panchal 71 posts 230 karma points
    Mar 11, 2016 @ 12:27
    Ronak Panchal
    0

    hello Steve,

    Thanks for quick reply.

    is there any other way to convert this C# array to java script array. or we can do looping in java script on umbraco properties list.

    Thanks, Ronak Panchal

  • Steve Morgan 1301 posts 4351 karma points c-trib
    Mar 14, 2016 @ 19:06
  • Ronak Panchal 71 posts 230 karma points
    Mar 15, 2016 @ 05:51
    Ronak Panchal
    0

    Hello Steve,

    I would like to thanking you for your comments.

    I made the solution. I made one class in razor view like below.

    @functions
    {
        public class Locations
        {
            public string Address { get; set; }
            public string Latitude { get; set; }
            public string Longitude { get; set; }
        }
    }
    

    then Make a generic list using following code.

    List<Locations> MapLocations = new List<Locations>();
        if (MapLocationList.Any())
        {
            foreach (var item in MapLocationList)
            {
                Locations objlocations = new Locations();
                objlocations.Address = item.GetPropertyValue("fullAddress").ToString();
                objlocations.Latitude = item.GetPropertyValue("latitude").ToString();
                objlocations.Longitude = item.GetPropertyValue("longitude").ToString();
                MapLocations.Add(objlocations);
            }
        }
    

    now in list we have all the item.

    after that in java script.

    @foreach (var item in @MapLocations)
        {
            <text>
                    alert('@item.Latitude');
                    alert('@item.Longitude');
                    alert('@item.Address');
            </text>
        }
    

    Thanks & Regards,

    Ronak Panchal.

  • Jan Skovgaard 11264 posts 23592 karma points MVP 9x admin c-trib
    Mar 15, 2016 @ 06:59
    Jan Skovgaard
    0

    Hi Ronak

    I have not read the entire thread here but it seems to me you now have a mix of C# and Javascript somehow in your code and I think that perhaps you could benefit from exposing the map data to an API endpoint using WebApi instead for instance? You can learn more about it here https://our.umbraco.org/documentation/Reference/Routing/WebApi/ - Just wanted to make the suggestion since it might help making the code seperation a bit clearer.

    Hope this helps.

    /Jan

  • Fergus Davidson 309 posts 588 karma points
    Sep 06, 2016 @ 16:01
    Fergus Davidson
    0

    @Ronak

    i know this is old, but it has just helped me out - many thanks.

    QUESTION: i have a different requirement and need to sort the list - how would i order the items in the JavaScript?

    e.g.

    @foreach (var item in @MapLocations.**OrderBy(@item.Address)**)
        {
            <text>
                    alert('@item.Latitude');
                    alert('@item.Longitude');
                    alert('@item.Address');
            </text>
        }
    
Please Sign in or register to post replies

Write your reply to:

Draft