how to loop my react data, its not showing my data - arrays

I makes crud with react but i have trouble when try to displaying from data table. please help me
this my code
my conn to api
this my looping data
looping code
this the console log
console log

I saw that you make an array which contains a lot of arrays. Is this your expectation?
rowsData = [
[{ DocumentID: 1, DocumentName: 2, status: 3, navigation: 4 }],
[{ DocumentID: 1, DocumentName: 2, status: 3, navigation: 4 }]
]

Related

How to display key value pairs from nested object

I have this structure of data (its more nested, but I give you example of it)
{
status: {
observedGeneration: 2,
replicas: 1,
updatedReplicas: 1,
readyReplicas: 1,
availableReplicas: 1,
conditions: [
{
type: "Progressing",
status: "True",
lastUpdateTime: "2022-02-25T09:28:17Z",
lastTransitionTime: "2022-02-25T09:19:35Z",
},
{
type: "Available",
status: "True",
lastUpdateTime: "2022-09-06T02:03:09Z",
lastTransitionTime: "2022-09-06T02:03:09Z",
}
]
}
settings: {
observedGeneration: 2,
replicas: 1,
updatedReplicas: 1,
readyReplicas: 1,
availableReplicas: 1,
conditions: [
{
type: "Progressing",
status: "True",
reason: "NewReplicaSetAvailable",
message: "ReplicaSet \"label-studio-546655c5cc\" has successfully progressed.
},
{
type: "Available",
status: "True",
reason: "MinimumReplicasAvailable",
message: "Deployment has minimum availability."
}
]
}
}
How I can iterate over this to display in React structure like key value pairs. For example:
This output is only example, but what I want to display is
`key`: `value`
`key`: `value'
`key`:
`key`:`value`
name: Mathew
seetting:
label: 1
composie: yes
additionalSetting:
performance: no
ready: onlyData
version: 123
mountPath: replices
I just was thinking about recursion function, but after many hours of struggling I think I need a little bit of help :)
Thank you so much for any solutions :)
As suggested in comment you can use a tree structure with primitive values as leaf. See this codesandbox for an example of such structure.

Nested database for firebase and react native

Was working on a real Estate app that contains three kinds of post, properties for Rent, Sale, and Explore. when i was working with a local file i could access them just fine but now am trying to create the same structure on firebase the problem is the upload form. this is an example of the data structure am trying to create on firebase. how do i go about making a generic form that can upload these kind of data
Data.js
proforsale=[
id: 1,
uploader: "name",
status: "Sale",
photos: []
]
proforrent=[
id: 1,
uploader: "name",
status: "Rent",
photos: []
]
explore=[
]

How can I display json data in reactjs

My JSON data looks like this:
safarisDetails: {
loading: false,
safaridetails: {
safari: [
{
id: 1,
safari_name: '3 DAYS GORILLA TREKKING TRIP',
days: 3,
days_category: '<4',
budget: '900',
title: '3 DAYS GORILLA TREKKING TOUR',
text: 'Test.',
travelertype: '',
date_created: '2021-10-08T15:22:31.733347Z'
}
],
highlight: [
[
{
id: 1,
highlight: 'See the famous mountain gorillas',
safaris: 1
},
{
id: 2,
highlight: 'Get to know the Batwa community',
safaris: 1
}
]
]
I want to render objects in my component such as the safari_name and loop trough the highlights. However, when I use {safarisdetails.safari.safari_name} i get an error message stating: 'safari_name' is not defined.
There are a couple of problems based on the same you provided...
safarisdetails is repeated twice in the JSON, but not in your check
safari is an array in the JSON, but accessed like an object in your check
For example, to get the first name, you'd write something like:
safarisdetails.safarisdetails.safari[0].safari_name
Also, is this JSON even valid? Maybe you posted a partial snippet, but the JSON has to have {} around the whole thing.

how to merge similar values in normalizr function?

I have unusual response from server like this
[
{
id: 1,
name: "Alexandr",
children: [
{
id: 2,
name: "Stephan"
},
{
id: 3,
name: "Nick"
}
]
},
{
id: 4,
name: "David",
children: [
{
id: 3,
name: "Nick"
},
{
id: 6,
name: "Paul"
}
]
}
]
i would like to normalize this response to receive a diction with all people. So, i use normalizr go flat this
const people= new Schema('people');
people.define({
Children: arrayOf(people),
NotOwnChildren: arrayOf(people)
});
let normalized = normalize(response.data, arrayOf(people));
but doing like this i get an error
"When merging two people, found unequal data in their "Children" values. Using the earlier value."
How can i adjust normalizr to merge people with same id (update entities with newest data)?
It looks like you're getting two people that have differing values for one of their keys (I'm assuming your example input is truncated).
For Normalizr#2:
You can use a custom mergeIntoEntity function to resolve the issue manually.
For Normalizr#>=3.0.0, you'll need use mergeStrategy.

Best approach to manage related objects in angular?

Let's say I have two json objects, one of users and one of accounts, something like:
users = [
{id: 1, account_id: 1},
{id: 2, account_id: 2},
{id: 3, account_id: 1}
]
accounts = [
{id: 1, name: "administrator"},
{id: 2, name: "moderator"}
]
So I have to loop accross all the users array, and for each of them get the account information. Which is the best way to manage those relationships for accessing them in the markup? I found the following solutions:
Approach 1: Make a repeat of only one element, so that it's just to filter the elements and to make it available in that part of the markup
<div ng-repeat="user in users">
<div ng-repeat="account in getAccountFromId(user.account_id)">
<!-- now account is available in all this scope to access user.account.name -->
</div>
</div>
Approach 2: Change the way the information is returned from the backend, bringing a json of each user where each json is returned with the account information. But that will repeat a lot of informacion in each json object. Also this implies changing the backend because of angular.
<div ng-repeat="user in users">
<!-- with this approach I can access here user.account.name -->
</div>
Could someone tell me if those approachs are correct? Is there a better way to manage the object relationships in angular?
Thanks a lot.
If you really don't like the thought of changing the shape of the data coming from the server, another option is to just map the users to accounts in javascript.
app.controller("MyController", function($scope) {
// Pretend that 'users' and 'accounts' here came from an xhr request
var users = [
{id: 1, account_id: 1},
{id: 2, account_id: 2},
{id: 3, account_id: 1}
]
var accounts = [
{id: 1, name: "administrator"},
{id: 2, name: "moderator"}
]
// Map accounts to users
for(var i=0; i<users.length; i++) {
for(var j=0; j<accounts.length; j++) {
if (accounts[j].id === users[i].account_id) {
users[i].account = accounts[j];
}
}
}
});
I faced the same problem and decided it was not the front-end job to perform data mapping.
So instead of returning on account_id like:
users = [
{id: 1, account_id: 1},
{id: 2, account_id: 2},
{id: 3, account_id: 1}
]
I extended the model with "account_name" (or whatever the equivalent for me)
Hence the suggested output
users = [
{id: 1, account_id: 1, account_name: "administrator"},
{id: 2, account_id: 2, account_name: "moderator"},
{id: 3, account_id: 1, account_name: "administrator"}
]
It is slightly redundant but makes your life easier in the UI and doesn't cost much in the server.

Resources