Javascript 在变量中存储特定的JSON数组

我有一个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 Kneets）”，'duration'：3，'break'：3}，{'name'：'Shucks'，'duration'：3，'break'：3}，{'name'：'Clams'，'duration 3，'break'”

下面是我用来循环浏览存储在Firebase实时数据库中的JSON数据并创建信息卡的代码

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);
  }
});

//初始化Firebase。
firebase.initializeApp（配置）；
//参考数据。
var dbRef=firebase.database（）.ref（）.child（“训练”）；
//与Firebase实时同步。
dbRef.on（“值”，捕捉=>
{
var-workouts=snap.val（）；
对于（var i=0；i”）；
$（“#卡片列表”）。附加（$卡片）；
}
});

HTML:

谢谢你的帮助和想法

您可以使用

相关代码 例子

const json={
“训练”：[{
“标题”：“全身”，
“练习”：[{
“姓名”：“俯卧撑”，
“期限”：3，
“中断”：3
},
{
“名称”：“蹲下”，
“期限”：3，
“中断”：3
},
{
“名称”：“就地运行”，
“期限”：3，
“中断”：3
}
]
},
{
“标题”：“神腿”，
“练习”：[{
“名称”：“原地跑步（高膝）”，
“期限”：3，
“中断”：3
},
{
“名称”：“蹲下”，
“期限”：3，
“中断”：3
},
{
“名称”：“蛤蜊”，
“期限”：3，
“中断”：3
}
]
},
{
“标题”：“晨跑”，
“练习”：[{
“名称”：“向下的狗”，
“期限”：3，
“中断”：3
},
{
“名称”：“面部植物”，
“期限”：3，
“中断”：3
},
{
“姓名”：“战士”，
“期限”：3，
“中断”：3
}
]
}
]
}
函数createButton（值）{
const button=document.createElement（'按钮'）
button.textContent=值
返回按钮
}
函数追加（parentQuery，childNode）{
document.querySelector（parentQuery）.append（childNode）
}
//在单击时记录右对象
功能手柄按钮点击（事件）{
if（event.target！=event.currentTarget）{
log（json.workouts.find（workout=>workout.title==event.target.textContent））
}
}
//显示按钮
json.workouts.forEach（workout=>append（“#workout_部分”，createButton（workout.title）））
//事件监听器
document.querySelector（“#训练_部分”）.addEventListener（'click'，handleButtonClick）

---

可能使用下划线.js

where（）

方法-这真是太棒了。非常感谢你！将整合。我想知道是否有可能将您的答案扩展到其他活动目标。比如，如果我点击“.cardOptions”部分，我仍然希望能够做同样的事情，即使卡片的那部分不包含文本。这可能吗？@Brian-我加上一个例子。如果必须的话，请随时提问：）这是可行的，但我在将其集成到现有循环中时遇到了问题：除非我使用传入“value”作为参数的函数来创建我的卡（在您的例子中是按钮），否则“value”不会被定义，因此会中断现有循环。有没有办法在不使用该函数的情况下定义该属性并将其附加到卡上？原因是我依赖现有的for循环索引向卡上添加唯一ID，并将其他函数和属性附加到卡上，因此重写我的整个代码到目前为止可能会出现问题。

<ul id="cardList" class="cards"></ul>

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