如何在特定键之前返回数组中的所有数组项

Question

I'm needing to return items from an array. The difficulty is that arrays returned from a fetch request have the possibility of returning different keys that can't be determined prior to the return. The common denominator is the 'created_by' key. As the title suggests, I need to know a way that can render all the previous values, prior to the created_by key, dynamically.

This is the render/map method I have setup now that will not work as it stands.

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)

Example 1: (Notice key numbers are different than example 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"

Example 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

You can try to cast to Map

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

Then you can normally iterate via keys

resMap.keys()

UPDATED ANSWER

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);
}

Answer 2

You can use for in to loop through the object, push the values to a new object, then break after created_by is reached.

 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 3

If that data is modelled as an object, it seems so from the keys, you do not have a definite chance to know in which order the keys are since JavaScript objects does not guarantee the order, unlike arrays.

If it is in your hands to retrieve this data as an array you could have the order guaranteed, and I would suggest you accordingly. Similar to the following hypothetical case's way.

You can an algorithm that accepts the names of the props value of which you want to render or not to render.

First, you need a filter algorithm for objects like that:

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);
}

Having that in hand you can filter the keys from an object based on a custom filtering function you defined. You can do the filtering according to anything you want based on key, value, index in entries array (returned form the Object.entries call).

After that you need to map your resData array itself with that function, performing the filtering props(s) of each object as you see fit:

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

with your custom filteringFunction to filter each object inside the array. You can do anything here. Here I just eliminate the key(s) that you list.

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

where undesiredKeysArray is just an array of strings each of which is a property's name in each object in resData .

If order in JavaScript objects were guaranteed, which is not the case, you could Object static methods keys , values or entries to get and array of those and look for the name of the key you want to stop rendering at and slice that array at there, and render the return of that slice call.