Петля для создания hrefs из строк в массиве javascript

Я пытаюсь динамически создавать ссылки href внутри всплывающих окон Mapbox. При наведении курсора на место, я вернулся массив, например:Петля для создания hrefs из строк в массиве javascript

"Feature","properties":{"field_1":71,"city":"Gothenburg", 
"course1":"EMM-Nano","course2":"EMHRPP","course3" 
:"MFAMILY","course4":"NA","course5":"NA","course6":"NA", 
"course7":"NA","course8":"NA","course9":"NA","course10":"NA", 
"course11":"NA","course12":"NA","course13":"NA","course14":"NA", 
"course15":"NA","course16":"NA","lon":11.97456,"lat":57.70887, 
"website1":"http://www.emm-nano.org/", 
"website2":"http://ws1.roehampton.ac.uk/admissions/erasmusmundus/hrp/index.html", 
"website3":"http://www.mfamily.eu/", 
"website4":"NA","website5":"NA","website6":"NA", 
"website7":"NA","website8":"NA","website9":"NA", 
"website10":"NA","website11":"NA","website12":"NA", 
"website13":"NA","website14":"NA","website15":"NA", 
"website16":"NA","code":"Gothenburg","title":"Gothenburg"

Как вы можете видеть, URLs, которые будут служить в качестве HREF являются строками внутри массива. Каждый course подключен к website, так что course1 должен быть связан с website1, course2 должен быть связан с website2 и т. Д. На данный момент, мои всплывающие окна только дисплей курсы и ссылки отдельно, например:

со следующим кодом, чтобы удалить NA и другие нежелательные значения:

var feature = features[0]; 
    function htmlFromProps(props) { 
    var html = ""; 
    var i = 0; 
    for (p in props) { 
     if (props[p] && props[p] != "null" && props[p] != "NA") { 
     html += "<div>" + (i === 0 ? "<strong>" : ""); 
     html += props[p]; 
     html += (i++ === 0 ? "</strong>" : "") + "</div>\n"; 
     } 
    } 
    return html; 
    } 

//delete unnecessary elements* 
    delete feature.properties["field_1"]; 
    delete feature.properties["lon"]; 
     delete feature.properties["lat"]; 
     delete feature.properties["code"]; 
     delete feature.properties["title"]; 
    // Populate the popup and set its coordinates 
    // based on the feature found. 
    popup.setLngLat(feature.geometry.coordinates) 
     .setHTML(htmlFromProps(feature.properties)) 
     .addTo(map); 

}

Это работает, но ссылки не привязаны к именам course. Мне интересно показывать только имена курсов, которые включают href. Есть ли программный способ обойти это в JS без использования CSS? Я исследовал несколько примеров как this one, но он не применим к структуре, как сейчас. Любые советы о том, как решить эту проблему, будут оценены.

источник

2017-01-16 the_darkside

разбирает свойства в курс и веб-сайт массивов, а затем обработать их, чтобы соответствовать их.

Ниже приведен пример:

var properties = { 
 
    "city": "Gothenburg", 
 
    "course1": "EMM-Nano", 
 
    "course2": "EMHRPP", 
 
    "course3": "MFAMILY", 
 
    "course4": "NA", 
 
    "course5": "NA", 
 
    "course6": "Course6", 
 
    "course7": "Course7", 
 
    "course8": "Course8", 
 
    "course9": "Course9", 
 
    "course10": "Course10", 
 
    "course11": "Course11", 
 
    "course12": "Course12", 
 
    "course13": "Course13", 
 
    "course14": "Course14", 
 
    "course15": "Course15", 
 
    "course16": "Course16", 
 
    "course17": "Course17", 
 
    "course18": "Course18", 
 
    "course19": "Course19", 
 
    "course20": "Course20", 
 
    "course21": "Course21", 
 
    "website1": "url1", 
 
    "website2": "url2", 
 
    "website3": "url3", 
 
    "website4": "NA", 
 
    "website5": "NA", 
 
    "website6": "url6", 
 
    "website7": "url7", 
 
    "website8": "url8", 
 
    "website9": "url9", 
 
    "website10": "url10", 
 
    "website11": "url11", 
 
    "website12": "url12", 
 
    "website13": "url13", 
 
    "website14": "url14", 
 
    "website15": "url15", 
 
    "website16": "url16", 
 
    "website17": "url17", 
 
    "website18": "url18", 
 
    "website19": "url19", 
 
    "website20": "url20", 
 
    "website21": "url21", 
 
}; 
 

 

 
alert("Output:" + htmlFromProps(properties)); 
 

 
function htmlFromProps(props) { 
 
    var city = ""; 
 
    var courses = []; 
 
    var websites = []; 
 
    for (p in props) { 
 
    if (props[p] && props[p] != "null" && props[p] != "NA") { 
 
     if (isCourse(p)) { 
 
     courses[getIndex(p)] = props[p]; 
 
     } else if (isWebsite(p)) { 
 
     websites[getIndex(p)] = props[p]; 
 
     } else { 
 
     city = props[p]; 
 
     } 
 
    } 
 
    } 
 
    return buildHTML(city, courses, websites); 
 
} 
 

 
function isCourse(propname) { 
 
    return (propname.indexOf("course") != -1); 
 
} 
 

 
function isWebsite(propname) { 
 
    return (propname.indexOf("website") != -1); 
 
} 
 

 
function getIndex(propname) { 
 
    var indexRegEx = new RegExp("^.*?(\\d+)$"); 
 
    var matches = indexRegEx.exec(propname); 
 
    if ((matches != null) && (matches.length == 2)) { 
 
    return parseInt(matches[1]); 
 
    } else { 
 
    return 0; 
 
    } 
 
} 
 

 
function buildHTML(city, courses, websites) { 
 
    var html = ""; 
 
    html += "<div><strong>"; 
 
    html += city; 
 
    html += "</strong></div>\n"; 
 

 
    for (i = 1; i < courses.length; i++) { 
 
    if (courses[i]) { 
 
     html += "<div>"; 
 
     html += "<a href='" + websites[i] + "'>" + courses[i] + "</a>"; 
 
     html += "</div>\n"; 
 
    } 
 
    } 
 
    return html; 
 
}

