How to parse json using json.parse

Question

1.50/5 (2 votes)

See more:

I am trying to parse json object and string it keeps throwing back an error. See line 136. I have also tried looking up on stackoverflow still nothing.:

What I have tried:

I have changed eval to json.parse:
var films = JSON.parse("(" + rawData + ")");

Still nothing. Cant seem to fid out what's wrong with it?

//Creating function to get the films table
function getFilmsTable(rows) {
	// Creating the different headings for the table
	var headings = 
		[ "id", "title", "year", "director", "stars", "review" ];
	// Return the table with the headings and rows
	return(getTable(headings, rows));
} // CLose function get films table

//////////////////////////////////XML Format /////////////////////////////////
//Creating function for xmlFilmsTableresult
function xmlFilmsTableresult(resultRegion, field1, field2) {
	// Creating address for show films
	var address = "show-films";
	// Creating var data for make param string
	var data = makeParamString(field1, field2, "xml");
	// Creating ajax post for the address data and function request
	// The function request will then showXmlFilmsInfo
	ajaxPost(address, data, 
			function(request) {
		showXmlFilmsInfo(request, resultRegion); 
	}); // Close ajax post and function request
} // Close function xmlFilmsTableresult



//Creating docuemnt.ready function for the films in xml format
//Calling btnXmlFilmsTable and creating jquery
$(document).ready(function() {
	$("#btnXmlFilmsTable").click(function() {
		// Creating url to convert the film to xml format
		var address = "http://localhost:8080/Control?format=xml";
		// Client = 123
		// Crating var data and setting it to empty string
		var data = "";
		// Crating ajax and calling the url, and calling the showXmlFilmsInfo function
		$.ajax({
			url: address,
			success:  function(data) {
				showXmlFilmsInfo(data);
			} // Close function data
		}); // close ajax
	}); // Close .click function for the jquery
}); // Close document.ready function for the jquery


//Creating function for the showXmlFilmsInfo
function showXmlFilmsInfo(request) {
	// Creating if statement for request not equal to null
	if (request!=null) {
		// Creating var for xmlDocument equal to request 
		var xmlDocument = request;
		// Getting the eleement by tag name (film)
		var films = xmlDocument.getElementsByTagName("film");
		// Creating var for rows and new array
		var rows = new Array();
		// Creating for loop for the films length
		for(var i=0; i<films.length; i++) {
			var film = films[i];
			// Creating var for the sub elements
			var subElements = [ "id", "title", "year", "director", "stars", "review" ];
			// Get element values
			rows[i] = getElementValues(film, subElements);
		} // Close for loop
		// Creating var table and getting the films table
		var table = getFilmsTable(rows);
		// Calling the xml films table
		$("#xml-films-table").html(table);
	} // Close if statement for request not equal to null
} // Close function showXmlFilmsInfo

////////////////////////////////////////json format /////////////////////////////////////////////
//function jsonFilmsTableresult(resultRegion, field1, field2) {
//var address = "show-films";
//var data = makeParamString(field1, field2, "json");
//ajaxPost(address, data, 
//function(request) { 
//showJsonFilmsInfo(request, resultRegion); 
//});
//}

//function showJsonFilmsInfo(request, resultRegion) {
//if (data!=null) {
//var rawData = request;
//var films = eval("(" + rawData + ")");
//var rows = new Array();
//for(var i=0; i<films.length; i++) {
//var Film = films[i];
//rows[i] = [Film.id, Film.title,
//Film.year, Film.director, Film.stars, Film.review];
//}
//var table = getFilmsTable(rows);
//htmlInsert(resultRegion, table);
//}
//}

//Creating function for jsonFilmsTableresult
function jsonFilmsTableresult(resultRegion, field1, field2) {
	// Creating address for show films
	var address = "show-films";
	// Creating var data for make param string
	var data = makeParamString(field1, field2, "json");
	// Creating ajax post for the address data and function request
	// The function request will then showJsonFilmsInfo
	ajaxPost(address, data, 
			function(request) {
		showJsonFilmsInfo(request, resultRegion); 
	}); // Close ajax post and function request
} // Close function jsonFilmsTableresult



//Creating docuemnt.ready function for the films in json format
//Calling btnJsonFilmsTable and creating jquery
$(document).ready(function() {
	$("#btnJsonFilmsTable").click(function() {
		// Creating url to convert the film to json format
		var address = "http://localhost:8080/Control?format=json";
		
		// Crating var data and setting it to empty string
		var data = "";
		// Crating ajax and calling the url, and calling the showJsonFilmsInfo function
		$.ajax({
			url: address,
			success:  function(address) {
				showJsonFilmsInfo(address);
			} // Close function data
		}); // close ajax
	}); // Close .click function for the jquery
}); // Close document.ready function for the jquery


//Creating function for the showJsonFilmsInfo
function showJsonFilmsInfo(request) {
	// Creating if statement for request not equal to null
	if (request!=null) {
		console.log(request);
		alert(request);
		var rawData = request;
		console.log(rawData);
//		var films = eval("(" + rawData + ")");
		// parsing the jason data for the films
		var films = JSON.parse("(" + rawData + ")");


		// Creating var for rows and new array
		var rows = new Array();
		// Creating for loop for the films length
		for(var i=0; i<films.length; i++) {
			var film = films[i];
			// Creating var for the sub elements
			var subElements = [ "id", "title", "year", "director", "stars", "review" ];
			// Get element values
			rows[i] = getElementValues(film, subElements);
		} // Close for loop
		// Creating var table and getting the films table
		var table = getFilmsTable(rows);
		// Calling the json films table
		$("#json-films-table").html(table);
	} // Close if statement for request not equal to null
} // Close function showXmlFilmsInfo



