Response coming from an ajax call in the form of a JSON

With the JSON string provided below: 

{cols:[{"id":"t","label":"Title","type":"string"},{"id":"l","label":"Avg ","type":"string"},{"id":"lb","label":"High","type":"string"},{"id":"lo","label":"Low","type":"string"}],rows:[{"c":[{"v":"Change navigation"},{"v":5.6666666666667},{"v":"10"},{"v":"1"}]},{"c":[{"v":"Executive leadership"},{"v":6.0666666666667},{"v":"7"},{"v":"3"}]},{"c":[{"v":"Business ownership"},{"v":5.8095238095238},{"v":"10"},{"v":"2"}]},{"c":[{"v":"Change enablement"},{"v":6.4285714285714},{"v":"9"},{"v":"5"}]}]}

How do I achieve something like this?

['Change navigation=6.5333333333333','Executive leadership=6.0666666666667',
  'Business ownership=5.8095238095238','Change enablement=6.4285714285714']

using JavaScript

I received a JSON object as a response from AJAX. Now, I am attempting to create an image chart using it. I used `JSON.stringify` to convert the object, but I am unsure of how to format it for the charts to understand.

javascriptjson

Answer №1

If you have a JSON object named `json`, the following code can be used:

var newArray = [],
    index = 0;

for (; index < json.rows.length; index++) {
    newArray.push(json.rows[index].c[0].v + '=' + json.rows[index].c[1].v);
}

console.log(newArray);  // -> ["Change navigation=5.6666666666667", "Executive leadership=6.0666666666667", "Business ownership=5.8095238095238", "Change enablement=6.4285714285714"]

Check out this DEMO.

Answer №2

When you input your JSON string into the incredible JSONChecker, it quickly becomes apparent that your JSON is not in proper format. JavaScript attempts to salvage any valid components, which may result in an incomplete object.

Answer №3

To generate a final array, start by extracting the rows property from the data object. Iterate through each item in the array and add the correct string (item.c[0].v+" "+item.c[1].v) to the result array. Voila! Your task is complete.

Answer №4

In essence, the process involves iterating through every row and constructing a fresh collection of entities in the structure required by the chart component, which can then be fed into the chart control.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigate to the top of the page prior to updating the Link route in NextJS

Whenever I click on a link to navigate to a new page, the page loads and immediately scrolls to the top. I want to change this behavior so that the scroll resets to the top before the new page is rendered. You can observe this issue on . If you scroll do ...

javascripthtmlreactjsscrollnext.js

Efficiently transferring time values from dynamically created list items to an input box using JavaScript

Is there a way to store a dynamically generated time value from an li element into an input box using JavaScript? I have a basic timer functionality on my website that includes starting, stopping, pausing, taking time snaps, and resetting them. These time ...

javascripthtml

I am attempting to monitor the addliquidity event on Uniswap's router02

I am currently attempting to monitor addliquidity events in order to extract data on newly added pairs const Web3 = require('web3'); const NODE_URL = "https://mainnet.infura.io/v3/d3c5832256754c85be86b4c97de2d3d3" const web3 = new We ...

javascriptnode.jsweb3jsuniswap

Raycasting in three.js - mouse pointer and highlighting not precisely aligned with intersected mesh

My current setup involves using a raycaster to highlight a row of cubes arranged in a grid format. The highlighting works fine, but I'm encountering issues with the cursor turning into a pointer precisely over the cubes in the row. Moreover, the highl ...

javascriptcssthree.jsmouseoverraycasting

Provide the option to assign values on select options in order to choose specific JSON data

When working with JSON data from an API, I am creating a dynamic select element. The goal is to change some content (text and image src) based on the option selected from this select element. I have successfully populated the select options with names usi ...

javascripthtmljsonapi

Tips for implementing a distinct texture on child elements through traversal techniques

My current dilemma involves working with an object that I've loaded using THREE.ObjectLoader(). This object consists of various elements, resembling a simple box made up of panels and sticks. My goal is to assign different textures to specific child ...

javascriptthree.jstraversal

Creating a unique-looking visual representation of progress with arcs

