CODEWITHSUNDEEP
javascriptjqueryjsonhtml
Gawai
Gawai

Reputation: 87

Append JSON to HTML

I have a JSON file with 3 objects that I need to parse into certain elements on a widget, but I am not sure what's the best method to do that.

Could somebody help me find a method?

HTML:

<div class="widget style1" style="background-color: #F59C1A!important; color: #FFF">
<div class="row">
    <div class="col-xs-8 text-left">
        <span>Course Weeks</span>
        <h2 class="font-bold" id="DailyChange"></h2>
        <div style="padding-bottom: 5px;padding-top: 15px">
            This Year Change: <strong id="ThisYearChange"></strong>
        </div>
        <div>
            Future Years Change: <strong id="FutureYearsChange"></strong>
        </div>
    </div>
    <div class="col-xs-4">
        <span class="label label-danger pull-right">Daily Change</span>
        <i class="fa fa-line-chart fa-5x pull-right" style="padding-top: 20px;opacity: 0.4"></i>
    </div>
</div>


<script>
$(document).ready(function () {

 var url = "/Main/CourseWeeksDCRead";

 var mftr1 = String($('#MainSchoolGeography').select2("val"));
 var mftr2 = String($('#MainCentre').select2("val"));
 var mftr3 = String($('#MainSalesRegion').select2("val"));
 var mftr4 = String($('#MainSalesPerson').select2("val"));
 var mftr5 = String($('#MainAgentCountry').select2("val"));
 var mftr6 = String($('#MainAgentGroup').select2("val"));
 var mftr7 = String($('#MainAdmissionsRegion').select2("val"));
 var mftr8 = String($('#MainProductCategory').select2("val"));

 var Object = { "agentCountry": mftr1, "centre": mftr2, "salesRegion": mftr3, "salesPerson": mftr4, "agentCountry": mftr5, "agentGroup": mftr6, "admissionsRegion": mftr7, "productCategory": mftr8 };

    $.post(url, Object, function (data) {
        console.log(data);
    });
});
</script>

JSON:

[{"DailyChange":1124.60},{"ThisYearChange":435.60},{"FutureYearsChange":680.00}]

CONTROLLER:

public ActionResult CourseWeeksDCRead(string schoolCountry, string Centre, string salesRegion, string salesPerson, string agentCountry, string agentGroup, string admissionsRegion, string productCategory)
    {
        Services.sqlService ss = new Services.sqlService();

        return Json(ss.GetCourseWeeksDCList(schoolCountry, Centre, salesRegion, salesPerson, agentCountry, agentGroup, admissionsRegion, productCategory), JsonRequestBehavior.AllowGet);
    }

DAL:

public DataTable GetCourseWeeksDC(string schoolCountry, string Centre, string salesRegion, string salesPerson, string agentCountry, string agentGroup, string admissionsRegion, string productCategory)
    {
        SqlConnection sqlConnection = new SqlConnection(connStr1);
        SqlCommand cmd = new SqlCommand("DashBoards_DailyChange", sqlConnection);

        cmd.CommandType = CommandType.StoredProcedure;

        if (schoolCountry == "null")
        {
            cmd.Parameters.AddWithValue("@schoolcountry", DBNull.Value);
        }
        else
        {
            cmd.Parameters.AddWithValue("@schoolcountry", schoolCountry);
        }

        if (Centre == "null")
        {
            cmd.Parameters.AddWithValue("@centre", DBNull.Value);
        }
        else
        {
            cmd.Parameters.AddWithValue("@centre", Centre);
        }

        if (salesRegion == "null")
        {
            cmd.Parameters.AddWithValue("@salesRegion", DBNull.Value);
        }
        else
        {
            cmd.Parameters.AddWithValue("@salesRegion", salesRegion);
        }

        if (agentCountry == "null")
        {
            cmd.Parameters.AddWithValue("@agentcountry", DBNull.Value);
        }
        else
        {
            cmd.Parameters.AddWithValue("@agentcountry", agentCountry);
        }

        if (agentGroup == "null")
        {
            cmd.Parameters.AddWithValue("@agentgroup", DBNull.Value);
        }
        else
        {
            cmd.Parameters.AddWithValue("@agentgroup", agentGroup);
        }

        if (admissionsRegion == "null")
        {
            cmd.Parameters.AddWithValue("@admissionregion", DBNull.Value);
        }
        else
        {
            cmd.Parameters.AddWithValue("@admissionregion", admissionsRegion);
        }

        if (productCategory == "null")
        {
            cmd.Parameters.AddWithValue("@productcategory", DBNull.Value);
        }
        else
        {
            cmd.Parameters.AddWithValue("@productcategory", productCategory);
        }

        cmd.Parameters.AddWithValue("@Measure", "Weeks Course");

        DataTable dt = new DataTable();
        sqlConnection.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        dt.Load(dr);
        sqlConnection.Close();

        return dt;
    }

SERVICE:

public List<CourseWeeksDC> GetCourseWeeksDCList(string schoolCountry, string Centre, string salesRegion, string salesPerson, string agentCountry, string agentGroup, string admissionsRegion, string productCategory)
    {

        List<CourseWeeksDC> courseweeks = new List<CourseWeeksDC>();
        sqlDal dal = new sqlDal();

        foreach (DataRow item in dal.GetCourseWeeksDC(schoolCountry, Centre, salesRegion, salesPerson, agentCountry, agentGroup, admissionsRegion, productCategory).Rows)
        {
            CourseWeeksDC courseweek = new CourseWeeksDC();
            courseweek.DailyChange = (decimal)item["DailyChange"];
            courseweek.ThisYearChange = (decimal)item["ThisYearChange"];
            courseweek.FutureYearsChange = (decimal)item["FutureYearsChange"];

            courseweeks.Add(courseweek);
        }
        return courseweeks;
    }

Upvotes: 1

Views: 437

Answers (5)

BenG
BenG

Reputation: 15154

Can you double check the Json returned. It looks like the service is returning a list of objects, each with the 3 properties. so the Json would have 1 object in the array with 3 properties.

[{"DailyChange":1124.60, "ThisYearChange":435.60, "FutureYearsChange":680.00}]

So all 3 properties can be found at index 0.

var daily = json[0].DailyChange;
var year = json[0].ThisYearChange;
var future = json[0].FutureYearsChange;

Upvotes: 1

Vanojx1
Vanojx1

Reputation: 5574

try this:

var data = jQuery.parseJSON(data);

$.each(data, function(i,v){
    $.each(v,function(k,z){
        $('#'+k).html(z);
    });
});

Upvotes: 0

Gagan Jaura
Gagan Jaura

Reputation: 719

Try this method

function ParseJson(jsonValue)
{
    var parsedJson = JSON.parse(jsonValue);   
    $('#DailyChange').text(parsedJson[0].DailyChange);
    $('#ThisYearChange').text(parsedJson[1].ThisYearChange);
    $('#FutureYearsChange').text(parsedJson[2].FutureYearsChange);
}

Upvotes: 0

Parasmani Batra
Parasmani Batra

Reputation: 207

you can use JSON.parse() method which parses json in to the objet then easily data can be shown. Below is a sample code :

function AppendValues(jsonstring // this will be having json string)
{
var parsedObject = JSON.parse(jsonstring );
$("#ThisYearChange").val(parsedObject.ThisYearChange);
}

Upvotes: 0

michelem
michelem

Reputation: 14590

Use something like this:

$('#ThisYearChange').html(json[1].ThisYearChange);

Upvotes: 0

Related Questions