///////////////////////////////////////// String format //////////////////////////
//function stringFilmsTableresult(resultRegion, field1, field2) {
//var address = "show-films";
//var data = makeParamString(field1, field2, "string");
//ajaxPost(address, data, 
//function(request) { 
//showStringFilmsInfo(request, resultRegion); 
//});
//}

//(document).ready(function() {			
//$("#stringFilmsTable").click(function() {
//$("#stringFilmsTable").html("Data in string format");

//var address = "show-films";
//var data = makeParamString(field1, field2, "string");
//ajaxPost(address, data, 
//function(request) { 
//showStringFilmsInfo(request, resultRegion);
//});
//});
//});



//function showStringFilmsInfo(request, resultRegion) {
//if ((request.readyState == 4) &&
//(request.status == 200)) {
//var rawData = request.responseText;
//var film = rawData.split(/\n+/);
//var rows = new Array();
//for(var i=0; i<films.length; i++) {
//if (films[i].length > 1) {  // Ignore blank lines
//rows.push(films[i].split("#"));
//}
//}
//var table = getFilmsTable(rows);
//htmlInsert(resultRegion, table);
//}
//}


//Creating function for stringFilmsTableresult
function stringFilmsTableresult(resultRegion, field1, field2) {
	// Creating address for show films
	var address = "show-films";
	// Creating var data for make param string
	var data = makeParamString(field1, field2, "string");
	// Creating ajax post for the address data and function request
	// The function request will then showStringFilmsInfo
	ajaxPost(address, data, 
			function(request) {
		showStringFilmsInfo(request, resultRegion); 
	}); // Close ajax post and function request
} // Close function stringFilmsTableresult



//Creating docuemnt.ready function for the films in string format
//Calling btnStringFilmsTable and creating jquery
$(document).ready(function() {
	$("#btnStringFilmsTable").click(function() {
		// Creating url to convert the film to string/plain text format
		var address = "http://localhost:8080/Control?format=string";
		// Crating var data and setting it to empty string
		var data = "";
		// Crating ajax and calling the url, and calling the showStringFilmsInfo function
		$.ajax({
			url: address,
			success:  function(data) {
				showStringFilmsInfo(data);
			} // Close function data
		}); // close ajax
	}); // Close .click function for the jquery
}); // Close document.ready function for the jquery


//Creating function for the showStringFilmsInfo
function showStringFilmsInfo(request) {
	if ((request.readyState == 4) &&
			(request.status == 200)) {
		var rawData = request.responseText;
		var film = rawData.split(/\n+/);
		var rows = new Array();
		for(var i=0; i<films.length; i++) {
			if (films[i].length > 1) {  // Ignore blank lines
				rows.push(films[i].split("#"));
			}
		}


		// Creating var table and getting the films table
		var table = getFilmsTable(rows);
		// Calling the string films table
		$("#string-films-table").html(table);
	} // Close if statement for request not equal to null
} // CLose foor loop show string


////////////////////////////////////////////Creating the table with the different colmns //////////////////
[ "id", "title", "year", "director", "stars", "review" ] 

function filmsTable(filmTypeField, formatField, resultRegion) {
	var address = "show-films";
	var filmid = getValue(filmTypeField);
	var filmtitle = getValue(filmTypeField);
	var filmyear = getValue(filmTypeField);
	var filmdirector = getValue(filmTypeField);
	var filmstars = getValue(filmTypeField);
	var filmreview = getValue(filmTypeField);
	var format = getValue(formatField);
	var data = "filmid=" + filmid +
	"filmtitle=" + filmtitle +
	"filmyear=" + filmyear +
	"filmdirector=" + filmdirector +
	"filmstars=" + filmstars +
	"filmreview=" + filmreview +
	"&format=" + format;
	var responseHandler = findHandler(format);
	ajaxPost(address, data, 
			function(request) { 
		responseHandler(request, resultRegion); 
	});
}


//Reminder: unlike in Java, in JavaScript it is OK to 
//use == to compare strings.

function findHandler(format) {
	if (format == "xml") {
		return(showXmlFilmsInfo);
	} else if (format == "json") {
		return(showJsonFilmsInfo);
	} else {
		return(showStringFilmsInfo);
	}
}

Posted 10-Dec-18 7:13am

Dhanyaal

Updated 10-Dec-18 7:22am

Add a Solution

Comments

[no name] 10-Dec-18 13:14pm

How many time I should write use
var films = JSON.parse(rawData);
instead of
var films = JSON.parse("(" + rawData + ")");
?

[no name] 10-Dec-18 15:49pm

Show us __please finally__ what data the alert method in your code shows!

Fragment only:


function showJsonFilmsInfo(request) {
	// Creating if statement for request not equal to null
	if (request!=null) {
		alert(request);
....

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Afzaal Ahmad Zeeshan · Answer 1 · 2018-12-10T07:22:00

You are injecting an invalid starter for the JSON document yourself,

JSON.parse("(" + rawData + ")");

Your JSON documents can only start with {, or [, or they can have the data that they are representing—string, integer, whatever... RTFM.

You can solve this problem by removing the parentheses, like this,

JSON.parse(rawData);

Now hope that the data is in correct JSON notation. For example the following code works,

var json = "{\"name\": \"Afzaal Ahmad Zeeshan\"}"

alert(JSON.parse(json).name);

But the following code does not,

var json = "{\"name\": \"Afzaal Ahmad Zeeshan\"}"

alert(JSON.parse(`(${json})`).name);

This code is similar to what you have in your case, only I replaced the string concatenation to interpolation. Go through the following links to understand how JSON works, also read my article for this, From zero to hero in JSON with C#[^]—ignore the C#, and understand how JSON works.

JSON[^]
Edit fiddle - JSFiddle[^]