用相同的键遍历json对象

Question

我有两个json对象正在远程获取，其中一个是这种格式的。

{
    "form": {
        "mounted_language": "en",
        "enctype": "multipart/form-data",
        "hydration_url": "",
        "post_destination": "postFormData()",
        "fields": {
            "title": {
                "type": "text",
                "label": "Title",
                "data-model": "title",
                "value": "",
                "required": true,
                "name": "title",
                "mobile_classes": "col-6",
                "desktop_classes": "col-6"
            },
            "type": {
                "type": "text",
                "label": "Type",
                "data-model": "type",
                "value": "",
                "required": true,
                "name": "type",
                "mobile_classes": "",
                "desktop_classes": ""
            },
            "condition": {
                "type": "text",
                "label": "Condition",
                "data-model": "condition",
                "value": "",
                "required": true,
                "name": "condition",
                "mobile_classes": "col-6",
                "desktop_classes": "col-6"
            },
            "materials": {
                "type": "select",
                "label": "Materials",
                "required": true,
                "data-model": "Materials",
                "mobile_classes": "col-6",
                "desktop_classes": "col-6",
                "name": "materials",
                "selected": "selected",
                "option_has_url": false,
                "options_data_source": "https://example.com/api/url"
            },
            "color": {
                "type": "text",
                "label": "Color",
                "data-model": "color",
                "value": "",
                "required": true,
                "name": "color",
                "mobile_classes": "col-6",
                "desktop_classes": "col-6"
            },
            "weight": {
                "type": "number",
                "label": "Weight",
                "data-model": "weight",
                "value": "",
                "required": true,
                "name": "weight",
                "mobile_classes": "col-6",
                "desktop_classes": "col-6"
            },
            "length": {
                "type": "number",
                "label": "Length",
                "data-model": "lengths",
                "value": "",
                "required": true,
                "name": "lengths",
                "mobile_classes": "col-6",
                "desktop_classes": "col-6"
            },
            "width": {
                "type": "number",
                "label": "Width",
                "data-model": "width",
                "value": "",
                "required": true,
                "name": "width",
                "mobile_classes": "col-6",
                "desktop_classes": "col-6"
            },
            "height": {
                "type": "number",
                "label": "Height",
                "data-model": "height",
                "value": "",
                "required": true,
                "name": "height",
                "mobile_classes": "col-6",
                "desktop_classes": "col-6"
            },
            "pictures": {
                "type": "file",
                "label": "Pictures",
                "x-change": "selectFile($event)",
                "required": true,
                "multiple": true,
                "accept": "image/png, image/jpg, image/jpeg",
                "name": "pictures",
                "value": "",
                "mobile_classes": "col-6",
                "desktop_classes": "col-6"
            },
            "description": {
                "type": "textarea",
                "label": "Description",
                "data-model": "description",
                "value": "",
                "required": true,
                "name": "description",
                "mobile_classes": "col-6",
                "desktop_classes": "col-6"
            }
        }
    }
}

而另一个

{
    "data": [{
        "en": "One"
    }, {
        "en": "Two"
    }, {
        "en": "Three"
    }, {
        "en": "Four"
    }]
}

我正在获取第一个json对象并从中创建一个表单。

$.get("http://localhost:8000/api_routes/agriculture_and_food_structure", function(data) {
    data = JSON.parse(data);

    let original_json_object = data;

    console.log('Original Json Object', original_json_object);

    for (let prop in data) {

        console.log("Key:" + prop);
        for (let prop2 in data.form.fields) {
            console.log("Key2:" + prop2);
            let typ = data.form.fields[prop2].type;
            let label = data.form.fields[prop2].label;

            let text_input = '';


            if (typ == 'text') {
                text_input = '<div class="col-6"><div class="mb-3 col-12"><label for="exampleFormControlInput1" class="form-label">' + label + '</label> <input type="text" data-model="" class="form-control" id="exampleFormControlInput1" placeholder=""></div></div>';
            }
            if (typ == 'number') {
                text_input = '<div class="col-6"><div class="mb-3 col-12"><label for="exampleFormControlInput1" class="form-label">' + label + '</label> <input type="number" data-model="" class="form-control" id="exampleFormControlInput1" placeholder=""></div></div>';
            }
            if (typ == 'select') {
                let options_data_source = data.form.fields[prop2].options_data_source;
                $.get("http://localhost:8000/data_routes/materials_data", function(dt) {
                    for (let pr in dt) {
                        console.log('Options', dt[pr]);
                    }
                });

                text_input = '<div class="col-6"><div class="mb-3 col-12"><label for="exampleFormControlInput1" class="form-label">' + label + '</label> <select class="form-control"></select></div></div>';
            }
            $('#form').append(text_input);
        }
    }

});

console.log('mounted');

我想在这里找到个别的选择

for (let pr in dt) {
console.log('Options', dt[pr]);
}

