![](/img/trans.png)
[英]how to select specific json data and store it into an array in Vue Js?
[英]Store specific JSON array in variable
我有一个像这样的JSON对象:
{
"workouts":
[
{
"title": "Full Body",
"exercises":
[
{
"name": "Push Ups",
"duration": 3,
"break": 3
},
{
"name": "Squats",
"duration": 3,
"break": 3
},
{
"name": "Running in Place",
"duration": 3,
"break": 3
}
]
},
{
"title": "God Legs",
"exercises":
[
{
"name": "Running in Place (High Knees)",
"duration": 3,
"break": 3
},
{
"name": "Squats",
"duration": 3,
"break": 3
},
{
"name": "Clams",
"duration": 3,
"break": 3
}
]
},
{
"title": "Morning Stretch",
"exercises":
[
{
"name": "Downward Dog",
"duration": 3,
"break": 3
},
{
"name": "Face Plant",
"duration": 3,
"break": 3
},
{
"name": "Warrior",
"duration": 3,
"break": 3
}
]
}
]
}
我正在循环这个对象,并创建包含每个锻炼的标题的信息卡(“全身”,“上帝腿”等)。
点击其中一张牌后,我希望能够将与每个标题相关的练习存储到变量中以供进一步使用。 例如,如果我点击“God Legs”,我希望变量存储: "[{'name':'Running in Place (High Knees)', 'duration':3, 'break':3},{'name':'Squats', 'duration':3, 'break':3},{'name': 'Clams', 'duration':3, 'break':3}]"
这是我用来循环遍历JSON数据的代码,该数据存储在Firebase实时数据库中,并创建信息卡。
JavaScript的:
// Initialize Firebase.
firebase.initializeApp(config);
// Reference data.
var dbRef = firebase.database().ref().child("workouts");
// Sync with Firebase in real time.
dbRef.on("value", snap =>
{
var workouts = snap.val();
for (var i = 0; i < workouts.length; i++)
{
//display.innerHTML = exercises[0].name;
var routine = workouts[i].title;
var id = "card" + i;
var $card = ("<li><div class='card' id=" + id + "><a class='startIt' href='timer.html'>\n\
<div class='cardInfo'><h3>" + routine + "</h3><p>10 min.</p>\n\
</div></a><a class='cardOptions' href='overview.html'>\n\
</a></div></li>");
$("#cardList").append($card);
}
});
HTML:
<ul id="cardList" class="cards"></ul>
感谢您的帮助和想法!
你可以使用find
workouts.find(workout => workout.title === [insert title you are looking for])
const json = { "workouts": [{ "title": "Full Body", "exercises": [{ "name": "Push Ups", "duration": 3, "break": 3 }, { "name": "Squats", "duration": 3, "break": 3 }, { "name": "Running in Place", "duration": 3, "break": 3 } ] }, { "title": "God Legs", "exercises": [{ "name": "Running in Place (High Knees)", "duration": 3, "break": 3 }, { "name": "Squats", "duration": 3, "break": 3 }, { "name": "Clams", "duration": 3, "break": 3 } ] }, { "title": "Morning Stretch", "exercises": [{ "name": "Downward Dog", "duration": 3, "break": 3 }, { "name": "Face Plant", "duration": 3, "break": 3 }, { "name": "Warrior", "duration": 3, "break": 3 } ] } ] } function createButton(value) { const button = document.createElement('button') button.textContent = value return button } function append(parentQuery, childNode) { document.querySelector(parentQuery).append(childNode) } // log the right object on click function handleButtonClick(event) { if (event.target != event.currentTarget) { console.log(json.workouts.find(workout => workout.title === event.target.textContent)) } } // display the buttons json.workouts.forEach(workout => append('#workout_section', createButton(workout.title))) // eventlistener document.querySelector('#workout_section').addEventListener('click', handleButtonClick)
<section id="workout_section"></section>
您可以添加HTML元素自定义属性,如data-workout
。 现在,您可以通过搜索此属性来使用find
。
// add attribute
button.setAttribute('data-workout', value)
// find attribute
json.workouts.find(workout => workout.title === event.target.dataset.workout)
const json = { "workouts": [{ "title": "Full Body", "exercises": [{ "name": "Push Ups", "duration": 3, "break": 3 }, { "name": "Squats", "duration": 3, "break": 3 }, { "name": "Running in Place", "duration": 3, "break": 3 } ] }, { "title": "God Legs", "exercises": [{ "name": "Running in Place (High Knees)", "duration": 3, "break": 3 }, { "name": "Squats", "duration": 3, "break": 3 }, { "name": "Clams", "duration": 3, "break": 3 } ] }, { "title": "Morning Stretch", "exercises": [{ "name": "Downward Dog", "duration": 3, "break": 3 }, { "name": "Face Plant", "duration": 3, "break": 3 }, { "name": "Warrior", "duration": 3, "break": 3 } ] } ] } function createButton(value) { const button = document.createElement('button') button.textContent = value button.setAttribute('data-workout', value) return button } function append(parentQuery, childNode) { document.querySelector(parentQuery).append(childNode) } // log the right object on click function handleButtonClick(event) { if (event.target != event.currentTarget) { console.log(json.workouts.find(workout => workout.title === event.target.dataset.workout)) } } // display the buttons json.workouts.forEach(workout => append('#workout_section', createButton(workout.title))) // eventlistener document.querySelector('#workout_section').addEventListener('click', handleButtonClick)
<section id="workout_section"></section>
我在div
添加了data-workout="${routine}"
<li>
<div class="card" id="${id}" data-workout="${routine}">`
[...]
</li>
并在每张卡上添加eventlistener
$(".card").on('click', handleButtonClick)
const routines = { "workouts": [{ "title": "Full Body", "exercises": [{ "name": "Push Ups", "duration": 3, "break": 3 }, { "name": "Squats", "duration": 3, "break": 3 }, { "name": "Running in Place", "duration": 3, "break": 3 } ] }, { "title": "God Legs", "exercises": [{ "name": "Running in Place (High Knees)", "duration": 3, "break": 3 }, { "name": "Squats", "duration": 3, "break": 3 }, { "name": "Clams", "duration": 3, "break": 3 } ] }, { "title": "Morning Stretch", "exercises": [{ "name": "Downward Dog", "duration": 3, "break": 3 }, { "name": "Face Plant", "duration": 3, "break": 3 }, { "name": "Warrior", "duration": 3, "break": 3 } ] } ] } // log the right object on click function handleButtonClick(event) { if (event.target != event.currentTarget) { console.log(routines.workouts.find(workout => workout.title === event.currentTarget.dataset.workout)) console.log(routines.workouts) } } function appendElement(htmlString, parentQuery) { $(parentQuery).append(htmlString) } function createCardsHtmlString(id, routine) { return ` <li> <div class="card" id="${id}" data-workout="${routine}"> <a class="startIt" href="#"> <div class="cardInfo"> <h3>${routine}</h3> <p>10 min.</p> </div> </a> <a class="cardOptions" href="#"></a> </div> </li> ` } for (var i = 0; i < routines.workouts.length; i++) { var routine = routines.workouts[i].title; var exercises = routines.workouts[i].exercises var id = "card" + i; $("#cardList").append(createCardsHtmlString(id, routine)); } $(".card").on('click', handleButtonClick)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="cardList"></ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.