title: JSON dictionary with array values to C# object
body: <p>I would like to know how to convert the following object to C# when reaching the mathod. I needed to create an object which can hold multiple array's within JSON something like the following</p>
  
  <pre><code>{   
      "cars": {
          "Ferrari":["LaFerrari","F40","458"],
          "Porsche":["911","959"],
          "Lamborghini":["Aventador"]
      }
  }
  </code></pre>
  
  <p>The code I used is the following within cshtml</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;
          &lt;div&gt;
              &lt;input type="text" id="txtKey" /&gt;
              &lt;input type="button" id="btnKey" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type="text" id="txtChild" /&gt;
              &lt;input type="button" id="btnChild" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type="button" id="btnSubmit" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  @section scripts
  {
          $(function () {
  
              AddKeyToDictionary('Ferrari');
              AddKeyToDictionary('Porsche');
              AddKeyToDictionary('Lamborghini');
  
              AddValueToDictionary('Ferrari', 'LaFerrari');
              AddValueToDictionary('Ferrari', 'F40');
              AddValueToDictionary('Ferrari', '458');
  
              AddValueToDictionary('Porsche', '911');
              AddValueToDictionary('Porsche', '959');
  
              AddValueToDictionary('Lamborghini', 'Aventador');
  
              $('#btnKey').click(function () {
                  AddKeyToDictionary($('#txtKey').val());
              });
              $('#btnChild').click(function () {
                  AddValueToDictionary($('#txtKey').val(), $('#txtChild').val());
              });
              $('#btnSubmit').click(function () {
                  submit();
              });
  
          });
  
          var dict = {};
  
          function AddKeyToDictionary(key) {
              dict[key] = [];
          }
  
          function AddValueToDictionary(key, value) {
              dict[key].push(value);
          }
  
          function submit() {
  
              var url = "@Url.Action("UpdateCustomFields", "Home")";
  
              var data = JSON.stringify({ 'cars': dict });
  
              $.ajax({
                  type: "POST",
                  contentType: "Application/json;charset=utf-8",
                  url: url,
                  data: data,
                  datatype: "json",
                  success: function (msg) {
  
                  },
                  error: function (request, status, error) {
                      displayDialog("A communication Error has occurred, please contact IT support: " + error);
                  }
              });
          }
  
  
      &lt;/script&gt;
  
  }
  </code></pre>
  
  <p>I've tried the following within MVC (got this from a JSON c# convertor)</p>
  
  <pre><code>public JsonResult UpdateCustomFields(RootObject cars)
          {
              return Json("");
          }
  
      }
  
      public class Cars
      {
          public List&lt;string&gt; Ferrari { get; set; }
          public List&lt;string&gt; Porsche { get; set; }
          public List&lt;string&gt; Lamborghini { get; set; }
      }
  
      public class RootObject
      {
          public Cars cars { get; set; }
      }
  </code></pre>
  
  <p>The car makes should be dynamic and then the arrays below should be converted correctly.</p>
  
  <p>I also tried to iterate through the array and changed them all to key value pairs which still wasn't rendering </p>
  
  <pre><code>function convertToKeyValue() {
     submitValue = [];
  
      for (var k in dict) {
          if (dict.hasOwnProperty(k)) {
              if (dict[k].length &gt; 0) {
                  for (var i = 0; i &lt; dict[k].length; i++) {    
                      submitValue.push({ key: k, value: dict[k][i] });
                  }
              } else {
                  submitValue.push({ key: k, value: '' });
              }
          }
      }
  }
  </code></pre>
  
  <p>Passing them through the name/value pairs I was able to see them in the dynamic property within the controller but can't get to the variables.</p>
  
  <pre><code>public JsonResult UpdateClientCustomFields(object cars)
  {    
      var result = customFields.XmlSerializeToString();
  
      return Json("hello");
  }
  </code></pre>
  
  <p>If anyone can help or point me in the right direction.</p>
  
  <p>Thanks</p>
  
  <p><strong>Updated:</strong> I've had to convert the javascript array to a list of key pairs (not ideal) and use List> cars as the paramter, the model is not ideal, but will use this until I find a better way.</p>
  
  <p>Here is the updated code</p>
  
  <p>HTML </p>
  
  <pre><code>&lt;input type="button" id="btnSubmit2" /&gt;
  
  var submitValue = [];
  
  function convertToKeyValue() {
  
      submitValue = [];
  
      for (var k in dict) {
          if (dict.hasOwnProperty(k)) {
              //alert("Key is " + k + ", value is" + dict[k]);
              //alert("KEY: " + k);
  
              if (dict[k].length &gt; 0) {
                  for (var i = 0; i &lt; dict[k].length; i++) {
                      //alert("childrec: " + dict[k][i]);
                      submitValue.push({ key: k, value: dict[k][i] });
                  }
              } else {
                  submitValue.push({ key: k, value: '' });
              }
          }
      }
  
  }
  
  function submit2() {
      convertToKeyValue();
  
      var url = "@Url.Action("UpdateCustomFields2", "Home")";
  
      var data = JSON.stringify({ 'cars': submitValue });
  
      $.ajax({
          type: "POST",
          contentType: "Application/json;charset=utf-8",
          url: url,
          data: data,
          datatype: "json",
          success: function (msg) {
  
          },
          error: function (request, status, error) {
  
          }
      });
  }
  </code></pre>
  
  <p>MVC</p>
  
  <pre><code>public JsonResult UpdateCustomFields2(List&lt;Dictionary&lt;string, string&gt;&gt; cars)
  {
      return Json("");
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/YSMLC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YSMLC.png" alt="Car Model"></a></p>