Как вернуть все элементы массива в массив до указанного c ключа

Question

Мне нужно вернуть элементы из массива. Сложность в том, что массивы, возвращаемые из запроса на выборку, могут возвращать разные ключи, которые нельзя определить до возврата. Общий знаменатель - ключ created_by. Как следует из названия, мне нужно знать способ, который может отображать все предыдущие значения до ключа created_by динамически.

Это метод рендеринга / карты, который я установил сейчас, который не будет работать, как он

return <div className="data-subContainer">
      {resData.map(item => <span key={item.id}>{item[1.3]} - <b>{item[2]}</b></span>)}
    </div>

resData Ouput:

    (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {4: "X", 5: "X", 6: "05/16/2020", id: "4627", form_id: "3", post_id: null, date_created: "2020-05-16 05:27:50", date_updated: "2020-05-16 05:27:50", …}
1: {4: "X", 5: "X", 6: "05/14/2020", id: "4618", form_id: "3", post_id: null, date_created: "2020-05-14 13:50:32", date_updated: "2020-05-14 13:50:32", …}
2: {4: "X", 5: "X", 6: "03/02/2020", id: "4124", form_id: "3", post_id: null, date_created: "2020-03-02 19:01:18", date_updated: "2020-03-02 19:01:18", …}
3: {4: "X", 5: "X", 6: "02/27/2020", id: "4103", form_id: "3", post_id: null, date_created: "2020-02-27 00:38:54", date_updated: "2020-02-27 00:38:54", …}
4: {4: "X", 5: "X", 6: "02/27/2020", id: "4102", form_id: "3", post_id: null, date_created: "2020-02-27 00:38:14", date_updated: "2020-02-27 00:38:14", …}
5: {4: "X", 5: "X", 6: "02/27/2020", id: "4101", form_id: "3", post_id: null, date_created: "2020-02-27 00:34:44", date_updated: "2020-02-27 00:34:44", …}
6: {4: "X", 5: "X", 6: "01/14/2020", id: "3853", form_id: "3", post_id: null, date_created: "2020-01-14 07:37:23", date_updated: "2020-01-14 07:37:23", …}
7: {4: "X", 5: "X", 6: "11/06/2019", id: "3503", form_id: "3", post_id: null, date_created: "2019-11-06 12:35:04", date_updated: "2019-11-06 12:35:04", …}
8: {4: "X", 5: "X", 6: "09/26/2019", id: "3283", form_id: "3", post_id: null, date_created: "2019-09-26 17:52:06", date_updated: "2019-09-26 17:52:06", …}
9: {4: "X", 5: "X", 6: "09/24/2019", id: "3263", form_id: "3", post_id: null, date_created: "2019-09-24 20:08:35", date_updated: "2019-09-24 20:08:35", …}
length: 10
__proto__: Array(0)

Пример 1: (номера клавиш уведомления отличаются от примера 2)

1: "XX"
2: "XXXX"
3.2: ""
3.3: "XX"
3.4: ""
3.6: "X"
3.8: ""
4: "X"
5: "X"
8: "X"
10: "X"
11: "X"
12: "X"
13: "X"
created_by: "X"

Пример 2:

1.2: ""
1.3: "X"
1.4: ""
1.6: "X"
1.8: ""
4: "X"
5: "X"
6: "X"
7: "X"
8: "X"
9: "X"
created_by: "X"

Answer 1

Вы можете использовать от for in до l oop через объект, push значения для нового объекта, затем break после достижения created_by.

var arr = {1: "XX",
2: "XXXX",
3.2: "",
3.3: "XX",
3.4: "",
3.6: "X",
3.8: "",
4: "X",
5: "X",
8: "X",
10: "X",
11: "X",
12: "X",
13: "X",
created_by: "X",
test: 1
};

var newa = {};

for(i in arr){
  newa[i] = arr[i];
  if(i == "created_by"){
     break;
  }
}

console.log(newa);

Answer 2

Если эти данные смоделированы как объект, судя по ключам, у вас нет определенного шанса узнать, в каком порядке находятся ключи, поскольку JavaScript объекты не гарантируют порядок, в отличие от массивов.

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

Вы можете использовать алгоритм, который принимает имена значений свойств, которые вы хотите отображать или не отображать.

Во-первых, вам нужен алгоритм фильтрации для таких объектов:

function filterObject(object, filteringFunction, initialAccumulator = {}) {
    return Object.entries(object)
        .filter(([key, value], indexInEntriesArray, entriesArray) => filteringFunction(key, value, indexInEntriesArray, entriesArray))
        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), initialAccumulator);
}

Имея это под рукой, вы можете фильтровать ключи объекта на основе заданной вами пользовательской функции фильтрации. Вы можете выполнить фильтрацию в соответствии со всем, что хотите, на основе ключа, значения, индекса в массиве записей (возвращается из вызова Object.entries).

После этого вам нужно сопоставить свой массив resData с этим , выполняя фильтрующие свойства для каждого объекта по вашему усмотрению:

const mappedResData = resData.map(item => filterObject(item, myFilteringFunc))

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

const myFilteringFunc = (key, val, i, entArr) => undesiredKeysArray.includes(key) === false;

, где undesiredKeysArray - это просто массив строк, каждая из которых является именем свойства в каждом объекте в resData.

Если порядок в JavaScript объектах был гарантирован, что не так, вы можете Object stati c методы keys, values или entries, чтобы получить их массив и найти имя ключа, на котором вы хотите остановить рендеринг, и slice этого массива, и рендеринг возврата этого slice вызова.

Answer 3

Вы можете попробовать применить к карте

var resMap = new Map(Object.entries(resData));

Затем вы можете обычно выполнять итерацию с помощью ключей

resMap.keys()

ОБНОВЛЕННЫЙ ОТВЕТ

const resData = {
  1: 'XX',
  2: 'XXXX',
  3.2: '',
  3.3: 'XX',
  3.4: '',
  3.6: 'X',
  3.8: '',
  4: 'X',
  5: 'X',
  8: 'X',
  10: 'X',
  11: 'X',
  12: 'X',
  13: 'X',
  created_by: 'X',
  test: 1
};

const resMap = new Map(Object.entries(resData));
for (const [key, value] of resMap) {
  if (key === 'created_by') { return; }
  console.log(key, value);
}