Loop through Array within Object React

JavaScript
1

Hi, I’m very new to React, I’m working on a project where I’m fetching data from an API then display is on a table. there is a array within the object returned and the indexes are mixed up i.e value in array [0] is ‘BMW’ and in a different object returned array [0] is ‘Grey’. therefore i would like to loop through this array the give a condition as to what data i want to display. is this possible and if so how?

the image attached is how I’m rendering my current display but the data output is wrong ideally arr[0] would be car, arr[1] would be color and arr[2] is price

Many Thanks
snip

2

I am just started learning React, so not sure how to deal with this one.

But in any case, I think little bit more context needed in order to provide some advice.

You can post your code here

that would be better than screenshots

5

this is the best i could do to get the data and omit any sensitive data from the API the labels array is what I’m trying to target

6

Hi please excuse how horrible the logic I was thinking of approaching it as I do when using Angular.

 <td>
        {(() =>{
                  for(i=0; i < 2; i++){
                  if(item.labels[0]?.name[0]==="C" || item.labels[1]?.name[0]==="C" || item.labels[2]?.name[0]==="C"){
                  <li>{item.labels[i].name}</li>
               }
                                   
           }
     })}
</td>

would something along these lines possibly work with the right editing
7

Does not look to me that React should be your concern on this task. The problem lays in your data and its format. You want to use regular JS techniques the groom the data you get from the response and make it in the state you need. Then just let react component display what you want. I see you input the whole htm strucutre inline in your map function. You might consider take it into a separate jsx component e.g. <TableRow /> and pass the item data to it. Then you can destructure it ({title, body, labels, state}). You can even destructure the labels const [one, two three] = labels. You can try to sort or determine which index is the color/price/car by some common feature, e.g. the price would most likely be of numeric value. Colors might be in a set of values, e.g. [grey, red, blue, yellow], but really, its hard to tell that without the actual data.
Here is mock code how you could possibly turn an array ob labels into an object with the appropriate keys:

const colors = ['Grey', 'Red', 'Blue']
const labels = [123, 'Blue', 'BMW']

const parseLabels = labels.reduce((labelsObj, label) => {
  if (!isNaN(label)) labelsObj.price = label
  else if (colors.includes(label)) labelsObj.color = label
  else labelsObj.name = label
  return labelsObj
}, {})

console.log(parseLabels)
// { price: 123, color: 'Blue', name: 'BMW' }
8

Hi Sylvant thank you for your reply.

the data is from a API this is for an assessment i was given now I’m not sure if having the API data is a good thing or not. your solution dosnt solve my problem as i need the inner loop to search through all indexes of the inner array to fine the right value for the column i want to display.

if you can look at the picture i attached there is a mapped array, withing that i need a array that will loop inside 3 times going through index[0],[1],[2] and finding a specific value i did something similar with angular

<tr *ngFor="let items of data, let i=index let c=count">
            <td>{{i+1}}</td>
            <td>{{ items.title }}</td>
            <td>{{ items.body }}</td>
            <td>
                <div *ngFor ="let in of counter(3) ;let i = index">
                    <td *ngIf = "items?.labels[i]?.name[0] =='C' || items?.labels[i]?.name[0] =='C' || items?.labels[i]?.name[0] =='C' ">{{items?.labels[i]?.name}}</td> 
                </div>
            </td>
            <td>
                <div *ngFor ="let in of counter(3) ;let i = index">
                    <td *ngIf = "items?.labels[i]?.name[0] =='P' || items?.labels[i]?.name[0] =='P' || items?.labels[i]?.name[0] =='P' ">{{items?.labels[i]?.name}}</td>
                </div>
            </td>
            <div *ngFor ="let in of counter(3) ;let i = index">
                <td *ngIf = "items?.labels[i]?.name[0] =='T' || items?.labels[i]?.name[0] =='T' || items?.labels[i]?.name[0] =='T' ">{{items.labels[i]?.name}}</td>
            </div>
            
            <td>{{ items.state }}</td>
        </tr>
9

I might repeat myself, but you gotta give us some outline of what the data looks like. Give us one object of that array, with fake values if need be, so we understand the format. Working up solution blindly can only give you suggestions ive shown above. Its not meant to solve your particular problem, but push you in direction you might be able to solve on your own; give you some ideas.
I havent worked with angular and its hard to make anything with the code you provide, taken out of context. It looks like you do lot of repetitive calculations inline, which to me is not alright. You want to groom the data, before you feed it into the output. Make a log to determine which index is the price, which is the name, which is the price and then, put it in the html output. It should be plain JS algorithm and not do much with the framework

1 Like
10

Hi again thanks for trying to help, I went back to using React, where I’m more comfortable. thanks for pointing out how redundant my conditional was. I have removed the unnecessary code really appreciate the help.

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.