Manipulating JSON data in JavaScript

Question

Manipulating JSON data in JavaScript

Currently delving into learning JSON as required for work purposes... I am attempting to dynamically add and delete records to a JSON object... Can anyone shed some light on why I keep receiving an UNDEFINED message? Here is the code... Appreciate any assistance!

<html>
<head>
<title>TEST</title>
<script language="Javascript" type="text/javascript">
 function addC(){
  var index = document.getElementById('type').selectedIndex;
  var type = document.getElementById('type').options[index].value;
  var name = document.getElementById('inpName').value;
  var date = document.getElementById('inpDate').value;
  processJson(type, name, date);
  return false;
 }

 function processJson(type, name, date){
  var count = document.getElementById('counter').value * 1;
  var currentRecords = document.getElementById('holder').value;
  var newRecordType = "{\"name\":\"" + type + "\",";
  var newRecordName = "\"type\":\"" + name + "\",";
  var newRecordDate = "\"date\":\"" + date + "\"}";
  var newRecord = newRecordType + newRecordName + newRecordDate;
  if (count > 0){
   newRecord = "," + newRecord;
  }
  var updatedRecord = currentRecords + newRecord;
  var jsonObj = {"allrows" : "[" + updatedRecord + "]"};
  document.getElementById('counter').value = (document.getElementById('counter').value * 1) + 1;
  document.getElementById('holder').value = updatedRecord;  
 }

 function deleteRow(){
  var toDel = document.getElementById('inpDel').value;
  alert(toDel);
  var current = "[" + document.getElementById('holder').value + "]";
  alert(current);
  var jsonO = {"allRows" : current};
  alert(jsonO);
  var t = jsonO.allRows[toDel].type;
  alert("Deleting - " + t);
  return false;  
 }
</script>
</head>

<body>
<form name="frm" action="">
<table>
 <tr>
  <td>
   <select name="type" id="type">
    <option value="creator">Creator</option>
    <option value="editor">Editor</option>
    <option value="publisher">Publisher</option>
   </select>
  </td>
  <td>
   <input type="text" name="inpName" id="inpName" value="">
  </td>
  <td>
   <input type="text" name="inpDate" id="inpDate" value="">
  </td>
  <td>
   <input type="text" name="inpDel" id="inpDel" value="">
  </td>
  <td>
   <input type="button" name="cmdAdd" value="Add" onClick="return addC();">
   <input type="button" name="cmdAdd" value="Del" onClick="return deleteRow();">
  </td>
 </tr>
 <tr>
  <td><input type="text" name="counter" id="counter" value="0">
 </tr>
 <tr>
  <td colspan="3"> 
   <textarea name="holder" id="holder" rows="20" cols="60"></textarea>

  </td>
 </tr>
</form>
</body>
</html>

javascript json

Answer 1

Answer №1

A commonly employed script for handling json can be found at this link: http://www.json.org/js.html

Answer 2

A commonly employed script for handling json can be found at this link: http://www.json.org/js.html

Answer 3

Answer №2

You're not working with JSON, but rather JavaScript objects. While JSON stands for "JavaScript Object Notation," it typically refers to serialized objects transmitted over a network.

Let's delve into object literals in JavaScript:

An object is formatted as { key : value, key : value }, where the key doesn't require quotes unless it's a keyword.
An array is structured as [ value, value ].
Arrays are essentially objects in JavaScript.
To access a value within an object, you can use either of the following notations:
```
object.key
object['key']
```
Using the second notation allows for using a variable as the key.
As arrays are treated as objects, you access array values in the same way:
```
array[index]
```

To achieve what you seem to be aiming for, I would approach it like this:

Firstly, a basic function to convert objects into strings:

// CAUTION! : this is a simple toString function. It's advisable to utilize a more robust one
function toString (obj) {
    if (!isNaN(obj))             return ''+obj;
    if (obj === true)            return 'true';
    if (obj === false)           return 'false';
    if (obj === null)            return 'null';
    if (obj === undefined)       return 'undefined';
    if (typeof obj == 'string')  return '"'+obj+'"';
    if (obj instanceof String)   return '"'+obj+'"';
    var ret="";
    if (obj instanceof Array) {
        ret += "[";
        for (var i=0;i<obj.length;i++) {
            ret += toString(obj[i]);
        }
        ret += "]";
    }
    else {
        ret += "{";
        for (var i in obj) {
            if (obj.hasOwnProperty(i)) {
                ret += toString(i);
                ret += ':';
                ret += toString(obj[i]);
            }
        }
        ret += "}";
    }
    return ret;
}

