জেসন ডেটা এইচটিএমএল টেবিলে রূপান্তর করুন [বন্ধ]

112

বন্ধ থাকে। এই প্রশ্নটি স্ট্যাক ওভারফ্লো নির্দেশিকাগুলি পূরণ করে না । এটি বর্তমানে উত্তর গ্রহণ করছে না।

এই প্রশ্নটি উন্নত করতে চান? প্রশ্ন আপডেট করুন তাই এটা -বিষয়ে স্ট্যাক ওভারফ্লো জন্য।

6 বছর আগে বন্ধ ছিল ।

এমন কোন জিকুয়ারি বা জাভাস্ক্রিপ্ট লাইব্রেরি রয়েছে যা জাসন ডেটা দিয়ে একটি গতিশীল টেবিল তৈরি করে? আমি কলামগুলি সংজ্ঞায়িত করতে চাই না, লাইব্রেরির উচিত জসন হ্যাশগুলির কীগুলি পড়া এবং কলামগুলি তৈরি করা উচিত।

অবশ্যই, আমি নিজেই json ডেটা দিয়ে পুনরাবৃত্তি করতে এবং এইচটিএমএল টেবিল তৈরি করতে পারি। আমি কেবল জানতে চাই যে এ জাতীয় কোনও লাইব্রেরি রয়েছে যা আমি কেবল পুনরায় ব্যবহার করতে পারি।

— মনীষ মুলানী
সূত্র

আমি মনে করি trirand.com/blog আপনি যা খুঁজছেন তা is এটি JSON নেয় এবং এটিকে গ্রিডে রূপান্তর করে।

— গোকুল এনকে

1

ঠিক আছে, উত্তরের জন্য ধন্যবাদ। তবে আমার প্রয়োজনীয়তাগুলি পূরণ করার জন্য আমি নিজের জন্য একটি লিখেছিলাম। jsfiddle.net/manishmmulani/7MRx6

— মনীষ মুলানী

2

আপনি এই সহজ প্রকল্পটি গিথুবটিতেও

— আফশিন মেহরাবানি

2020-এ আরও সহজেই, কেবলমাত্র github.com/arters/Convers-json-data-to-a-html-template

— kasp

136

তোমার উত্তরগুলো জন্য ধন্যবাদ। আমি নিজে একটি লিখেছি। দয়া করে নোট করুন যে এটি jQuery ব্যবহার করে।

টুকিটাকি সংকেতলিপি:

var myList = [
  { "name": "abc", "age": 50 },
  { "age": "25", "hobby": "swimming" },
  { "name": "xyz", "hobby": "programming" }
];

// Builds the HTML Table out of myList.
function buildHtmlTable(selector) {
  var columns = addAllColumnHeaders(myList, selector);

  for (var i = 0; i < myList.length; i++) {
    var row$ = $('<tr/>');
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = myList[i][columns[colIndex]];
      if (cellValue == null) cellValue = "";
      row$.append($('<td/>').html(cellValue));
    }
    $(selector).append(row$);
  }
}

// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records.
function addAllColumnHeaders(myList, selector) {
  var columnSet = [];
  var headerTr$ = $('<tr/>');

  for (var i = 0; i < myList.length; i++) {
    var rowHash = myList[i];
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {
        columnSet.push(key);
        headerTr$.append($('<th/>').html(key));
      }
    }
  }
  $(selector).append(headerTr$);

  return columnSet;
}

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

<body onLoad="buildHtmlTable('#excelDataTable')">
  <table id="excelDataTable" border="1">
  </table>
</body>

স্নিপেট প্রসারিত করুন

— মনীষ মুলানী
সূত্র

হাই @ মনীষ-মুলানী এটি আমার কাজ করে না, আপনি কি আবার যাচাই করতে পারেন

— নিশ

1

@ নিশ আপনি কি jsfiddle.net/manishmmulani/7MRx6

— মনীষ মুলানী

1

হাই, আমি একটি ইউআরএল থেকে ডেটা পাওয়ার চেষ্টা করেছি, তবে এটি কাজ করছে বলে মনে হচ্ছে না

3

ওহে. এই আমার জন্য কাজ করে। তবে আমি একটি প্রশ্ন আছে। কেন কোনও খোলার trও tdট্যাগ নেই? ধন্যবাদ।

— সাইভাল

function addAllColumnHeaders(myList)- ভূল. হওয়া উচিত function addAllColumnHeaders(myList,selector)। বিটিডব্লিউ এই নিখুঁত কাজ করে !!

— শিরকার

61

আমি এইচটিএমএল ইনজেকশন প্রতিরোধ করতে DOM পদ্ধতি ব্যবহার করে ভ্যানিলা-জেএসে আপনার কোডটি আবার লিখেছি।

