Store a specific JSON array in a variable

Question

I have a JSON object, for example:

{ "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 } ] } ] } 

I go through this object and create information cards containing the name of each workout ("Full Body", "Legs of God", etc.).

When I click on one of the cards, I would like to be able to save the exercises associated with each heading into a variable for future use. For example, if I click God's feet, I want to save the variable: "[{'name':'Running in Place (High Knees)', 'duration':3, 'break':3},{'name':'Squats', 'duration':3, 'break':3},{'name': 'Clams', 'duration':3, 'break':3}]"

Here is the code that I use to iterate over the JSON data that is stored in the real-time Firebase database and create info maps.

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> 

Thanks for any help and ideas!

Answer 1

You can use find

Corresponding code

 workouts.find(workout => workout.title === [insert title you are looking for]) 

Example

 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> 

Edit - Search by HTML attribute

You can add an HTML element with a custom attribute , such as data-workout . Now you can use find by searching on this attribute.

 // 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> 

Edit - for loop

I add data-workout="${routine}" to the div

 <li> <div class="card" id="${id}" data-workout="${routine}">` [...] </li> 

and add eventlistener to each card

 $(".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>