How to render a json objects's inner array in javascript or jquery

Question

I am trying get value and the option name from my json data but my value is also coming in option only

here is the demo what ootput i get https://jsfiddle.net/1dekbp9f/

and what i need is

<select id="demo">
<option value="Q1">What is your birth place?</option>
<option value="Q2">What is your first bike?</option>
<option value="Q3">What is your favourite subject?</option>
<option value="Q4">What is your first Mobile?</option>
<option value="Q5">What is your native place?</option>
<option value="Q0">Others</option>
</select>

here is my code what i tried

<select id="demo" ></select>
<script>
var jsonData = {  
         "cid":"comb_questions",
         "mkey":"101_comb_questions",
         "pdet":[  
            {  
               "key":"N101_comb_questions0",
               "val":[  
                  "What is your birth place?",
                  "What is your first bike?",
                  "What is your favourite subject?",
                  "What is your first Mobile?",
                  "What is your native place?",
                  "Others"
               ]
            },
            {  
               "key":"N101_comb_questions1",
               "val":[  
                  "Q1",
                  "Q2",
                  "Q3",
                  "Q4",
                  "Q5",
                  "QO"
               ]
            }
         ]
      };

var text = "";
for (var i=0; i<jsonData.pdet.length; i++) {
    var productdetail = jsonData.pdet[i];
    for (var j=0; j<productdetail.val.length; j++) {
            var productval = productdetail.val[j];
                //console.log(productval);
                    text += "<option value=''>" + productval + "</option>";

    }
};
document.getElementById("demo").innerHTML = text;

MartijnK · Accepted Answer · 2016-06-22 07:15:57Z

1

You're iterating through all arrays (with .length in the outer loop), so you get all options in your dropdown via the inner loop. You could either select the array by index [0] or [1], or select on key value to determine which array to use.

You could replace the for loop with a simple map to improve readability. I'm assuming that the array will contain both a text and a value property at some point. Using map makes it easier.

var text = "";
  jsonData.pdet[0].val.map(function(value){
    text += "<option value='+ value +'>" + value + "</option>";
  });
document.getElementById("demo").innerHTML = text;

answered Jun 22, 2016 at 7:15

MartijnK

6725 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

A.T. · Accepted Answer · 2016-06-22 07:29:12Z

assuming you have fixed JSON structure.

var jsonData = {  
         "cid":"comb_questions",
         "mkey":"101_comb_questions",
         "pdet":[  
            {  
               "key":"N101_comb_questions0",
               "val":[  
                  "What is your birth place?",
                  "What is your first bike?",
                  "What is your favourite subject?",
                  "What is your first Mobile?",
                  "What is your native place?",
                  "Others"
               ]
            },
            {  
               "key":"N101_comb_questions1",
               "val":[  
                  "Q1",
                  "Q2",
                  "Q3",
                  "Q4",
                  "Q5",
                  "QO"
               ]
            }
         ]
      };

var text = "";
for (var i=0; i<jsonData.pdet[0].val.length; i++) {
				    text += "<option value='"+ jsonData.pdet[1].val[i] +"'>" + jsonData.pdet[0].val[i] + "</option>";
};
document.getElementById("demo").innerHTML = text;

<select id="demo" ></select>

Fadhly Permata · Accepted Answer · 2016-06-22 07:21:57Z

use this code (assuming used jQuery as on your question tag):

$('document').ready(function() {
  var jsonData = {  
         "cid":"comb_questions",
         "mkey":"101_comb_questions",
         "pdet":[  
            {  
               "key":"N101_comb_questions0",
               "val":[  
                  "What is your birth place?",
                  "What is your first bike?",
                  "What is your favourite subject?",
                  "What is your first Mobile?",
                  "What is your native place?",
                  "Others"
               ]
            },
            {  
               "key":"N101_comb_questions1",
               "val":[  
                  "Q1",
                  "Q2",
                  "Q3",
                  "Q4",
                  "Q5",
                  "QO"
               ]
            }
         ]
      };

    $.each(jsonData.pdet[0].val, function(key, value) {
      var q = jsonData.pdet[1].val[key];
      $('select#demo').append('<option value="' + q + '">' + value + '</option>');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="demo">
</select>

Collectives™ on Stack Overflow

How to render a json objects's inner array in javascript or jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related