Looking to create a circular progress bar (see image below), with loading starting from the left bottom side up to the right bottom side. The empty state should be light-blue (#E8F6FD) and the progress color strong blue (#1CADEB). I've experimented w ...

javascriptcsssvgcss-shapes

Tips for wrapping text to fit the width of a column

Hello, I have a table with varying column widths as shown below ${"#goldBarList"} table tr td:first-child{width:5%;} ${"#goldBarList"} table tr td:first-child+td{width:5%;} ${"#goldBarList"} table tr td:first-child+td+td{width:6%;} ${"#goldBarList"} table ...

javascriptjquerycss

Angular: Issue encountered while attempting to differentiate an '[object Object]'. Arrays and iterables are the only permissible types for this operation

I encountered the following error message while attempting to retrieve updated data: Error trying to diff '[object Object]'. Only arrays and iterables are allowed Snippet of Get Code: allDatas allData(data) { this.allDatas = data } Up ...

javascriptangulartypescript

Connecting different jQuery methods to create a chain

From my understanding of jQuery chaining, the first method in the list must complete before the next method executes. Here is an example: $.fn.reportZebraStriper = function(options) { console.log('reportZebraStriper()'); return true; } ...

javascriptjquerymethodschaining

What is the process for loading a font file in Vue.js and webpack?

I've done a lot of research, but I couldn't find any links that show me exactly how to add fonts in VueJS. This is the method I'm using to import the font in my LESS file: @font-face { font-family: "Questrial"; src: url("../../fonts/Que ...

javascriptvue.jswebpackvuejs2less

Using Python to Populate an Array Inside a JSON Object

The JSON below shows a structure with file name and function details: post = { "file_name" : file_name, "function" : [{ "func_name" : func_name, "start_line" : start_line, "end_line" : end_line }] } In my Python script, I am attempti ...

pythonjsonmultidimensional-arraydynamic

The removal of a JQuery element can result in causing the webpage to become unresponsive and lead to

When attempting to create a loop in JQuery to remove elements from my HTML, I encountered an issue where the function caused my browser to hang and become unresponsive. Here is the JQuery code I used: function removeElement(){ var i =0; ...

javascriptjqueryhtml

Important notice: It is not possible to assign refs to function components. Any attempt to do so will result in failure. If you intended to assign a ref, consider

My console is showing a warning when I use the nextJs Link component. Can someone assist me in resolving this issue and providing an explanation? Here is the message from the console: https://i.stack.imgur.com/jY4FA.png Below is a snippet of my code: im ...

javascriptreactjstypescriptnext.js

Efficient method to update the state of a result in React JS using hooks within an asynchronous function and useState

How can I ensure the state is updated correctly after using setState? I found a code example similar to mine at Why react hook value is not updated in async function?, but it doesn't provide a solution to the problem. Any help would be greatly appreci ...

javascriptreactjs

Is it possible to pass additional arguments to setState other than prevState and props?

I'm currently facing an issue with my component that involves calling a function called addOption, which is defined on its parent component. This function takes a parameter 'option' from a form field and concatenates it with an array of opti ...

javascriptreactjstypescript

The functionality of php.js is compromised

I've been attempting to integrate php.js into my scripts, but have encountered a problem. I debugged a function and loaded it onto a single page containing only jQuery and php.js, yet it is still not functioning properly. <script src="http://code. ...

phpjavascriptjquery

Implementing Isotope layout in Reactjs with data-attributes for filtering and sorting content

I am currently working on optimizing the isotope handler within a react component. My goal is to implement filter options such as category[metal] or category[transition], as well as combo filters like category[metal, transition]. Here is the sandbox for t ...

javascriptreactjsjquery-isotope

Optimal approach to displaying views with Express.js and EJS

Recently, I came across a website that only renders EJS templates using Express.js routing. All the routes are defined in the /routes/index.js file. As the file grows with more routes being added, I am thinking about restructuring it to make it more develo ...

javascriptexpressejs

Restrict the character count in Vue Material chips

Currently, I am utilizing the Vue Material Chips component to gather string arrays. My goal is to limit the character length of each string within the array to 30 characters. The component offers a md-limit prop which restricts the number of strings in th ...

javascriptvue.jsvue-material