Merge Array data using key as condition

Modification points:

• In your script, arr1.indexOf(arr2[i].id) is always -1. Because each element of arr1 is an object. In this case, indexOf cannot be directly used. So in this case, arr2 is copied to arr3. And, the values of arr1 are not used. I think that this might be the reason of your issue.
• In your question, you say that you want var arr3 = [{id=1, text=1}, {id=2, text=2}, {id=3, text=3}, {id=4, text=4}]. But in your script, it seems that the key is changed from text to stars like stars: arr2[i].text.

When above points are reflected to your script, it becomes as follows.

Modified script 1:

In this modified script, the values of arr2 is merged to arr1.

var arr1 = [{ id: 1, text: 1 }, { id: 3, text: 3 }];
var arr2 = [{ id: 1, text: 1 }, { id: 2, text: 2 }, { id: 4, text: 4 }];

for (var i = 0; i < arr2.length; i++) {
  if (!arr1.some(({id}) => id == arr2[i].id)) {
    arr1.push({id: arr2[i].id, text: arr2[i].text});
  }
}
arr1.sort((a, b) => a.id > b.id ? 1 : -1);
console.log(arr1)

• If arr1.sort((a, b) => a.id > b.id ? 1 : -1); is removed, the result array is not sorted as the ID.

Modified script 2:

As other sample script, how about the following script? In this modified script, the values of arr2 and arr2 are merged and removed the duplicated values.

var arr1 = [{ id: 1, text: 1 }, { id: 3, text: 3 }];
var arr2 = [{ id: 1, text: 1 }, { id: 2, text: 2 }, { id: 4, text: 4 }];

var arr3 = [...arr1, ...arr2].reduce((ar, e) => {
  if (!ar.some(({id}) => id == e.id)) ar.push(e);
  return ar;
}, []).sort((a, b) => a.id > b.id ? 1 : -1);
console.log(arr3)

References:

• some()
• reduce()