javascript - 将特定的 JSON 数组存储在变量中

Question

我有一个像这样的 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
        }
      ]
    }
  ]
}

我正在遍历此对象并创建包含每次锻炼标题(“全身”、“神腿”等)的信息卡。

单击其中一张卡片后，我希望能够将与每个标题相关的练习存储到一个变量中以供进一步使用。例如，如果我点击“神腿”，我希望变量存储:[{'name':'原地运行(高膝)', 'duration':3, 'break':3 },{'name':'Squats', 'duration':3, 'break':3},{'name': 'clams', 'duration':3, 'break':3}]"

这是我用来遍历存储在 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);
  }
});

HTML:

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

感谢您的帮助和想法!

Answer 1

您可以使用 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 属性搜索

您可以添加 HTML 元素 custom attribute像 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>

编辑 - for 循环

我将 data-workout="${routine}" 添加到 div

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

并在每张卡片上添加事件监听器

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