将JSON附加到HTML

Append JSON to HTML

本文关键字：HTML JSON      更新时间：2023-09-26

我有一个JSON文件，有3个对象，我需要解析成一个小部件上的某些元素，但我不确定什么是最好的方法。

谁能帮我找个方法吗?

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}]

控制器:

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);
    }

木豆:

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;
    }
服务:

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;
    }

您能再次检查返回的Json吗?看起来服务返回的是一个对象列表，每个对象都有3个属性。因此Json将在数组中有一个对象和3个属性。

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

所以这三个属性都可以在索引0处找到

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

使用如下代码:

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

您可以使用json .parse()方法，该方法将json解析到对象中，然后轻松显示数据。下面是一个示例代码:

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

试试这个方法

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

try this:

var data = jQuery.parseJSON(data);
$.each(data, function(i,v){
    $.each(v,function(k,z){
        $('#'+k).html(z);
    });
});
相关文章：