Json deserialize output show in View using ASP.NET MVC and Json.Net

Question

I am trying to deserialize json object to show output via ViewBag using ASP.NET MVC.I am using the following .Json file for my project-

{
        "poi":[
                {
                  "Name": "Berlin",
                  "Shorttext": "Berlin is the capital of Germany and one of the 16 states of Germany.....",
                  "GeoCoordinates": {
                    "Longitude": 13.38333333,
                    "Latitude": 52.51666667
                  },
                  "Images": [
                    "BA5AB22B.jpg"
                  ]
                },
                {
                  "Name": "munich",
                 "Shorttext": "Munich of the European Union with a population of above 1.5 million.....",
                  "GeoCoordinates": {
                    "Longitude": 11.56666667,
                    "Latitude": 48.13333333
                  },
                  "Images": [
                    "AA3CF664.jpg"
                  ]
                }
        ]
    }

My Model class from this Json object is-

public class GeoCoordinates
 {
   public double Longitude { get; set; }
   public double Latitude { get; set; }
 }

 public class Poi
 {
   public string Name { get; set; }
   public string Shorttext { get; set; }
   public GeoCoordinates GeoCoordinates { get; set; }
   public List<string> Images { get; set; }
  }

  public class RootObject
  {
   public List<Poi> poi { get; set; }
  }

I made another City.cs which I used for taking name in Textbox dynamically. That part is ok here.I am giving this class just for understanding-

public class City
{
    public string Name { get; set; }
}

Now in the controller class I create ActionResult ShowData where I implement Json deserilization to get every object and then put it in a view-bag and show on the web. I am having some problem which i mentioned beside the code.Such as for name and shorttext it is ok. But For Latitude, Longitude and images I am not sure how to get this result.

 string name = objCityModel.Name;
        ViewBag.Title = name;

        var ReadJson = System.IO.File.ReadAllText(Server.MapPath(@"~/App_Data/"+name+".json"));

        RootObject json = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<RootObject>(ReadJson);
        List<POI> mycities = new List<POI>();
        foreach (var item in json.poi)
        {
            POI obj = new POI()
            {
                Name = item.Name,
                Shorttext = item.Shorttext,
                GeoCoordinates =item.GeoCoordinates.Latitude, //show Error Duplicate initialization of member 'GeoCoordinates'
                GeoCoordinates=item.GeoCoordinates.Longitude, //show Error Duplicate initialization of member 'GeoCoordinates'
                Images = string.Join(" ", item.Images), // Not sure what to do here, it is a list of images 

            };
            mycities.Add(obj);
        }

        ViewBag.Cities = mycities;

        return View();
    }

Finally in ShowData view I implemented my code in this way. But as I am having having problem in the controller the data is not showing here-

@model  new_test_Json.Models.City



@{
ViewBag.Title1 = "Show Data";
} 


@foreach (var item in ViewBag.Cities)
{
    <h2>@item.Name</h2>
    <p>@Html.Raw(@item.Shorttext)</p>
    <p>@item.Latitude</p>
    <p>@item.Longitude</p>
    <img src=@item.Image>

}

I need suggestion in which part I should modify in my code.

Answer 1

Use this

foreach (var item in json.poi)
    {
        POI obj = new POI()
        {
            Name = item.Name,
            Shorttext = item.Shorttext,
            GeoCoordinates =item.GeoCoordinates,
            Images = item.Images
        };
        mycities.Add(obj);
    }

Then, in your view:

@foreach (var item in ViewBag.Cities)
{
    <h2>@item.Name</h2>
    <p>@Html.Raw(@item.Shorttext)</p>
    <p>@item.GeoCoordinates.Longitude</p>
    <p>@item.GeoCoordinates.Longitude</p>
    foreach (var image in item.Images)
    {
        <img src=@image>
    }
}