Solved

Add json string to a javascript object

Posted on 2016-09-28
9
47 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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 51

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 51

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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

760 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

22 Experts available now in Live!

Get 1:1 Help Now