I have been reading some of the other questions here but I can't find one that fully explains how I should fix it. I am new to JSON and don't fully understand it all. I am creating a dynamic table where people can input injuries to different body parts. I want to be able to manipulate this data using JSON. I am using an alert to check I can get each individual bodypart/injury. When I click on the usejson button I get the following error:
Uncaught TypeError: Cannot use 'in' operator to search for 'length' in - [then json code]
From my understanding it seems that it doesn't recognise the JSON as an object but as a string. Being new I don't fully understand that. Is anybody able to fix my code so that it alerts each bodypart?
Thanks in advance for your help
<!DOCTYPE html>
<head>
<!--all 4 below need for bootstrap 4 - including poppers-->
<link rel="stylesheet"
href=".0.0-beta.2/css/bootstrap.min.css">
<script src=".2.1/jquery.min.js"></script>
<script src=".js/1.12.6/umd/popper.min.js"></script>
<script src=".0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<html>
<body>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<table id="injuriestable">
<tbody>
<tr id="heading">
<th id="bodypart">Body Part</th>
<th id="injuries">Injuries</th>
<th id="edit">Edit</th>
</tr>
</tbody>
</table>
Test input: <input id="injuryinput" type="text"><br>
<button data-bodypart="head" class="addinj">Head</button>  <button data-bodypart="shoulder" class="addinj">shoulder</button>  <button data-bodypart="knee" class="addinj">knee</button>  <button data-bodypart="foot" class="addinj">foot</button><br/>
<button id="arraytest" >Get Json Array</button>
<button id="usejson" >Use Json</button>
<div id="jsonarray"></div>
<script>
//adding a new row
$(document).ready(function() {
//adding a new row
$(".addinj").click(function() {
var bodpart = $(this).data("bodypart");
var datas = $("#injuryinput").val();
//checks if row exists and if does updates/if not creates one
if ($("#part" + bodpart).length > 0) {
$("#injuries" + bodpart).html(datas);
} else {
$('#injuriestable').append('<tr id="part' + bodpart + '"><td>' + bodpart + '</td><td id="injuries' + bodpart + '">' + datas + '</td><td><button data-bodparts="' + bodpart + '" class="injurybutton">' + bodpart + '</td></tr>')
}
});
//get json
$('body').on('click', '#arraytest', function() {
var table = document.getElementById("injuriestable");
var tableArr = [];
for (var i = 1; i < table.rows.length; i++) {
tableArr.push({
bodypart: table.rows[i].cells[0].innerHTML,
injuries: table.rows[i].cells[1].innerHTML,
});
}
var jsonstring = (JSON.stringify(tableArr));
$("#jsonarray").html(jsonstring);
});
$('body').on('click', '#usejson', function() {
var data = $("#jsonarray").html();
$.each(data, function(i, item) {
alert(data[i].bodypart);
});
});
});
</script>
</body>
</html>
I have been reading some of the other questions here but I can't find one that fully explains how I should fix it. I am new to JSON and don't fully understand it all. I am creating a dynamic table where people can input injuries to different body parts. I want to be able to manipulate this data using JSON. I am using an alert to check I can get each individual bodypart/injury. When I click on the usejson button I get the following error:
Uncaught TypeError: Cannot use 'in' operator to search for 'length' in - [then json code]
From my understanding it seems that it doesn't recognise the JSON as an object but as a string. Being new I don't fully understand that. Is anybody able to fix my code so that it alerts each bodypart?
Thanks in advance for your help
<!DOCTYPE html>
<head>
<!--all 4 below need for bootstrap 4 - including poppers-->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<html>
<body>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<table id="injuriestable">
<tbody>
<tr id="heading">
<th id="bodypart">Body Part</th>
<th id="injuries">Injuries</th>
<th id="edit">Edit</th>
</tr>
</tbody>
</table>
Test input: <input id="injuryinput" type="text"><br>
<button data-bodypart="head" class="addinj">Head</button>  <button data-bodypart="shoulder" class="addinj">shoulder</button>  <button data-bodypart="knee" class="addinj">knee</button>  <button data-bodypart="foot" class="addinj">foot</button><br/>
<button id="arraytest" >Get Json Array</button>
<button id="usejson" >Use Json</button>
<div id="jsonarray"></div>
<script>
//adding a new row
$(document).ready(function() {
//adding a new row
$(".addinj").click(function() {
var bodpart = $(this).data("bodypart");
var datas = $("#injuryinput").val();
//checks if row exists and if does updates/if not creates one
if ($("#part" + bodpart).length > 0) {
$("#injuries" + bodpart).html(datas);
} else {
$('#injuriestable').append('<tr id="part' + bodpart + '"><td>' + bodpart + '</td><td id="injuries' + bodpart + '">' + datas + '</td><td><button data-bodparts="' + bodpart + '" class="injurybutton">' + bodpart + '</td></tr>')
}
});
//get json
$('body').on('click', '#arraytest', function() {
var table = document.getElementById("injuriestable");
var tableArr = [];
for (var i = 1; i < table.rows.length; i++) {
tableArr.push({
bodypart: table.rows[i].cells[0].innerHTML,
injuries: table.rows[i].cells[1].innerHTML,
});
}
var jsonstring = (JSON.stringify(tableArr));
$("#jsonarray").html(jsonstring);
});
$('body').on('click', '#usejson', function() {
var data = $("#jsonarray").html();
$.each(data, function(i, item) {
alert(data[i].bodypart);
});
});
});
</script>
</body>
</html>
-
JSON is a format. It's a way to write an Array or Object in textual form. You can use it to transmit plex data over a "text-only" munications channel. The textual form is based on the way you write an Array literal or Object literal in JavaScript, hence the name:
JavaScript Object Notation. You do not need it at all for what you're trying to acplish. – user5734311 Commented Jan 8, 2018 at 23:34 -
1
Also: never store data in HTML elements for later use. Keep everything in
vars, and use HTML to display it: jsfiddle/khrismuc/h3udwjos (the code actually usesJSON.stringifyto pare Objects) – user5734311 Commented Jan 9, 2018 at 0:01 - Aah that works thanks for your help. At the moment the jsfiddle creates a new row if the injuries is different. How do I change this code so that it only creates a new row if the bodypart is different? Also how do I add data attributes to the buttons I am creating? – bevan7 Commented Jan 9, 2018 at 9:04
-
1
1.
.some(injury => injury.bodypart == injToAdd.bodypart)2. Look up the jQuery method.data()and use it. – user5734311 Commented Jan 9, 2018 at 10:18
1 Answer
Reset to default 1I think use can use:
$('body').on('click', '#usejson', function() {
//var data = $("#jsonarray").html();
var data = JSON.parse($("#jsonarray").html());
$.each(data, function(i, item) {
alert(data[i].bodypart);
});
});
But i don't understand that why you send json to html and then get it from html.