Solved

Add json string to a javascript object

Posted on 2016-09-28
9
62 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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
 
LVL 54

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 54

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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Signal R -send data to client: only if they are allowed to see it ? 1 51
Passport Expiry 3 44
Jquery 10 20
where is team.js? 3 24
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'…
We will take a look at the d3.js library for visualizations.  I will provide a walkthrough of a short bar graph example as well as introduce you to the d3.js API.  We also will explore links of other examples and further information regarding SVG's.
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…

776 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