[javascript] How to get JSON object from Razor Model object in javascript

In viewmodel object, below is the property:

  public IList<CollegeInformationDTO> CollegeInformationlist { get; set; }

In VIEW, javascript is as follow:

   var obj = JSON.stringify('@Model.CollegeInformationlist');
   alert(obj[1].State);  //NOT WORKING, giving string char

      $.each('@Model.CollegeInformationlist', function (i, item) {
    var obj = JSON.stringify(item);
    var r = $.parseJSON(obj);
    alert(r.State);    //just giving undefined.
    });

Please guide here, how i can get JSON object in javascript.

This question is related to javascript asp.net json asp.net-mvc asp.net-mvc-5

The answer is


You could use the following:

var json = @Html.Raw(Json.Encode(@Model.CollegeInformationlist));

This would output the following (without seeing your model I've only included one field):

<script>
    var json = [{"State":"a state"}];   
</script>

Working Fiddle

AspNetCore

AspNetCore uses Json.Serialize intead of Json.Encode

var json = @Html.Raw(Json.Serialize(@Model.CollegeInformationlist));

MVC 5/6

You can use Newtonsoft for this:

    @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model, 
Newtonsoft.Json.Formatting.Indented))

This gives you more control of the json formatting i.e. indenting as above, camelcasing etc.


In ASP.NET Core the IJsonHelper.Serialize() returns IHtmlContent so you don't need to wrap it with a call to Html.Raw().

It should be as simple as:

<script>
  var json = @Json.Serialize(Model.CollegeInformationlist);
</script>

After use codevar json = @Html.Raw(Json.Encode(@Model.CollegeInformationlist));

You need use JSON.parse(JSON.stringify(json));


If You want make json object from yor model do like this :

  foreach (var item in Persons)
   {
    var jsonObj=["FirstName":"@item.FirstName"]
   }

Or Use Json.Net to make json from your model :

string json = JsonConvert.SerializeObject(person);

Pass the object from controller to view, convert it to markup without encoding, and parse it to json.

@model IEnumerable<CollegeInformationDTO>

@section Scripts{
    <script>
          var jsArray = JSON.parse('@Html.Raw(Json.Encode(@Model))');
    </script>
}

Questions with javascript tag:

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax Drag and drop menuitems Is it possible to execute multiple _addItem calls asynchronously using Google Analytics? DevTools failed to load SourceMap: Could not load content for chrome-extension TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app What does 'x packages are looking for funding' mean when running `npm install`? SyntaxError: Cannot use import statement outside a module SameSite warning Chrome 77 "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6 Why powershell does not run Angular commands? Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; } Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop Push method in React Hooks (useState)? JS file gets a net::ERR_ABORTED 404 (Not Found) React Hooks useState() with Object useState set method not reflecting change immediately Can't perform a React state update on an unmounted component UnhandledPromiseRejectionWarning: This error originated either by throwing inside of an async function without a catch block Can I set state inside a useEffect hook internal/modules/cjs/loader.js:582 throw err How to post query parameters with Axios? How to use componentWillMount() in React Hooks? React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory in ionic 3 How can I force component to re-render with hooks in React? What is useState() in React? How to call loading function with React useEffect only once Objects are not valid as a React child. If you meant to render a collection of children, use an array instead How to reload current page? Center content vertically on Vuetify Getting all documents from one collection in Firestore ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment How can I add raw data body to an axios request? Sort Array of object by object field in Angular 6 Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) Axios Delete request with body and headers? Enable CORS in fetch api Vue.js get selected option on @change Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) Angular 6: How to set response type as text while making http call

Questions with asp.net tag:

