html – How to create a list and anchor based on json object in jquery

you need to loop through the target product array and append each item to li

$( document ).ready(function() {
        var listArray = [
      {
        message: "Total qty of SpO2 Connection Cables (JL-900P) are less than total qty of Bedsides",
        type: "HARD",
        targetProducts: [
          "BR-903PA",
          "BR-903PB",
          "BR-903PC"
        ]
      },
      {
        message: "Total qty of SpO2 Connection Cables (JL-900P) are less than total qty of Bedsides",
        type: "SOFT",
        targetProducts: [
          "AE-918P"
        ]
      },
      {
        message: "Total qty of SpO2 Connection Cables (JL-900P) are less than total qty of Bedsides",
        type: "SOFT",
        targetProducts: [
          "A/10-1600-030",
          "A/11-CA-403-12"
        ]
      },
      {
        message: "Total qty of SpO2 Connection Cables (JL-900P) are less than total qty of Bedsides",
        type: "HARD",
        targetProducts: [
          "A/2289PA"
        ]
      }
    ];
    let listUL = $('<ul>');
     listArray.filter((item)=>{
    var li=$('<li>'+item.message+'</li>')
    listUL.append(li);
       item.targetProducts.forEach(function(val){
       
       li.append('<a href="#" onclick="clicked(event)">'+val+'</a>,')
       
       })
    })
    $('#custom-list').append(listUL);
    
    });