Solved

Add json string to a javascript object

Posted on 2016-09-28
9
55 Views
Last Modified: 2016-09-29
Hi,

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

Open in new window


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

Open in new window


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
0
Comment
Question by:peternordberg
  • 4
  • 3
  • 2
9 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 41820177
you can use javascript's builtin function JSON.parse(string)

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
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 41820192
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
0
 

Author Comment

by:peternordberg
ID: 41820236
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
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 41820262
to turn the json string into a javascript object (not jquery object) see my first comment.

str = outputOfQuery

jsObject = JSON.parse(str)

thats the first step.

the second step is to combine your original js object with the new object jsObject you just created. see my last comment
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41820266
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.
0
 

Author Comment

by:peternordberg
ID: 41822153
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 fille from the datatable output, but have double quotes.The string gets the output from the datatable.

I replace the double quotes with one single quote.I replace the double quotes with single.

I check so that the value fills the variable when the script is loading on page load.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
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41822167
Your original JSON had date, sales, budget the above has date, sales, salesBudget
0
 

Author Comment

by:peternordberg
ID: 41822174
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 }];
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 41822319
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?
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now