ডেমো

var _table_ = document.createElement('table'),
  _tr_ = document.createElement('tr'),
  _th_ = document.createElement('th'),
  _td_ = document.createElement('td');

// Builds the HTML Table out of myList json data from Ivy restful service.
function buildHtmlTable(arr) {
  var table = _table_.cloneNode(false),
    columns = addAllColumnHeaders(arr, table);
  for (var i = 0, maxi = arr.length; i < maxi; ++i) {
    var tr = _tr_.cloneNode(false);
    for (var j = 0, maxj = columns.length; j < maxj; ++j) {
      var td = _td_.cloneNode(false);
      cellValue = arr[i][columns[j]];
      td.appendChild(document.createTextNode(arr[i][columns[j]] || ''));
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
  return table;
}

// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records
function addAllColumnHeaders(arr, table) {
  var columnSet = [],
    tr = _tr_.cloneNode(false);
  for (var i = 0, l = arr.length; i < l; i++) {
    for (var key in arr[i]) {
      if (arr[i].hasOwnProperty(key) && columnSet.indexOf(key) === -1) {
        columnSet.push(key);
        var th = _th_.cloneNode(false);
        th.appendChild(document.createTextNode(key));
        tr.appendChild(th);
      }
    }
  }
  table.appendChild(tr);
  return columnSet;
}

document.body.appendChild(buildHtmlTable([{
    "name": "abc",
    "age": 50
  },
  {
    "age": "25",
    "hobby": "swimming"
  },
  {
    "name": "xyz",
    "hobby": "programming"
  }
]));

স্নিপেট প্রসারিত করুন

— Oriol
সূত্র

1

কোনও নেস্টেড জেসন বস্তু দিয়ে এই কাজ করা সম্ভব?

— জানাক মীনা

@ জানাকমীনা আমার মনে হয় এর জন্য আপনার n- মাত্রিক টেবিলের প্রয়োজন হবে।

— অরিওল

সেটা সত্য. টেবিলের মধ্যে টেবিলগুলি। এছাড়াও, আমি চিড়িয়াখানাযোগ্য গাছের ম্যাপগুলি আবিষ্কার করেছি যা নেস্টেড জেসনকে অনুমতি দেয়

— জ্যানাক মীনা

এই একই ফাংশন কিন্তু একটি pivoted টেবিল ফেরার সুন্দর হবে

— ndelucca

1

@ শাই JSON.parse (আপনার পরিবর্তনশীল) ব্যবহার করুন এবং এটি বুলডএইচটিএমএল টেবিলটিতে পাঠান

— xSx

13

আপনি সাধারণ jQuery jPut প্লাগইন ব্যবহার করতে পারেন

http://plugins.jquery.com/jput/

<script>
$(document).ready(function(){

var json = [{"name": "name1","email":"email1@domain.com"},{"name": "name2","link":"email2@domain.com"}];
//while running this code the template will be appended in your div with json data
$("#tbody").jPut({
    jsonData:json,
    //ajax_url:"youfile.json",  if you want to call from a json file
    name:"tbody_template",
});

});
</script>   

<table jput="t_template">
 <tbody jput="tbody_template">
     <tr>
         <td>{{name}}</td>
         <td>{{email}}</td>
     </tr>
 </tbody>
</table>

<table>
 <tbody id="tbody">
 </tbody>
</table>

— শাবির
সূত্র

13

পরীক্ষা করে দেখুন ~~JSON2HTML~~ http://json2html.com/ jQuery জন্য প্লাগইন। এটি আপনাকে এমন রূপান্তর নির্দিষ্ট করতে অনুমতি দেয় যা আপনার JSON অবজেক্টকে এইচটিএমএল টেমপ্লেটে রূপান্তর করবে। যেকোন পছন্দসই এইচটিএমএল টেমপ্লেটের জন্য জেসন ট্রান্সফর্ম অবজেক্ট পেতে http://json2html.com/ এ বিল্ডার ব্যবহার করুন । আপনার ক্ষেত্রে এটি সারণীর সাথে সারণীর সাথে নিম্নলিখিত রূপান্তর করবে।

উদাহরণ:

var transform = {"tag":"table", "children":[
    {"tag":"tbody","children":[
        {"tag":"tr","children":[
            {"tag":"td","html":"${name}"},
            {"tag":"td","html":"${age}"}
        ]}
    ]}
]};

var data = [
    {'name':'Bob','age':40},
    {'name':'Frank','age':15},
    {'name':'Bill','age':65},
    {'name':'Robert','age':24}
];

$('#target_div').html(json2html.transform(data,transform));

— মত্স্যবিশেষ
সূত্র

আমি এখানে লিঙ্কটি json2html.com

— চ্যাড ব্রাউন