因此，我将其附加到select框中。如何用相同的键输出第二个json对象中的数据？

Answer 1

您一直在经历一个与异步处理相关联的典型问题。在从第二级AJAX调用返回相关选项之前，您已经将<select>代码放在页面代码中。在下面的片段中，我试图更改您的代码，以便它能够再次工作。我选择将生成的id分配给所有select元素。然后将在辅助AJAX调用中接收到的选项插入到相应的select元素中，这些元素就在前面几分钟被放置到页面上：

​

const dat1={"form": {"mounted_language": "en","enctype": "multipart/form-data","hydration_url": "","post_destination": "postFormData()","fields": {"title": {"type": "text","label": "Title","data-model": "title","value": "","required": true,"name": "title","mobile_classes": "col-6","desktop_classes": "col-6"},"type": {"type": "text","label": "Type","data-model": "type","value": "","required": true,"name": "type","mobile_classes": "","desktop_classes": ""},"condition": {"type": "text","label": "Condition","data-model": "condition","value": "","required": true,"name": "condition","mobile_classes": "col-6","desktop_classes": "col-6"},"materials": {"type": "select","label": "Materials","required": true,"data-model": "Materials","mobile_classes": "col-6","desktop_classes": "col-6","name": "materials","selected": "selected","option_has_url": false,"options_data_source": "https://example.com/api/url"},"color": {"type": "text","label": "Color","data-model": "color","value": "","required": true,"name": "color","mobile_classes": "col-6","desktop_classes": "col-6"},"weight": {"type": "number","label": "Weight","data-model": "weight","value": "","required": true,"name": "weight","mobile_classes": "col-6","desktop_classes": "col-6"},"length": {"type": "number","label": "Length","data-model": "lengths","value": "","required": true,"name": "lengths","mobile_classes": "col-6","desktop_classes": "col-6"},"width": {"type": "number","label": "Width","data-model": "width","value": "","required": true,"name": "width","mobile_classes": "col-6","desktop_classes": "col-6"},"height": {"type": "number","label": "Height","data-model": "height","value": "","required": true,"name": "height","mobile_classes": "col-6","desktop_classes": "col-6"},"pictures": {"type": "file","label": "Pictures","x-change": "selectFile($event)","required": true,"multiple": true,"accept": "image/png, image/jpg, image/jpeg","name": "pictures","value": "","mobile_classes": "col-6","desktop_classes": "col-6"},"description": {"type": "textarea","label": "Description","data-model": "description","value": "","required": true,"name": "description","mobile_classes": "col-6","desktop_classes": "col-6"}}}}, dat2={"data": [{"en": "One"}, {"en": "Two"}, {"en": "Three"}, {"en": "Four"}]},url="https://jsonplaceholder.typicode.com/users/";

$.getJSON(url+1, function(data) {
  let selId=0;
  data = dat1; // this is a "fake" AJAX get(), data comes from dat1  
  let original_json_object = data;
  // console.log('Original Json Object', original_json_object);

  for (let prop in data) {
    // console.log("Key:" + prop);
    for (let prop2 in data.form.fields) {
      // console.log("Key2:" + prop2);
      let typ = data.form.fields[prop2].type;
      let label = data.form.fields[prop2].label;
      let text_input = '';

      if (typ == 'text') {
        text_input = '<div class="col-6"><div class="mb-3 col-12"><label for="exampleFormControlInput1" class="form-label">' + label + '</label> <input type="text" data-model="" class="form-control" id="exampleFormControlInput1" placeholder=""></div></div>';
      }
      if (typ == 'number') {
        text_input = '<div class="col-6"><div class="mb-3 col-12"><label for="exampleFormControlInput1" class="form-label">' + label + '</label> <input type="number" data-model="" class="form-control" id="exampleFormControlInput1" placeholder=""></div></div>';
      }
      if (typ == 'select') {
        text_input = `<div class="col-6"><div class="mb-3 col-12"><label for="exampleFormControlInput1" class="form-label">${label}</label><select id="sel${++selId}" class="form-control"></select></div></div>`;
        let options_data_source = data.form.fields[prop2].options_data_source;
        $.getJSON(url+2, function(dt) { dt=dat2; // fake AJAX call again ... data comes from dat2
          $(`#sel${selId}`).html(dt.data.map(({en})=>`<option>${en}</option>`).join(""));
        });
      }
      $('#form').append(text_input);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form"></form>

​

Answer 2

要访问第二个数据源中的数据(一个对象列表)，您需要在键" data“处循环该值并从中提取该选项。就像这样。

做这个

// for each object in the option's api response.
for (let i = 0; i < dt.data.length; ++i) {

    // extract the option
    let option = dt[data][i]["en"]
    
    // print it or do whatever you want
    console.log("Options", option)
}

而不是

for (let pr in dt) {
    console.log('Options', dt[pr]);
}