Transform JSON data into an array of arrays

Question

Transform JSON data into an array of arrays

For my project, I am using the python SimpleHTTPWebserver to serve up various files, including a valid JSON file named "file.json". In my javascript front end, I need to interpret this JSON object as an array of arrays. For example:

{
  "val1": 101,
  "val2": 202
}

Should be transformed into

var jsonFile = [['val1', 101], ['val2', 202]]

Unfortunately, I am unable to even load the file's raw content into a variable. I am new to javascript and have attempted the following:

<html>
<head>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script src="http://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>
</head>
<body></body>
<script type="text/javascript">
  var mydata = JSON.parse("file.json");
</script>
</html>

However, this code snippet is throwing an error:

VM89:1 Uncaught SyntaxError: Unexpected token s in JSON at position 0 at JSON.parse () at :1:6

Being new to javascript, I want to keep things simple using either plain javascript or a library like jQuery. I just can't figure out why this code isn't working. Can someone please help me with this issue?

javascript json

Answer 1

Answer №1

To access the json data, you must first request the files from the server.

By making an ajax request and specifying json, you can avoid the need to parse the data.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="http://d3js.org/topojson.v1.min.js"></script>
  <script src="http://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>
</head>

<body>
<script type="text/javascript">
  $.ajax({
    url: "path/to/json/file",
    type: 'GET',
    dataType: 'json',
    success: response => {
      console.log(Object.entries(response));
    }
  })
</script>
</body>

</html>

Utilizing Object.entries() allows you to transform an object {key:value} to [[key,value]]

let x = {val1: 101,val2: 202};
console.log(Object.entries(x))

Answer 2

To access the json data, you must first request the files from the server.

By making an ajax request and specifying json, you can avoid the need to parse the data.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="http://d3js.org/topojson.v1.min.js"></script>
  <script src="http://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>
</head>

<body>
<script type="text/javascript">
  $.ajax({
    url: "path/to/json/file",
    type: 'GET',
    dataType: 'json',
    success: response => {
      console.log(Object.entries(response));
    }
  })
</script>
</body>

</html>

Utilizing Object.entries() allows you to transform an object {key:value} to [[key,value]]

let x = {val1: 101,val2: 202};
console.log(Object.entries(x))

Answer 3

Answer №2

JSON.parse function can parse a JSON object string such as "{"foo":"bar"}" and convert it into a JSON object. If you are passing a file name instead of the content, it will result in an error due to the incorrect format. To properly parse the JSON file, you need to fetch its content and then pass it to JSON.parse. If you have included jQuery in your project, you can retrieve the file using XMLHttpRequest to make an asynchronous request (also known as AJAX).

$.ajax('/url/of/your/file.json', {
    success: function(content) {
        var json = JSON.parse(content);
        var resultArray = Object.keys(json)
                                .map(function(key) {
                                    return [key,json[key]];
                                })
                                .reduce(function(container,nextArray) {
                                    container.push(nextArray);
                                    return container;
                                }, []);
       console.log(resultArray); // This is the desired resultArray
    }
});

Learn more about $.ajax()

Visit the documentation for JSON.parse()

Understand Object.keys()

Explore Array.map()

Learn about Array.reduce()

Answer 4

JSON.parse function can parse a JSON object string such as "{"foo":"bar"}" and convert it into a JSON object. If you are passing a file name instead of the content, it will result in an error due to the incorrect format. To properly parse the JSON file, you need to fetch its content and then pass it to JSON.parse. If you have included jQuery in your project, you can retrieve the file using XMLHttpRequest to make an asynchronous request (also known as AJAX).

$.ajax('/url/of/your/file.json', {
    success: function(content) {
        var json = JSON.parse(content);
        var resultArray = Object.keys(json)
                                .map(function(key) {
                                    return [key,json[key]];
                                })
                                .reduce(function(container,nextArray) {
                                    container.push(nextArray);
                                    return container;
                                }, []);
       console.log(resultArray); // This is the desired resultArray
    }
});

Learn more about $.ajax()

Visit the documentation for JSON.parse()

Understand Object.keys()

Explore Array.map()

Learn about Array.reduce()

Transform JSON data into an array of arrays

Answer №1

Answer №2

Similar questions

Encountering an error with code 'MODULE_NOT_FOUND' while attempting to deploy a bot on Heroku

Having trouble retrieving the value of a textarea within a jQuery UI dialog box

A guide to using Python to execute transformations on JSON data

How can we solve the issue of missing props validation for the Component and pageProps in _app.js?

Creating JavaScript objects through function calls

Can config values be dynamically set from an Excel file in Protractor?

An effective way to determine the size of a browser through javascript

Retrieve image details and display them in the console when the page is resized

Ways to determine the height of a row within a flexbox

What could be causing this issue with the ng-bind and ng-show directives not functioning as expected?

When I try to use this code in Eclipse, it runs without any issues. However, when I attempt to convert it into a

Using a computed property setter in Vue.js/Javascript while focusing on a datepicker can lead to crashing the browser

Ways to retrieve a variable within the init() function

The app constantly requests permission for geolocation services

Returning to the initial state after clicking on an element within a repeated set in AngularJS?

Passing the selected value from a drop-down list to a controller based on another one using Ajax and JSON in ASP.NET MVC

The combination of NextJS and Firebase Auth using the GoogleAuthProvider is powerful

What is the best way to interpret a JSON result?

Using Angular to send JSON data to an API

Styling a Pie or Doughnut Chart with CSS