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.

enter image description here

what I want;

1. if arr2 has not number corresponding to arr1, then go on the next one
2. if arr2 has multiple elements to one of arr1's no, then it should be added right behind the p tag.

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?

CodePudding user response：

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