Question

如何使用javascript从下面生成JSON结构？

我提供了到目前为止所产生的结果。结构将是商店，商店包含问题，问题包含答案，答案包含产品。我在尝试构建的json结构下面提供了该结构。当您测试代码时，您可以看到我到目前为止的情况。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

    <form id="br_form" name="br_form">
      <select id="mySelect1">
        <option value="Store 1">Store 1</option>
        <option value="Store 2">Store 2</option>
      </select>
      <select id="mySelect0">
        <option value="Question 1">Question 1</option>
        <option value="Question 2">Question 2 </option>

      </select>
      <select id="mySelect3">
        <option value="Answer 1">Answer 1</option>
        <option value="Answer 2">Answer 2</option>

      </select>

      <select id="mySelect2">
        <option value="Products 1">Products 1</option>
        <option value="Products 2">Products 2</option>
        <option value="Products 3">Products 3 </option>
        <option value="Products 4">Products 4</option>
      </select>
      <button type="submit">Click me</button>
    </form>

    <script>
      $(document).ready(function() {
        $("button").click(function() {
          $("p").hide();
          console.log("Surprise!!");
        });
      });
      
      function myFunction(e) {
        e.preventDefault();
        var obj = {};

        obj[document.getElementById('mySelect1').value] = {};
        obj[document.getElementById('mySelect1').value][document.getElementById('mySelect3').value] = {
          products: jQuery("#mySelect2").val()
        };

        console.log("Object: ", obj);
        return false;
      }

      $("#br_form").on('submit', myFunction);
    </script>

  </body>
</html>

尝试构建的结构，目标是生成json对象，其中数据来自用户输入

[store1(sydney store): [{
  question1(are you ? ): [{
    answer1(male or female ? ): [product1, product2, product3, ]
  }, {
    answer2: [product1, product2,
      product3,
    ]
  }]
}]]

Answer 1

我仍然不确定您想要什么，但我会尽力回答您。

首先，由于每次使用select HTML标记，因此每次只能选择一个值。然后，您的问题不在您的商店内包含。即使您选择其他商店，您也不会选择其他问题。您的答案和产品也是如此。您的HTML字段是独立的。它们彼此不依赖，彼此不包含。由于这些原因，显示JSON嵌套结构并不是他们的目标。当然，如果需要，您仍然可以将字段显示为嵌套的JSON格式，但是没有理由在我这里进行操作。

要按照您的要求生成嵌套的JSON结构，您可以执行以下操作：

var result = {};

function myFunction(e) {
  e.preventDefault();

  var formName = e.currentTarget.id;

  var store = $('#' + formName + ' .stores').val(),
      question = $('#' + formName + ' .questions').val(),
      answer = $('#' + formName + ' .answers').val(),
      product = $('#' + formName + ' .products').val();

  result[formName] = {};
  result[formName][store] = {};
  result[formName][store][question] = {};
  result[formName][store][question][answer] = product;

  console.log(result);
}

$("form").on('submit', myFunction);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="br_form" name="br_form">
  <select class="stores">
    <option value="Store 1">Store 1</option>
    <option value="Store 2">Store 2</option>
  </select>

  <select class="questions">
    <option value="Question 1">Question 1</option>
    <option value="Question 2">Question 2 </option>
  </select>

  <select class="answers">
    <option value="Answer 1">Answer 1</option>
    <option value="Answer 2">Answer 2</option>
  </select>

  <select class="products">
    <option value="Products 1">Products 1</option>
    <option value="Products 2">Products 2</option>
    <option value="Products 3">Products 3 </option>
    <option value="Products 4">Products 4</option>
  </select>
  <button type="submit">Click me</button>
</form>

请注意，所有代码都可以使用多种形式。

现在，要生成没有嵌套JSON结构的结果，您可以执行以下操作：

var result = {};

function myFunction(e) {
  e.preventDefault();

  var formName = e.currentTarget.id;

  result[formName] = {
    store: $('#' + formName + ' .stores').val(),
    question: $('#' + formName + ' .questions').val(),
    answer: $('#' + formName + ' .answers').val(),
    product: $('#' + formName + ' .products').val()
  };

  console.log(result);
}

