Looping through a json object with the same key

Question

I have two json objects i am getting remotely and one is of this format

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

and the other

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

I am getting the first json object and creating a form out of it

$.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');

I want to get the individual options here

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

so that i append to the select box. How can i output the data in the second json object with the identical key?

It's not a single object, it's an array of objects. Use a regular for (i = ... loop, or Array.forEach — ADyson
– ADyson, Commented Nov 13, 2022 at 15:10
I did this let n = 0;for (let pr in dt) { let index = n + 1; console.log('Options', dt[pr][index].en);} but only outputs the first — Gandalf
– Gandalf, Commented Nov 13, 2022 at 15:17

Carsten Massmann · Accepted Answer · 2022-11-13 15:59:16Z

You have been experiencing a typical problem linked with asynchronuous processing. You have placed the <select> code into the page code before the associated options were returned from the second level AJAX call. In the following snippet I tried to change your code so it will work again. I chose to assign generated ids to all select elements. The options received in the secondary AJAX calls are then inserted into the corresponding select elements that were placed onto the page just moments before:

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>

Vivasvan Patel · Accepted Answer · 2022-11-13 15:13:10Z

1

To access the data in the second data source (a list of objects) you need to loop over the value at key "data" and extract the option from it. Something like this.

Do this

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

instead of

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

answered Nov 13, 2022 at 15:13

Vivasvan Patel

3,1081 gold badge13 silver badges16 bronze badges

6 Comments

Gandalf Over a year ago

This doesn't work as expected. Gives an error.

Vivasvan Patel Over a year ago

can you share what error is it giving??

Gandalf Over a year ago

Uncaught TypeError: Cannot read properties of undefined (reading '0')

Vivasvan Patel Over a year ago

can you check if your materials_data API return the same dt object and whether it equal to { "data": [{ "en": "One" }, ........... ,{ "en": "Four" }] }

Vivasvan Patel Over a year ago

it seems like to me that maybe your dt is not what you have mentioned in the question.

|

Collectives™ on Stack Overflow

Looping through a json object with the same key

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related