Fetch data from local json file and display in html asp.net mvc-CodePudding

I need to fetch data from json file that file is located in my computer, I pasted my code below but I get an error:

Newtonsoft.Json.JsonReaderException: 'Unexpected character encountered while parsing value: h. Path '', line 0, position 0.'

Can anyone give me a solution for this? Thanks in advance :)

Model class jsondata.cs

namespace fetch_data_jsonfile.Models
{
    public class jsondata
    {
        public string id { get; set; }
        public string title { get; set; }
        public string price { get; set; }
        public string description { get; set; }
        public string category { get; set; }
        public string image { get; set; }

    }

    public class Products
    {
        public IList<jsondata> products;
    }
}

Controller:

namespace fetch_data_jsonfile.Controllers
{
    public class JsonfileController : Controller
    {
        [HttpGet]
        public ActionResult Home()
        {
            // Example JSON
            var json = "D:/Newfolder/products.json";
            var Products = JsonConvert.DeserializeObject<Products>(json);
            return View(Products);
        }
    }
}

View: Home.cshtml

@{
    Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>json</title>

    <!-- CSS Includes -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <style type="text/css">

        .field-validation-error {
            color: #ff0000;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="col-md-6 col-md-offset-3">
            <ul>
                @foreach (var jsondata in Model.Products)
                {
                    <li>@jsondata.title</li>
                }
            </ul>
        </div>
    </div>
</body>
</html>

json file data

{ "products" : [{
"id":1,
"title":"Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
"price":109.95,
"description":"Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
"category":"men's clothing",
"image":"https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
"rating":{"rate":3.9,"count":120}},
]}

CodePudding user response：

corrected answer,full code below.

model:

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace fetch_data_jsonfile.Models
{
    public class jsondata
    {
        [JsonProperty("id")]
        public string id { get; set; }
        [JsonProperty("title")]
        public string title { get; set; }
        [JsonProperty("price")]
        public string price { get; set; }
        [JsonProperty("description")]
        public string description { get; set; }
        [JsonProperty("category")]
        public string category { get; set; }
        [JsonProperty("image")]
        public string image { get; set; }

    }

    public class Products
    {
        [JsonProperty("products")]
        public IList<jsondata> products;
    }
}

controller:

using fetch_data_jsonfile.Models;
using Microsoft.Ajax.Utilities;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Net;
using System.Text;
using System.Web;
using System.Web.Mvc;



namespace fetch_data_jsonfile.Controllers
{
    public class JsonfileController : Controller
    {
        [HttpGet]
        public ActionResult Home()
        {
            string path = @"D:/Newfolder/products.json";
            string readText = System.IO.File.ReadAllText(path);
            JArray convert = JArray.Parse(readText);
            ViewData["responsedata"] = convert;
            return View();
        }
    }
}

view:

@{
    Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>json</title>

    <!-- CSS Includes -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <style type="text/css">

        .field-validation-error {
            color: #ff0000;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="col-md-6 col-md-offset-3">
            <ul>
              @foreach (var jsondata in (dynamic)ViewData["responsedata"])
                {
                    <li>@jsondata.title</li>
                }
            </ul>
        </div>
    </div>
</body>
</html>