$("form").on('submit', myFunction);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="br_form" name="br_form">
  <select class="stores">
    <option value="Store 1">Store 1</option>
    <option value="Store 2">Store 2</option>
  </select>

  <select class="questions">
    <option value="Question 1">Question 1</option>
    <option value="Question 2">Question 2 </option>
  </select>

  <select class="answers">
    <option value="Answer 1">Answer 1</option>
    <option value="Answer 2">Answer 2</option>
  </select>

  <select class="products">
    <option value="Products 1">Products 1</option>
    <option value="Products 2">Products 2</option>
    <option value="Products 3">Products 3 </option>
    <option value="Products 4">Products 4</option>
  </select>
  <button type="submit">Click me</button>
</form>

这与您看到的代码几乎相同。

如上所述，我认为您真正的问题是更改HTML以生成具有相关字段的表单。您希望他们根据用户的选择进行调整。为此，您可以执行类似的解决方案：

// Display fields depends of user choices
var form;

$('select.stores').change(function(e) {
  form = e.currentTarget.form.id;
  $('#' + form + ' select.questions, #' + form + ' select.answers, #' + form + ' select.products').hide();
  $('#' + form + ' select.' + e.currentTarget.value).show();
});

$('select.questions').change(function(e) {
  form = e.currentTarget.form.id;
  $('#' + form + ' select.answers, #' + form + ' select.products').hide();
  $('#' + form + ' select.' + e.currentTarget.value).show();
});

$('select.answers').change(function(e) {
  form = e.currentTarget.form.id;
  $('#' + form + ' select.products').hide();
  $('#' + form + ' select.' + e.currentTarget.value).show();
});

// JSON result 
var result = {};

function myFunction(e) {
  e.preventDefault();

  var formName = e.currentTarget.id;

  result[formName] = {
    store: $('#' + formName + ' .stores option:selected').val(),
    question: $('#' + formName + ' .questions option:selected').val(),
    answer: $('#' + formName + ' .answers option:selected').val(),
    product: $('#' + formName + ' .products option:selected').val()
  };

  console.log(result);
}

$("form").on('submit', myFunction);

<style>
  .questions,
  .answers,
  .products {
    display: none;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="br_form" name="br_form">
  <select class="stores">
    <option value="store_1">Store 1</option>
    <option value="store_2">Store 2</option>
  </select>
  <select class="questions store_1">
    <option value="question_1">Question 1</option>
    <option value="question_2">Question 2</option>
    <option value="question_3">Question 3</option>
  </select>
  <select class="answers question_1">
    <option value="answer_1">Answer 1</option>
    <option value="answer_2">Answer 2</option>
  </select>
  <select class="answers question_2">
    <option value="answer_3">Answer 3</option>
    <option value="answer_4">Answer 4</option>
  </select>
  <select class="answers question_3">
    <option value="answer_5">Answer 5</option>
    <option value="answer_6">Answer 6</option>
  </select>
  <select class="products answer_4">
    <option value="product_1">Products 1</option>
    <option value="product_2">Products 2</option>
  </select>
  <button type="submit">Click me</button>
</form>

<form id="br_form_2" name="br_form_2">
  <select class="stores">
    <option value="store_1">Store 1</option>
    <option value="store_2">Store 2</option>
    <option value="store_3">Store 3</option>
  </select>
  <select class="questions store_3">
    <option value="question_1">Question 1</option>
    <option value="question_2">Question 2</option>
  </select>
  <select class="answers question_1">
    <option value="answer_1">Answer 1</option>
    <option value="answer_2">Answer 2</option>
  </select>
  <select class="answers question_2">
    <option value="answer_3">Answer 3</option>
    <option value="answer_4">Answer 4</option>
  </select>
  <select class="products answer_4">
    <option value="product_1">Products 1</option>
  </select>
  <button type="submit">Click me</button>
</form>

当然需要改进代码，但要有您需要做什么的想法。

如何使用JavaScript生成JSON对象或数据？

1 个答案: