Javascript обрабатывает различные ответы от ajax-запроса, и response.length = undefined

Question

У меня есть запрос ajax, который возвращает json.Если есть одна запись, она возвращает это:

{"key":"My Value 1"}

Если возвращается более одной записи, это массив объектов:

[{"key":"My Value 1"},{"key":"My Value 2"}]

Я бы хотел иметь цикл, который будет обрабатывать 1 или много возвращаемых объектов, но когда я получу только один обратно, response.length не определено:

      console.log(typeof response); //Object
      console.log(response.length); //undefined

      row = '';
      Object.values(response).forEach(function(val) {
        row += '<tr><td>' + val + '</td></tr>';
      });

Проблема в том, что response.lengthне определено, но есть одна запись, которая была возвращена.Я думаю, что если бы был возвращен один объект, то длина будет 1?Как проверить один объект, а также обработать несколько?Я думаю, что должен быть простой / гибкий способ сделать это?

Answer 1

Вы можете проверить тип ответа, если это массив Array#isArray будет истинным и с использованием Array#reduce мы можем уменьшить строку путем конкатенации.

Иначе, если это отдельный объект, мы можем просто извлечь ключ и сформировать строку.

Но лучше исправить API-интерфейс сервера чтобы каждый раз возвращать массив.Если это не вариант, используйте решение ниже.

function generateTableRow(response){
  let row = '';
  if(Array.isArray(response)){
   row = response.reduce((acc, {key}) =>{ //using destructuring to get the 'key'
       return acc + `<tr><td>${key}</td></tr>`;
    }, '');
  }else{
   row = `<tr><td>${response.key}</td></tr>`;
  }
  return row;
}
let response = [{"key":"My Value 1"},{"key":"My Value 2"}];
console.log("If array sent");
console.log(generateTableRow(response));
response = {"key":"My Value 1"};
console.log("If object sent");
console.log(generateTableRow(response));

Answer 2

Лучше всего исправить на сервере.Если это невозможно, сделайте

response = response.length?response:[response];

Например

let response = {"key":"My Value 1"}
response = response.length?response:[response]; // force array if no length
tb.innerHTML = response.map((obj) => '<tr><td>' + obj["key"] + '</td></tr>')
  .join("")


response = [
  {"key":"My Value 2"},
  {"key":"My Value 3"}
];
response = response.length?response:[response]; // force array if no length
//console.log(response)
tb.innerHTML += response.map((obj) => '<tr><td>' + obj["key"] + '</td></tr>')
  .join("");

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

Answer 3

Вы можете проверить, является ли ответ массивом, используя Array.isArray (response). Если это не массив, тогда создайте массив, используя ответ, и после этого повторите его.

const responseArray = Array.isArray(response) ? response : [response];
responseArray.forEach(element => { // do your thing })

Answer 4

Попробуйте использовать Object.keys(response).length вместо просто длины.