您好，我是javascript和json的新手，我正在尝试编辑和删除显示在页面上的JSON对象。
这是我的html
enter code here
<body>
<!-- Jumbotron -->
<div class="jumbotron jumbotron-fluid" id="main-heading">
<div class="container">
<!-- <h1 class="display-3">Fluid jumbotron</h1> -->
<header><img src="pawneelogo.png" id="pawnee-logo" class="img-
fluid" alt="pawnee-logo"></header>
<p class="lead">Add a new family member today!</p>
</div>
</div>
<!--Animals-->
<h1 class="display-3" id="animals">Adoptable Animals</h1>
<hr>
<div id="buttons-top">
<button type="button" class="btn btn-primary">Filter</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#add-animal">Add</button>
</div>
<br>
<!--Add New Modal--->
<div class="modal fade" id="add-animal" tabindex="-1" role="dialog"
aria-labelledby="add form" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addAnimalLabel">Add an
Animal</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
</button>
</div>
<div class="modal-body">
<form id="add-animal" method='#'>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputName">Name:</label>
<input type="text" class="form-control"
id="name">
</div>
<div class="form-group col-md-6">
<label for="inputSpecies">Species:</label>
<input type="text" class="form-control"
id="species">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputAge">Age:</label>
<input type="text" class="form-control"
id="age">
</div>
<div class="form-group col-md-6">
<label for="inputGender">Gender:</label>
<input type="text" class="form-control"
id="gender">
</div>
</div>
<div class="form-group">
<label for="inputSize">Size:</label>
<select class="form-control" id="selectSize">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
</div>
<div class="form-group">
<label for="inputChildFriendly">Child Friendly:
</label>
<select class="form-control"
id="selectChildFriendly">
<option>true</option>
<option>false</option>
</select>
</div>
<div class="form-group">
<label for="inputAdoptable">Adoptable:</label>
<select class="form-control"
id="selectAdoptable">
<option>true</option>
<option>false</option>
</select>
</div>
<div class="form-group">
<label for="physical-description">Physical
Description:</label>
<textarea class="form-control" id="physical-
description" rows="4"></textarea>
</div>
<div class="form-group">
<label for="history">History:</label>
<textarea class="form-control" id="history"
rows="2"></textarea>
</div>
<label for="inputDateOfIntake">Date of Intake:</label>
<input type="date" class="form-control"
id="dateOfIntake">
<label for="inputDateOfAdotion">Date of Adoption:
</label>
<input type="date" class="form-control"
id="dateOfAdoption"><br>
<button type="button" id="submit" class="btn btn-
primary">Add</button>
</form>
</div>
</div>
</div>
</div>
<!---end add modal-->
<!---Edit Modal -->
<!---Cards --->
<div class="container" id="animal-listings">
<div class="row">
</div>
</div>
<!---End Cards--->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/js/bootstrap.min.js" integrity="sha384-
alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
<script src="pawneescript.js" type="text/javascript"></script>
</body>
</html>
这是我的javascript
$('document').ready(function(){
var adoptableAnimals = {
"animals" : [
{
"Name": "Bubbles",
"Species": "Dog",
"Age": "Adult",
"Gender": "Female",
"Size": "Small",
"Child Friendly": true,
"Adoptable": true,
"Physical Description": "Chihuahua & Dachsund Mix. 25 pound Chiweenie! She
gets along well with other dogs.",
"History": "Found at West 25th and Lorain.",
"Date of Intake": "10/20/2016 15:00",
"Date of Adoption": "",
"Identification": 1
},
{
"Name": "Lionel",
"Species": "Dog",
"Age": "Young",
"Gender": "Male",
"Size": "Large",
"Child Friendly": true,
"Adoptable": true,
"Physical Description": "Rebone Coonhound & Rhodesian Ridgeback Mix. Lionel
is a 7.5 month old (as of 9/20), 56 pound Redbone Coonhound mix. He is truly
a lover. Lionel wants to be with everyone at all times and loves affection.
He fits in well with any gang! He loves dogs of all ages, both small and
large.He knows the commands: sit, come, and down. He?s a smart little, or
should we say big, guy! \n\nHe loves the outdoors and his walks. He
possesses the right amount of playfulness and energy! He enjoys playing with
his toys, other dogs, and his humans. Being pet is one of his favorite
things. Lionel is VERY affectionate. He will sit with you on the couch or
lounge around with you on your day off. \n\nLionel walks well on a leash and
does not bark often. This gentleman is also house trained! He?s a well-
rounded, large puppy that is looking for his forever cuddler! ",
"History": "Owner surrendor, moving to apartment that does not allow dogs.",
"Date of Intake": "9/16/2016 11:30",
"Date of Adoption": "",
"Identification": 2
},
{
"Name": "Ruby",
"Species": "Dog",
"Age": "Young",
"Gender": "Female",
"Size": "Large",
"Child Friendly": false,
"Adoptable": true,
"Physical Description": "Ruby appears to be a striking mix of Doberman
Pinscher and German Shepherd....",
"History": "Owner surrendor, moving to apartment that does not allow dogs.",
"Date of Intake": "11/16/2016 9:15",
"Date of Adoption": "",
"Identification": 3
},
{
"Name": "Neil",
"Species": "Cat",
"Age": "Young",
"Gender": "Male",
"Size": "Medium",
"Child Friendly": true,
"Adoptable": true,
"Physical Description": "Neil is a loving kitten looking a lot of rest,
antibiotics, and affection!... \n",
"History": "Found in Brooklyn, Ohio",
"Date of Intake": "11/2/2016 9:30",
"Date of Adoption": "",
"Identification": 4
},
{
"Name": "Jenna",
"Species": "Cat",
"Age": "Adult",
"Gender": "Female",
"Size": "Medium",
"Child Friendly": true,
"Adoptable": true,
"Physical Description": "Hi, I'm Jenna. ....",
"History": "Found in Cleveland, Ohio",
"Date of Intake": "11/10/2016 14:00",
"Date of Adoption": "",
"Identification": 5
},
{
"Name": "Ginga Ninja",
"Species": "Cat",
"Age": "Young",
"Gender": "Male",
"Size": "Medium",
"Child Friendly": true,
"Adoptable": true,
"Physical Description": "Born about November, 2015, Ginga Ninja....",
"History": "Found near JACK casino.",
"Date of Intake": "10/18/2016 16:05",
"Date of Adoption": "",
"Identification":6
},
{
"Name": "Leo",
"Species": "Cat",
"Age": "Adult",
"Gender": "Male",
"Size": "Medium",
"Child Friendly": true,
"Adoptable": true,
"Physical Description": "Leo is not ....",
"History": "Transfer from City Shelter",
"Date of Intake": "11/19/2016 12:23",
"Date of Adoption": "",
"Identification": 7
},
{
"Name": "Volcano",
"Species": "Other",
"Age": "Young",
"Gender": "Male",
"Size": "Medium",
"Child Friendly": true,
"Adoptable": true,
"Physical Description": "Volcano is a young ....",
"History": "Owner surrendor.",
"Date of Intake": "11/18/2016 1:18pm",
"Date of Adoption": "",
"Identification":8
},
{
"Name": "Li'l Britches",
"Species": "Other",
"Age": "Adult",
"Gender": "Female",
"Size": "Medium",
"Child Friendly": true,
"Adoptable": true,
"Physical Description": "Please meet Li'l Britches!....",
"History": "Owner surrendor.",
"Date of Intake": "11/15/2016 15:40",
"Date of Adoption": "",
"Identification": 9
}
]
}
/*Loop Through Animals*/
for (var i = 0; i < adoptableAnimals.animals.length; i++){
console.log(adoptableAnimals);
$('.row').append("<div class='card' style='width: 30rem; margin-
right:1em; margin-bottom: 1em;'><div class='card-body'><h4>"+
adoptableAnimals.animals[i].Name + "</h4><h5>" +
adoptableAnimals.animals[i].Species + "</h5><h6>" +
adoptableAnimals.animals[i].Age + "</h6><h6>" +
adoptableAnimals.animals[i].Gender + "</h6><h6>" +
adoptableAnimals.animals[i].Size + "</h6><p>Child Friendly: " +
adoptableAnimals.animals[i]["Child Friendly"] + "</p><p>Adoptable: " +
adoptableAnimals.animals[i].Adoptable + "</p><p>" +
adoptableAnimals.animals[i]["Physical Description"] + "</p><p>History: " +
adoptableAnimals.animals[i].History + "</p><p>Date of Intake: " +
adoptableAnimals.animals[i]["Date of Intake"]+ "</p><p>Date of Adoption: "+
adoptableAnimals.animals[i]["Date of Adoption"]+ "</p><button type'button'
class='btn edit-btn btn-primary'>Edit</button><button type'button'
class='btn remove-btn btn-primary'>Remove</button></div></div>" );
/*Add new animal to JSON*/
$("#submit").click(function(){
var name = $("#name").val();
var species = $("#species").val();
var age = $("#age").val();
var gender = $("#gender").val();
var size = $("#selectSize").val();
var childFriendly = $("#selectChildFriendly").val();
var adoptable = $("#selectAdoptable").val();
var physicalDescription = $("#physical-description").val();
var history = $("#history").val();
var dateOfIntake = $("#dateOfIntake").val();
var dateOfAdoption = $("#dateOfAdoption").val();
var newAnimal = {
Name: name,
Species: species,
Age: age,
Gender: gender,
Size: size,
"Child Friendly": childFriendly,
Adoptable: adoptable,
"Physical Description": physicalDescription,
History: history,
"Date of Intake": dateOfIntake,
"Date of Adoption": dateOfAdoption,
Identification: adoptableAnimals.animals.length + 1
}
console.log(newAnimal);
adoptableAnimals.animals.push(newAnimal);
console.log(adoptableAnimals);
if (adoptableAnimals.animals.length > 15){
alert("Sorry. Our shelter is currently full. We can no longer accept
incoming animals");
}
else{ $('.row').append("<div class='card' style='width: 30rem; margin-
right:1em; margin-bottom: 1em;'><div class='card-body'><h4>"+
newAnimal.Name + "</h4><h5>" + newAnimal.Species + "</h5><h6>" +
newAnimal.Age + "</h6><h6>" + newAnimal.Gender + "</h6><h6>" +
newAnimal.Size + "</h6><p>Child Friendly: " + newAnimal["Child Friendly"] +
"</p><p>Adoptable: " + newAnimal.Adoptable + "</p><p>" +
newAnimal["Physical Description"] + "</p><p>History: " + newAnimal.History
+ "</p><p>Date of Intake: " + newAnimal["Date of Intake"]+ "</p><p>Date of
Adoption: "+ newAnimal["Date of Adoption"]+ "</p><button type'button'
class='btn edit-btn btn-primary'>Edit</button><button type'button'
class='btn remove-btn btn-primary'>Remove</button></div></div>");
};
$("#add-animal").modal("hide");
$('#add-animal').on('hidden.bs.modal', function () {
$(this).find("input,textarea,select").val('').end()
});
});
});
我不确定如何继续从json数组中删除项目。我曾尝试使用接头，但无法正常工作。
我也希望能够在json中编辑值，并且不确定如何继续进行操作。
任何建议或帮助将不胜感激。我仍然试图理解所有这些。谢谢。
最佳答案
切片工作正常
//这些将返回前2行，其中0是startindex，2是endIndexadoptableAnimals.animals = adoptableAnimals.animals.slice(0,2)console.log(adoptableAnimals.animals)
如果要编辑
用adoptableAnimals.animals[0].Name = "first array name will change a index position zero"
确切地知道可以使用什么console.log(adoptableAnimals.animals)然后f12 in chrome，在控制台选项卡中，您可以检查值