您好，我对 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 数组中删除项目。我尝试过使用 splice，但无法让它工作。
我还希望能够编辑 json 中的值，但也不知道如何继续。
任何建议或帮助将不胜感激。我仍在努力理解这一切。谢谢。
最佳答案
切片工作正常
//这些将返回前 2 行，其中 0 是起始索引，2 是结束索引
adoptableAnimals.animals=adoptableAnimals.animals.slice(0,2)
console.log(adoptableAnimals.animals)
如果你想编辑 使用
adoptableAnimals.animals[0].Name =“第一个数组名称将更改索引位置零”
要确切地知道发生了什么，您可以使用
console.log(adoptableAnimals.animals) 然后
chrome 中的 f12 和控制台选项卡中您可以检查值
关于javascript - 显示到页面后如何编辑和删除json，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47751783/