Loop the Changeble Json and show in to the html

Question

I have this JSON

var b = {
  "Id": 1,
  "ProductCode": 148,
  "Battery": "",
  "OS": "",
  "SimCardCount": null,
  "CPU": "",
  "ScreenSize": null,
  "InternalStorage": null,
  "RAM": null,
  "MemoryCard": null,
  "Have3G": false,
  "Have4G": false,
  "Camera": null,
  "FrontCamera": null
};

but this titles is not to be fixed. For example : maybe "Battery" changes to "Color".

I want to show this JSON in to the html Dynamically

Answer is here http://stackoverflow.com/questions/684672/loop-through-javascript-object — Venkata Krishna Reddy, Nov 28 '15 at 16:42

score 1 · Answer 1 · answered Nov 28 '15 at 16:28

1

you can loop through the object like

for(index in b)
{
    console.log(index, b[index]);
}

when the index is an id you can access the elements with

var id = '#'+index;
var $elm = $(id);

answered Nov 28 '15 at 16:28

Chris

221
1
8

how to show in the table? – Mohammad Javad Heydari Nov 28 '15 at 17:12

score 1 · Accepted Answer · answered Nov 28 '15 at 16:35

1

You can loop an object for its key and value pairs using Jquery's .each:

  //loop the object using JQuery each
   $.each(b, function(key, value) {
      //display the key and value pairs however you want
      $("p").append(key + ' is ' + value + "<br>");
  });

Example

answered Nov 28 '15 at 16:35

Cory

1,263
16
31

that,s work Thank,s a lot 3> – Mohammad Javad Heydari Nov 28 '15 at 17:16

Venkata Krishna Reddy · Answer 3 · 2015-11-29T04:21:27.583

1

By using $.each you can loop through json obj and bind to your html

//Html table

var row = "";
     $.each(b, function(key, value) {
           row+="<tr><td>'"+key+"'</td><td>'"+value+"'</td></tr>"
        });

$("#myTable").html(row);

edited Nov 29 '15 at 04:21

answered Nov 28 '15 at 16:41

Venkata Krishna Reddy

642
1
9
18

how to sho in html?! – Mohammad Javad Heydari Nov 28 '15 at 17:10
Html means doyou want to show it in a table?? – Venkata Krishna Reddy Nov 28 '15 at 17:13

Loop the Changeble Json and show in to the html

3 Answers3