CODEWITHSUNDEEP
javascriptjsonajaxhtml
user10727653
user10727653

Reputation:

Doubts on whether json data or JavaScript object

I'm beginner on programming. I've studied Stack Overflow and W3schools, and made my little project just for learning and improving.

I have a question, my program is working as it should but the problem is I'm not sure (have doubts) is the json file I made real json or JavaScript object?

One says it is and one says it's not, if it's not real json how to change it into real json because I can't figure it out.

I have three groups inside every group is 4 people and those people are the same in all 3 groups but just different numbers (credits or votes whatever), and I have a json file (I think it is json) named 'values.json'.

Here are codes:

  <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script type="text/javascript" src="values.json"></script>
    <style>
    * {
        box-sizing: border-box;
    	   box-sizing: border-box;
       -webkit-box-sizing
       -moz-box-sizing: border-box;
    }

    .oee {
      float:left;
      height: 550px;
      width: 100%;
      display: inline-block;
    }

    .gauge {
      height: 250px;
      display: inline-block;
      width: 100%;
    }
     
    h1 { 
      float:left;  
    }

    body {   
      margin: 100px auto;  
      text-align: center; 
    }

    @media only screen and (orientation: landscape) {
    .gauge {
      width: 30%; 
    }

    .oee{width: 50%;
      margin-left: -132px;
    }
    }
      </style>
    </head>
    <body >
    <h1>people votes</h1>
     <div class="all">
         <div id="ww1" class="oee"></div>
        <div id="ww2" class="gauge" data-value=valuesparsed['Pekka']></div><br>
    	<div id="ww3" class="gauge"></div><br>
        <div id="ww4" class="gauge"></div>
      </div>    
      <script src="raphael-2.1.4.min.js"></script>
      <script src="justgage.js"></script>
      <script>
      document.addEventListener("DOMContentLoaded", function(event) {
        var valuesparsed = JSON.parse(values2)

        var dflt = {
          min: 0,
          max: 100,
       //   donut: true,
          gaugeWidthScale: 1.1,
          counter: true,
          hideInnerShadow: true
        }

        var ww1 = new JustGage({
          id: 'ww1',
          value: valuesparsed['Laura'],
          title: 'Laura ',
          defaults: dflt
        });

        var ww2 = new JustGage({
          id: 'ww2',
          title: 'Pekka',
          defaults: dflt
        });
    	
    	    var ww3 = new JustGage({
          id: 'ww3',
          value: valuesparsed['Jussi'],
          title: 'Jussi',
          defaults: dflt
        });
    	
    	    var ww4 = new JustGage({
          id: 'ww4',
          value: valuesparsed['Kalle'],
          title: 'Kalle',
          defaults: dflt
        });

      });
      
      </script>
    </body>
    </html>

values.json

    values1= '{"Laura" : 45, "Pekka" : 89, "Jussi" : 35, "Kalle" : 25}';
    values2= '{"Laura" : 75, "Pekka" : 59, "Jussi" : 85, "Kalle" : 95}';
    values3= '{"Laura" : 55, "Pekka" : 15, "Jussi" : 45, "Kalle" : 67}';

Upvotes: 4

Views: 169

Answers (4)

trincot
trincot

Reputation: 350961

The file you call values.json is not JSON, but a script in the JavaScript language. Such a script you can indeed include and run via the script tag.

If however you want to have JSON format for your data, and you want to have it loaded from a file into your other JavaScript code, then proceed like this:

  1. Put JSON in your file (no variable names, no assignments, no trailing semi-colon, just JSON) -- it can only be one data structure, so let's use an array:

    [{"Laura" : 45, "Pekka" : 89, "Jussi" : 35, "Kalle" : 25},
 {"Laura" : 75, "Pekka" : 59, "Jussi" : 85, "Kalle" : 95},
 {"Laura" : 55, "Pekka" : 15, "Jussi" : 45, "Kalle" : 67}]

  2. Remove the script src= tag.

  3. Mark the DOMContentLoaded callback function as asynchronous:

    document.addEventListener("DOMContentLoaded", async function(event) {
//                                            ^^^^^

  4. Add code within that callback to load and parse the JSON into a variable arr:

    var response = await fetch("values.json");
var arr = await response.json();
var valuesparsed = arr[1]; // choose here which of the three you want to work with

// Rest of your code comes here...

Upvotes: 2

Murwa
Murwa

Reputation: 2278

So, @walee, just to emphasise on the existing answers, I've created a plunker to sort of show the difference between JSON and JS objects.

In a nutshell, I've extracted your values.json to real json:-

[
    {"Laura" : 45, "Pekka" : 89, "Jussi" : 35, "Kalle" : 25}
    ...
    ...
]

And Js:

const values1 = {"Laura": 45, "Pekka": 89, "Jussi": 35, "Kalle": 25},
    ...

In the plunker, I've demonstrated fetching the json file using the Fetch API, but fill free to use any HTTP library out there.

Upvotes: 0

Quentin
Quentin

Reputation: 944202

The content of values.json is a JavaScript program which assigns three string literals to three global variables.

The value of each of those strings is a JSON text.

If you wanted to have just JSON in that file, then you would need either:

3 separate URLs each containing a JSON text like:

{"Laura" : 45, "Pekka" : 89, "Jussi" : 35, "Kalle" : 25}

or 1 URL containing an array of objects:

[
  {"Laura" : 45, "Pekka" : 89, "Jussi" : 35, "Kalle" : 25},
  {"Laura" : 75, "Pekka" : 59, "Jussi" : 85, "Kalle" : 95},
  {"Laura" : 55, "Pekka" : 15, "Jussi" : 45, "Kalle" : 67}
]

Then you would need to load the JSON data using a different mechanism (it JSON is not JavaScript, you cannot load it using <script>) such as the fetch API.

async function process_json() {

    const response = await fetch('your_json.json');
    const data = response.json();
    console.log(data);

}

Upvotes: 0

Ritesh Waghela
Ritesh Waghela

Reputation: 3727

Your value.json

values1= '{"Laura" : 45, "Pekka" : 89, "Jussi" : 35, "Kalle" : 25}';
values2= '{"Laura" : 75, "Pekka" : 59, "Jussi" : 85, "Kalle" : 95}';
values3= '{"Laura" : 55, "Pekka" : 15, "Jussi" : 45, "Kalle" : 67}';

is not really JSON.

JSON starts with either

{

An object.

or

[

An Array.

and ends with the same depending on their start.

An examaple would be 

{"Laura" : 45, "Pekka" : 89, "Jussi" : 35, "Kalle" : 25}

In Your scenario you would like to have a JSON array that will hold your objects, something like this:

[{
        "Laura": 45,
        "Pekka": 89,
        "Jussi": 35,
        "Kalle": 25
    },
    {
        "Laura": 75,
        "Pekka": 59,
        "Jussi": 85,
        "Kalle": 95
    },
    {
        "Laura": 55,
        "Pekka": 15,
        "Jussi": 45,
        "Kalle": 67
    }
]

Upvotes: 2

Related Questions