RegisterStartupScript from code behind not working when Update Panel is used You must add a reference to assembly 'netstandard, Version=2.0.0.0 No authenticationScheme was specified, and there was no DefaultChallengeScheme found with default authentification and custom authorization How to use log4net in Asp.net core 2.0 Visual Studio 2017 error: Unable to start program, An operation is not legal in the current state How to create roles in ASP.NET Core and assign them to users? How to handle Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause() ASP.NET Core Web API Authentication Could not load file or assembly 'CrystalDecisions.ReportAppServer.CommLayer, Version=13.0.2000.0 WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for jquery The instance of entity type cannot be tracked because another instance of this type with the same key is already being tracked Auto-increment on partial primary key with Entity Framework Core Custom Authentication in ASP.Net-Core Custom header to HttpClient request ASP.NET 5 MVC: unable to connect to web server 'IIS Express' IIS Config Error - This configuration section cannot be used at this path Visual Studio error "Object reference not set to an instance of an object" after install of ASP.NET and Web Tools 2015 TLS 1.2 in .NET Framework 4.0 The CodeDom provider type "Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider" could not be located Could not find a part of the path ... bin\roslyn\csc.exe CS1617: Invalid option ‘6’ for /langversion; must be ISO-1, ISO-2, 3, 4, 5 or Default Adding ASP.NET MVC5 Identity Authentication to an existing project TypeError: $(...).DataTable is not a function The page cannot be displayed because an internal server error has occurred on server How to get the current logged in user Id in ASP.NET Core When should I use Async Controllers in ASP.NET MVC? How to call controller from the button click in asp.net MVC 4 No connection could be made because the target machine actively refused it 127.0.0.1 @Html.DisplayFor - DateFormat ("mm/dd/yyyy") How can I validate google reCAPTCHA v2 using javascript/jQuery? How to get DropDownList SelectedValue in Controller in MVC How do I enable NuGet Package Restore in Visual Studio? Specified cast is not valid? Display two fields side by side in a Bootstrap Form variable is not declared it may be inaccessible due to its protection level An unhandled exception occurred during the execution of the current web request. ASP.NET How to implement oauth2 server in ASP.NET MVC 5 and WEB API 2 The client and server cannot communicate, because they do not possess a common algorithm - ASP.NET C# IIS TLS 1.0 / 1.1 / 1.2 - Win32Exception System.web.mvc missing How to get JSON object from Razor Model object in javascript SQL Network Interfaces, error: 50 - Local Database Runtime error occurred. Cannot create an automatic instance How to get current domain name in ASP.NET How to return a file (FileContentResult) in ASP.NET WebAPI Select query to get data from SQL Server NuGet: 'X' already has a dependency defined for 'Y' How can I make window.showmodaldialog work in chrome 37? Selecting multiple columns with linq query and lambda expression onchange event for html.dropdownlist Pass multiple complex objects to a post/put Web API method How to update a claim in ASP.NET Identity?

Questions with json tag:

Use NSInteger as array index Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) HTTP POST with Json on Body - Flutter/Dart Importing json file in TypeScript json.decoder.JSONDecodeError: Extra data: line 2 column 1 (char 190) Angular 5 Service to read local .json file How to import JSON File into a TypeScript file? Use Async/Await with Axios in React.js Uncaught SyntaxError: Unexpected token u in JSON at position 0 how to remove json object key and value.? JSON parse error: Can not construct instance of java.time.LocalDate: no String-argument constructor/factory method to deserialize from String value How to format JSON in notepad++ No String-argument constructor/factory method to deserialize from String value ('') Returning JSON object as response in Spring Boot TypeError: Object of type 'bytes' is not JSON serializable How to send json data in POST request using C# Passing headers with axios POST request How to convert JSON string into List of Java object? npm notice created a lockfile as package-lock.json. You should commit this file RestClientException: Could not extract response. no suitable HttpMessageConverter found Load json from local file with http.get() in angular 2 Angular: 'Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays' How to loop through a JSON object with typescript (Angular2) How to push JSON object in to array using javascript How to check if a key exists in Json Object and get its value REST API - Use the "Accept: application/json" HTTP Header react router v^4.0.0 Uncaught TypeError: Cannot read property 'location' of undefined ASP.NET Core return JSON with status code python JSON object must be str, bytes or bytearray, not 'dict Writing JSON object to a JSON file with fs.writeFileSync Convert a JSON Object to Buffer and Buffer to JSON Object back How to parse JSON in Kotlin? How to convert FormData (HTML5 object) to JSON console.log(result) returns [object Object]. How do I get result.name? tsconfig.json: Build:No inputs were found in config file Python - How to convert JSON File to Dataframe How to define Typescript Map of key value pair. where key is a number and value is an array of objects Retrofit 2: Get JSON from Response body Refused to execute script, strict MIME type checking is enabled? Decode JSON with unknown structure How to parse a JSON object to a TypeScript Object Deserialize Java 8 LocalDateTime with JacksonMapper Getting an object array from an Angular service Python - Convert a bytes array into JSON format Passing bash variable to jq Use JsonReader.setLenient(true) to accept malformed JSON at line 1 column 1 path $ What is the difference between json.load() and json.loads() functions Import JSON file in React using setTimeout on promise chain Make XmlHttpRequest POST using JSON