Now, moving on to the remaining code:

var counter_el = document.getElementById('counter');
var count = counter_el.value*1;

// CAUTION! : eval is a quick and dirty JSON deserializer
// it's generally not recommended for use, but works fine in
// this scenario:
eval('var currentRecords = ' + document.getElementById('holder').value);
var newRecord = {
    name : type,
    type : name,
    date : date
}

if(count > 0){
    currentRecords.allrows.push(newRecord);
}
else{
    currentRecords = { allrows : [ newRecord ] };
}

counter_el.value=(counter_el.value*1)+ 1;
document.getElementById('holder').value=toString(currentRecords);

Answer 4

You're not working with JSON, but rather JavaScript objects. While JSON stands for "JavaScript Object Notation," it typically refers to serialized objects transmitted over a network.

Let's delve into object literals in JavaScript:

An object is formatted as { key : value, key : value }, where the key doesn't require quotes unless it's a keyword.
An array is structured as [ value, value ].
Arrays are essentially objects in JavaScript.
To access a value within an object, you can use either of the following notations:
```
object.key
object['key']
```
Using the second notation allows for using a variable as the key.
As arrays are treated as objects, you access array values in the same way:
```
array[index]
```

To achieve what you seem to be aiming for, I would approach it like this:

Firstly, a basic function to convert objects into strings:

// CAUTION! : this is a simple toString function. It's advisable to utilize a more robust one
function toString (obj) {
    if (!isNaN(obj))             return ''+obj;
    if (obj === true)            return 'true';
    if (obj === false)           return 'false';
    if (obj === null)            return 'null';
    if (obj === undefined)       return 'undefined';
    if (typeof obj == 'string')  return '"'+obj+'"';
    if (obj instanceof String)   return '"'+obj+'"';
    var ret="";
    if (obj instanceof Array) {
        ret += "[";
        for (var i=0;i<obj.length;i++) {
            ret += toString(obj[i]);
        }
        ret += "]";
    }
    else {
        ret += "{";
        for (var i in obj) {
            if (obj.hasOwnProperty(i)) {
                ret += toString(i);
                ret += ':';
                ret += toString(obj[i]);
            }
        }
        ret += "}";
    }
    return ret;
}

Now, moving on to the remaining code:

var counter_el = document.getElementById('counter');
var count = counter_el.value*1;

// CAUTION! : eval is a quick and dirty JSON deserializer
// it's generally not recommended for use, but works fine in
// this scenario:
eval('var currentRecords = ' + document.getElementById('holder').value);
var newRecord = {
    name : type,
    type : name,
    date : date
}

if(count > 0){
    currentRecords.allrows.push(newRecord);
}
else{
    currentRecords = { allrows : [ newRecord ] };
}

counter_el.value=(counter_el.value*1)+ 1;
document.getElementById('holder').value=toString(currentRecords);

Manipulating JSON data in JavaScript

Answer №1

Answer №2

Similar questions

PHP is unable to make updates to the record

Discovering the reason behind a DOM element's visual alteration upon hovering: Where to start?

Enhancing audio control features using HTML and JavaScript

What are the steps to validate an Ajax form using Dojo JavaScript?

Creating an interactive button using RichFaces and Bootstrap for seamless Ajax functionality

Utilizing jQuery and AJAX, execute a PHP query based on the user's input and showcase the query's outcome without reloading the page

In Cypress, I am trying to specifically choose only numerical values from a dropdown menu. However, the list contains a mix of alphanumeric and numeric values

Using jQuery, you can disable an option upon selection and also change its border color

How can I designate the file name when using Ajax to export in Excel formatting?

Guidelines for utilizing recursion in order to calculate the sum of specified values within a multidimensional array

I am sometimes experiencing issues with activating ajax code using Bootstrap 3 modal

When a cookie is set in NextJS with a static export, it reverts back to its original

Is it possible for me to display dynamic content and utilize a template engine like (ejs)?

Ways to exclusively trigger the onclick function of the primary button when dealing with nested buttons in React.js

What is the best way to navigate back on a button click in jquery AJAX without causing a page refresh?

Ways to reuse test cases across different test suites in Protractor

Errors that occur during Javascript runtime in the Express framework

What is the proper method for encoding HTML within JAVASCRIPT and JSON, and then decoding it in PYTHON?

Guide on retrieving the mouse button press from a command event using XUL

Amazon Lex: Transforming Speech to Text with Audio Technology