CODEWITHSUNDEEP
javascriptjqueryjson
Aryan
Aryan

Reputation: 133

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

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;

Upvotes: 0

Views: 169

Answers (3)

A.T.
A.T.

Reputation: 26312

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>

Upvotes: 1

Fadhly Permata
Fadhly Permata

Reputation: 1686

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>

Upvotes: 0

MartijnK
MartijnK

Reputation: 672

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;

Upvotes: 1

Related Questions