Questions with asp.net-mvc tag:

Using Lato fonts in my css (@font-face) Better solution without exluding fields from Binding Vue.js get selected option on @change You must add a reference to assembly 'netstandard, Version=2.0.0.0 How to send json data in POST request using C# VS 2017 Metadata file '.dll could not be found The default XML namespace of the project must be the MSBuild XML namespace How to create roles in ASP.NET Core and assign them to users? The model item passed into the dictionary is of type .. but this dictionary requires a model item of type How to use npm with ASP.NET Core localhost refused to connect Error in visual studio ASP.NET 5 MVC: unable to connect to web server 'IIS Express' How to use SqlClient in ASP.NET Core? Pass Model To Controller using Jquery/Ajax How can I make my string property nullable? Could not find a part of the path ... bin\roslyn\csc.exe CS1617: Invalid option ‘6’ for /langversion; must be ISO-1, ISO-2, 3, 4, 5 or Default How to remove error about glyphicons-halflings-regular.woff2 not found Adding ASP.NET MVC5 Identity Authentication to an existing project ASP.NET Web API : Correct way to return a 401/unauthorised response Effectively use async/await with ASP.NET Web API The page cannot be displayed because an internal server error has occurred on server Calling Web API from MVC controller Rendering partial view on button click in ASP.NET MVC Bootstrap fixed header and footer with scrolling body-content area in fluid-container Display List in a View MVC Phone Number Validation MVC How to get 'System.Web.Http, Version=5.2.3.0? How to call controller from the button click in asp.net MVC 4 How to extend available properties of User.Identity How to pass multiple parameters from ajax to mvc controller? @Html.DisplayFor - DateFormat ("mm/dd/yyyy") How to get DropDownList SelectedValue in Controller in MVC MVC web api: No 'Access-Control-Allow-Origin' header is present on the requested resource How to add/update child entities when updating a parent entity in EF Return HTML from ASP.NET Web API Jquery Ajax, return success/error from mvc.net controller There is no ViewData item of type 'IEnumerable<SelectListItem>' that has the key country System.web.mvc missing How to get JSON object from Razor Model object in javascript error CS0103: The name ' ' does not exist in the current context How to return a file (FileContentResult) in ASP.NET WebAPI Return JsonResult from web api without its properties Using a PagedList with a ViewModel ASP.Net MVC How to call MVC Action using Jquery AJAX and then submit form in MVC? onchange event for html.dropdownlist How to update a claim in ASP.NET Identity? Make sure that the controller has a parameterless public constructor error @Html.DropDownListFor how to set default value Razor MVC Populating Javascript array with Model Array

Questions with asp.net-mvc-5 tag:

'router-outlet' is not a known element The type or namespace name 'System' could not be found How to get 'System.Web.Http, Version=5.2.3.0? EntityType 'IdentityUserLogin' has no key defined. Define the key for this EntityType How to extend available properties of User.Identity How to implement oauth2 server in ASP.NET MVC 5 and WEB API 2 How to get JSON object from Razor Model object in javascript The model backing the 'ApplicationDbContext' context has changed since the database was created How can I implement a theme from bootswatch or wrapbootstrap in an MVC 5 project? MVC 5 Access Claims Identity User Data How to add MVC5 to Visual Studio 2013? ASP.NET MVC 5 - Identity. How to get current ApplicationUser Updating user data - ASP.NET Identity GlobalConfiguration.Configure() not present after Web API 2 and .NET 4.5.1 migration OwinStartup not firing HTTP Error 500.19 and error code : 0x80070021 Redirect to Action by parameter mvc ASP.NET Identity DbContext confusion Creating Roles in Asp.net Identity MVC 5 ASP.NET MVC5/IIS Express unable to debug - Code Not Running How do I install ASP.NET MVC 5 in Visual Studio 2012? How to get current user, and how to use User class in MVC5? How to set Default Controller in asp.net MVC 4 & MVC 5