I'm coding to make a web view with API data to show up in the window but having some problems. Can anyone help me with this prob?
maybe I'm not good at speaking English for you to understand, I made some pictures what I want to make.
First, I have an array like this
const arr1 = [
{name: 'AAA', no: 23},
{name: 'BBB', no: 42},
{name: 'CCC', no: 33},
{name: 'DDD', no: 90},
{name: 'EEE', no: 101},
{name: 'FFF', no: 10},
]
I mapped it name for div h2 title, and no to p tag.
Here is the current conditions
enter image description here
Now I make a new array to add more p tags into div, and the array has a shape like this.
const arr2 = [
{letter: 'text1', no: 90},
{letter: 'text2', no: 90},
{letter: 'text3', no: 23},
{letter: 'text4', no: 42},
{letter: 'text5', no: 101},
{letter: 'text6', no: 10},
{letter: 'text7', no: 90},
{letter: 'text8', no: 90},
]
what I exactly want to make is, find the elements that arr1.no === arr2.no and add right after the p tag like this picture.
what I want;
So I coded like this,
arr1.map((c, i) => {
arr2.map((v, j) => {
if (c.no === v.no) {
test.innerText = 'this title has letter: ' + c.no;
}
})
})
I knew I have to make 2 maps to match those 2 arrays, but this does not work. all 'this title has letter' returns same number. Can anyone please let me know what I missed?
To achieve what you want to get, you can first map through arr1 array and display title and number, after this use filter on arr2 array to get the letters which has same number and map through the result and display the letters. You can see the code below for better understanding. It's quite easy.
export default function App() {
const arr1 = [
{ name: "AAA", no: 23 },
{ name: "BBB", no: 42 },
{ name: "CCC", no: 33 },
{ name: "DDD", no: 90 },
{ name: "EEE", no: 101 },
{ name: "FFF", no: 10 }
];
const arr2 = [
{ letter: "text1", no: 90 },
{ letter: "text2", no: 90 },
{ letter: "text3", no: 23 },
{ letter: "text4", no: 42 },
{ letter: "text5", no: 101 },
{ letter: "text6", no: 10 },
{ letter: "text7", no: 90 },
{ letter: "text8", no: 90 }
];
return (
<div>
{arr1.map((arr) => (
<div key={arr.name} style={{ border: "1px solid black",padding:"5px 10px", margin:"5px 0" }}>
<p>Title : {arr.name}</p>
<p>The title has number : {arr.no}</p>
{arr2
.filter((ar2) => ar2.no === arr.no)
.map((ar2) => (
<p key={ar2.letter}>The title has letter: {ar2.letter}</p>
))}
</div>
))}
</div>
);
}