Peter Nordberg
asked on
Add json string to a javascript object
Hi,
I have a data control that is filled with data from a javascript object like the following:
As you can see it's just usual json code. Now I need to get data from a sql database instead of using static data. In order to do that I've created this function:
This is now stored in a string but I need to get the json data stored in this string to be stored in the chartDataSales javascript object in the same format as shown above.
Is there a for me to accomplish that?
Thanks for help!
Peter
I have a data control that is filled with data from a javascript object like the following:
var chartDataSales = [{
"date": "2016-09-01",
"sales": 4252,
"budget": 2800
},
{
"date": "2016-09-02",
"sales": 1500,
"budget": 2200
},
{
"date": "2016-09-03",
"sales": 2300,
"budget": 2200
},
{
"date": "2016-09-04",
"sales": 1700,
"budget": 2200
},
{
"date": "2016-09-05",
"sales": 0,
"budget": 2200
},
{
"date": "2016-09-06",
"sales": 1500,
"budget": 1500
},
{
"date": "2016-09-07",
"sales": 0,
"budget": 1600
},
{
"date": "2016-09-08",
"sales": 1800,
"budget": 1600
},
{
"date": "2016-09-09",
"sales": 0,
"budget": 1600
},
{
"date": "2016-09-10",
"sales": 1500,
"budget": 3200
},
{
"date": "2016-09-11",
"sales": 3800,
"budget": 2000
},
{
"date": "2016-09-12",
"sales": 0,
"budget": 1500
},
{
"date": "2016-09-13",
"sales": 0,
"budget": 1500
},
{
"date": "2016-09-14",
"sales": 1500,
"budget": 1600
},
{
"date": "2016-09-15",
"sales": 2200,
"budget": 3200
},
{
"date": "2016-09-16",
"sales": 1500,
"budget": 3200
},
{
"date": "2016-09-17",
"sales": 0,
"budget": 3200
},
{
"date": "2016-09-18",
"sales": 0,
"budget": 3200
},
{
"date": "2016-09-19",
"sales": 0,
"budget": 3200
},
{
"date": "2016-09-20",
"sales": 0,
"budget": 3200
},
{
"date": "2016-09-21",
"sales": 0,
"budget": 3200
},
{
"date": "2016-09-22",
"sales": 0,
"budget": 3200
},
{
"date": "2016-09-23",
"sales": 0,
"budget": 3200
},
{
"date": "2016-09-24",
"sales": 0,
"budget": 3200
},
{
"date": "2016-09-25",
"sales": 0,
"budget": 3200
},
{
"date": "2016-09-26",
"sales": 0,
"budget": 3200
},
{
"date": "2016-09-27",
"sales": 0,
"budget": 3200
},
{
"date": "2016-09-28",
"sales": 0,
"budget": 3200
},
{
"date": "2016-09-29",
"sales": 0,
"budget": 3200
},
{
"date": "2016-09-30",
"sales": 0,
"budget": 3500
}];
As you can see it's just usual json code. Now I need to get data from a sql database instead of using static data. In order to do that I've created this function:
Public Function ConvertDataTabletoString() As String
Dim dt As New DataTable()
Dim sql As New StringBuilder
sql.AppendLine("SELECT CONVERT(NVARCHAR(10), o.orderDate, 121) AS date, SUM(o.OrderTotal) AS sales, apc.salesBudget FROM dbo.Orders AS o ")
sql.AppendLine("INNER JOIN dbo.aspnet_ProfileCustomized AS apc ON apc.sellerID = o.sellerID ")
sql.AppendLine("WHERE o.saved = 1 AND apc.sellerID = 264 AND MONTH(o.orderDate) = 9 AND YEAR(o.orderDate) = 2016 ")
sql.AppendLine("GROUP BY o.orderDate, apc.salesBudget ")
Using con As New SqlConnection(config.ConnectionString)
Using cmd As New SqlCommand(sql.ToString, con)
con.Open()
Dim da As New SqlDataAdapter(cmd)
da.Fill(dt)
Dim serializer As New System.Web.Script.Serialization.JavaScriptSerializer()
Dim rows As New List(Of Dictionary(Of String, Object))()
Dim row As Dictionary(Of String, Object)
For Each dr As DataRow In dt.Rows
row = New Dictionary(Of String, Object)()
For Each col As DataColumn In dt.Columns
row.Add(col.ColumnName, dr(col))
Next
rows.Add(row)
Next
Return serializer.Serialize(rows)
End Using
End Using
End Function
This is now stored in a string but I need to get the json data stored in this string to be stored in the chartDataSales javascript object in the same format as shown above.
Is there a for me to accomplish that?
Thanks for help!
Peter
oh, i missed that it's the same format.
if you are uding any js libraries, like jquery, some will have an extend function that you can use to merge the objects. or you can write your own. have a look at Object.assign()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
if you are uding any js libraries, like jquery, some will have an extend function that you can use to merge the objects. or you can write your own. have a look at Object.assign()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
ASKER
Hi and thanks for answer,
To complicated for me to solve with jquery object. The vb function returns json code, it's just stored in a string and I don't know how to get it in to the chartDataSales .
Peter
To complicated for me to solve with jquery object. The vb function returns json code, it's just stored in a string and I don't know how to get it in to the chartDataSales .
Peter
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Does the function run when the page is generated or is it an AJAX call?
If you are generating the page then you don't need to do anything except output the string - just put the "var chartDataSales = " on the front of it and terminate it with a ";" - as long as the output appears inside <script> tags it will be valid JavaScript.
If you are doing an AJAX call using JQuery then jQuery will convert it for you.
If you are generating the page then you don't need to do anything except output the string - just put the "var chartDataSales = " on the front of it and terminate it with a ";" - as long as the output appears inside <script> tags it will be valid JavaScript.
If you are doing an AJAX call using JQuery then jQuery will convert it for you.
ASKER
Hi,
I've now tried the approach to load the data into a hiddenfield and take its value and fill chartDataSales with it.
You can see the process in the three images below:
The string gets the output from the datatable.
I replace the double quotes with single.
The data is shown in the variable when javascript loads with the page.
Still it won't fill the chart. Can anyone see the error I'm doing and how to correct it?
Peter
I've now tried the approach to load the data into a hiddenfield and take its value and fill chartDataSales with it.
You can see the process in the three images below:
The string gets the output from the datatable.
I replace the double quotes with single.
The data is shown in the variable when javascript loads with the page.
Still it won't fill the chart. Can anyone see the error I'm doing and how to correct it?
Peter
Your original JSON had date, sales, budget the above has date, sales, salesBudget
ASKER
Yes, I changed from budget to salesBudget because that were the database fields. It works if I past it directly like this:
var chartDataSales = [{ 'date': '2016-09-05', 'sales': 11875.0000, 'salesBudget': 60000.0000 }, { 'date': '2016-09-10', 'sales': 11875.0000, 'salesBudget': 60000.0000 }, { 'date': '2016-09-15', 'sales': 9375.0000, 'salesBudget': 60000.0000 }];
var chartDataSales = [{ 'date': '2016-09-05', 'sales': 11875.0000, 'salesBudget': 60000.0000 }, { 'date': '2016-09-10', 'sales': 11875.0000, 'salesBudget': 60000.0000 }, { 'date': '2016-09-15', 'sales': 9375.0000, 'salesBudget': 60000.0000 }];
your variable value is a string. you need to convert it to a json object as per the very first post in response to your question. have you tried this yet?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
you will now have two js objects which you can merge as desired. if you need help merging please provide some sample output from your query as well as the desired result