jQuery Array.map и Object.keys () для сопоставления ключа массива объекта

Question

У меня есть файл JSON: https://next.json -generator.com / api / json / get / E1qcwkNxr

, и я хочу использовать его для создания таблицы.Используя jQuery, я получаю массив ответов и сопоставляю некоторые значения для построения ячеек тела таблицы:

        var data = $.getJSON('https://next.json-generator.com/api/json/get/E1qcwkNxr', function (response) {

            // map JSON to local arrays and define local vars
            var rows = response.map(function (r) {
                return [
                    r.age,
                    r.index,
                    r.registered,
                    r.balance,
                    r.eyeColor
                ];
            });
        });

Я хочу сделать то же самое с ключами, потому что я хочу построить ячейки thead с этими данными.Есть способ сделать это?Object.keys(response[0]); записать мне все ключи в объекте. Как мне сопоставить только тот ключ, который я хочу использовать?

Answer 1

Чтобы ответить на ваш вопрос относительно Object.keys, вам нужно отфильтровать по известному набору.

Например:

let keysToRender = ['index', 'age'];
Object.keys(response[0]).filter(key => { return ~keysToRender.indexOf(key) })

Вот решение, которое я создал вместе (оно основано на ссылке скрипта, которую я опубликовал в моих комментариях к вам, но очищен), которая использует map.Лично я предпочитаю map над $.each (для этой проблемы), поскольку накладных расходов немного меньше.

Fiddle: http://jsfiddle.net/x3p79jfs/

Редактировать: Вот скрипкакоторый поддерживает порядок на основе ответа (как вы упомянули в другом комментарии) - http://jsfiddle.net/x3p79jfs/1/

Надеюсь, это поможет!

$.getJSON('https://next.json-generator.com/api/json/get/E1qcwkNxr', function(res) {
    // Extracts values from response
    const getModelFromKeys = (res, keys) => {
        return res.map(item => {
            return keys.map(key => {
                return item[key];
            });
        });
    };

    // Build template to append
    const buildTableFromModel = (header, body) => {
        let reducer = (arr, func, acc) => {
            return arr.reduce(func, acc);
        };

        let getTemplateCell = (template, item) => template + `<td>${item}</td>`;
        let getTemplateRow = (template, item) => template + `<tr>${reducer(item, getTemplateCell, ``)}</tr>`;
        
        return `
            <table><thead><tr>
            ${reducer(header, getTemplateCell, ``)}
            </tr></thead><tbody>
            ${reducer(body, getTemplateRow, ``)}
            </tbody></table>
        `
    };

    // Our expected set of keys to render (note first, last names which do not exist)
    let pii_table = ['age', 'index', 'first_name', 'last_name', 'registered', 'balance', 'eyeColor'];

    // Filter expected keys against ajax response
    // let filteredKeys = Object.keys(res[0]).filter(key => {
    //    return ~pii_table.indexOf(key);
    // });

    // Filter expected keys against ajax response
    let responseKeys = Object.keys(res[0]);
    let filteredKeys = pii_table.filter(key => {
        return ~responseKeys.indexOf(key);
    });

    // Build Table Model From Filtered Keys
    let firstTableModel = getModelFromKeys(res, filteredKeys);
    
    // Append table to Body
    document.body.innerHTML += buildTableFromModel(filteredKeys, firstTableModel);
});

td {
    padding: 3px;
    text-align: center;
}
thead {
    color: white;
    background-color: #777;
}
tr:nth-child(2n) {
    background-color: #ccc;
}

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

Answer 2

Я бы предложил вам использовать $.each(), а не $.map().Примерно так:

var rows = [];
$.getJSON('https://next.json-generator.com/api/json/get/E1qcwkNxr', function (response) {
  $.each(response, function(i, x){
    var obj = {};
    var s = ["age", "index", "registered", "balance", "eyeColor"];
    $.each(x, function(k, v){
      if(s.indexOf(k) >= 0){
        obj[k] = v;
      }
    });
    rows.push(obj);
  });
});

Теперь у вас будет чистый массив объектов, который имеет ключи и значения.Затем вы можете использовать его для построения таблицы.

var $table = $("<table>");
$("<thead>").appendTo($table);
$("<tr>").appendTo($("thead", $table));
$.each(rows[0], function(key, val){
  $("<th>").html(key).appendTo($("thead tr", $table));
});
var $tbody = $("<tbody>").appendTo($table);
$.each(rows, function(ind, row){
  var $trow = $("<tr>").appendTo($tbody);
  $.each(row, function (item){
    $("<td>").html(item).appendTo($trow);
  });
});

Рабочий пример: https://jsfiddle.net/Twisty/xv4kzy8L/

Обновление

Если вам нужен столдля отображения в определенном виде, вы можете сделать это с вашим массивом имен ключей.Затем отобразите результаты в определенном порядке:

var headers = ["age", "index", "registered", "balance", "eyeColor"];
var $table = $("<table>");
$("<thead>").appendTo($table);
$("<tr>").appendTo($("thead", $table));
$.each(headers, function(key, val){
  $("<th>").html(val).appendTo($("thead tr", $table));
});
var $tbody = $("<tbody>").appendTo($table);
$.each(rows, function(ind, row){
  var $trow = $("<tr>").appendTo($tbody);
  $.each(headers, function (k, i){
    $("<td>").html(row[i]).appendTo($trow);
  });
});

Надеюсь, это поможет.