Просто игнорируйте свойства Var и предупреждающее заявление в верхней части этого фрагмента и заменить htmlFromProps() функцию с оригиналом и добавить все остальные функции в этом фрагменте ниже htmlFromProps() для вашего кода.

источник

2017-01-16 08:28:11 Glenn

Спасибо, это имеет смысл. Есть ли способ поставить ': url' в href? Нужно было бы затем проливать новый массив на ':'? –

href привязан к buildHTML. Это можно изменить любым способом, необходимым для создания требуемого HTML. Ответ был изменен для добавления тега href. – Glenn

По какой-то причине код работает некорректно, если у меня более 10 различных курсов и веб-сайтов. Например, если у меня есть 15 курсов, он будет показывать только «курс11», «курс12», «курс13», «курс14» и «курс15», но не первый. 10. Если у меня есть 20 курсов, это будет покажите 'курс11' -' course19' и пропустите 'курс20', а также первую десятку. Есть ли способ исправить это? –

var html = getHtml() 
 
console.log(html) 
 
document.write(html) 
 
function getHtml(){ 
 
    var links = getLinks(getData()) 
 
    return links.map((x)=>{ 
 
    return `<a href="${x.website}">${x.course}</a>` 
 
    }).join(",\n") 
 
} 
 

 
function getLinks(data){ 
 
    return Object.keys(data).reduce((last,x)=>{ 
 
    if (/course(\d+)/.test(x)){ 
 
     var websiteKey = 'website'+RegExp.$1 
 
     if(data[x] != 'NA' && data[websiteKey] && data[websiteKey]!='NA'){ 
 
     last.push({ 
 
      course:data[x], 
 
      website:data[websiteKey].replace('http: //','http://') 
 
     }) 
 
     } 
 
    } 
 
    return last 
 
    },[]) 
 
} 
 

 
function getData(){ 
 
    return { 
 
    "field_1": 71, 
 
    "city": "Gothenburg", 
 
    "course1": "EMM-Nano", 
 
    "course2": "EMHRPP", 
 
    "course3": "MFAMILY", 
 
    "course4": "NA", 
 
    "course5": "NA", 
 
    "course6": "NA", 
 
    "course7": "NA", 
 
    "course8": "NA", 
 
    "course9": "NA", 
 
    "course10": "NA", 
 
    "course11": "NA", 
 
    "course12": "NA", 
 
    "course13": "NA", 
 
    "course14": "NA", 
 
    "course15": "NA", 
 
    "course16": "NA", 
 
    "lon": 11.97456, 
 
    "lat": 57.70887, 
 
    "website1": "http: //www.emm-nano.org/", 
 
    "website2": "http: //ws1.roehampton.ac.uk/admissions/erasmusmundus/hrp/index.html", 
 
    "website3": "http: //www.mfamily.eu/", 
 
    "website4": "NA", 
 
    "website5": "NA", 
 
    "website6": "NA", 
 
    "website7": "NA", 
 
    "website8": "NA", 
 
    "website9": "NA", 
 
    "website10": "NA", 
 
    "website11": "NA", 
 
    "website12": "NA", 
 
    "website13": "NA", 
 
    "website14": "NA", 
 
    "website15": "NA", 
 
    "website16": "NA", 
 
    "code": "Gothenburg", 
 
    "title": "Gothenburg" 
 
}}

источник

2017-01-16 08:15:46

Благодарим вас за это. Как избавиться от пространства между 'http:' и '//'? –

обновлено, просто замените, вы можете найти способ для своего собственного –

Спасибо, любая идея, почему я получаю 'Uncaught ReferenceError: getData не определен'? –

Петля для создания hrefs из строк в массиве javascript

ответ

Смежные вопросы