मैं विकिपीडिया से छवि URL प्राप्त करने का प्रयास कर रहा हूं, यदि वे मौजूद हैं, तो शर्तों की सूची के आधार पर। एपीआई कॉल तब काम करता है जब मैं सिर्फ एक बार कॉल करता हूं, लेकिन एक बार जब यह लूप के लिए होता है, तो यह परिणाम को img src= पर सेट नहीं करता है। अगर मैं alert() में डालता हूं और इसे धीमा कर देता हूं, तो निश्चित रूप से इसे यूआरएल मिल रहा है।

मैंने प्रदर्शित करने के लिए एक कोडपेन बनाया: https://codepen.io/justiceorjustus/pen/aeOEvW

अंततः, इसे छवि URL प्राप्त करना चाहिए और फिर इसे आईडी के आधार पर छवि स्रोत पर सेट करना चाहिए।

जावास्क्रिप्ट:

var wikiImageURLs = ["blueweed",
"buttercup_annual",
"horseweed_(marestail)",
"lambsquarters_common",
"ragweed_common",
"spurge_thyme-leaf",
"bedstraw_annual",
"bluebur",
"burdock",
"clover_white_sweet",
"clover_bur",
"cocklebur",
"croton_wooly",
"dogbane_hemp",
"ironweed_tall",
"lettuce_wild",
"mustard_tanzy",
"radish_wild",
"ragwort_tanzy",
"shepherds_purse",
"amaranth_spiny",
"buttercup_tall",
"chickweed_mouseear",
"clover_white",
"Dandelion",
"dock_curly",
"galinsoga_hairy",
"goatsbeard",
"henbit",
"ironweed_western",
"ivy_ground",
"kochia",
"lespedeze",
"oxalis",
"pennycress_field",
"pepperweed_field",
"pigweed_redroot",
"plantain_broadleaf",
"plantain_narrow-leaf",
"purslane_annual",
"sneezeweed_bitter",
"sowthistle_annual",
"sunflower",
"thistle_Russian",
"vetch",
"violet_wild",
"wormwood_biennial",
"yellow_rocket",
"bindweed_field",
"carrot_wild",
"chicory",
"cinquefoil",
"dogfennel",
"fleabane_annual",
"goldenrod",
"horsenettle",
"kudzu",
"marshelder",
"milkweed",
"pepperweed_perennial",
"pokeweed",
"sesbania_hemp",
"sowthistle_perennial",
"spurge_leafy",
"thistle_bull",
"thistle_Canada",
"thistle_musk_(nodding)",
    "yarrow"];

$(function () {
    $(document).ready(function () {

        for (var i = 0; i < wikiImageURLs.length; i++)
        {
             fetch('https://en.wikipedia.org/api/rest_v1/page/summary/' + wikiImageURLs[i])
                 .then(response => {
                    if(response.ok) return response.json();
                    throw new Error(response.statusText);
                 })
                 .then(function handleData(data) {
                     var wikiImageURL = data.thumbnail.source.replace("320px", "262px");
                     //alert(wikiImageURL);
                    document.getElementById(wikiImageURLs[i]).src = wikiImageURL;
                 })
                 .catch(function handleError(error) {

            });
        }
    });
});

एचटीएमएल:

<div>
            <img id="blueweed" /> blueweed
        </div>
        <div>
            <img id="buttercup_annual" /> buttercup, annual
        </div>
        <div>
            <img id="horseweed_(marestail)" /> horseweed, (marestail)
        </div>
        <div>
            <img id="lambsquarters_common" /> lambsquarters, common
        </div>
        <div>
            <img id="ragweed_common" /> ragweed, common
        </div>
        <div>
            <img id="spurge_thyme-leaf" /> spurge, thyme-leaf
        </div>
        <div>
            <img id="bedstraw_annual" /> bedstraw, annual
        </div>
        <div>
            <img id="bluebur" /> bluebur
        </div>
        <div>
            <img id="burdock" /> burdock
        </div>
        <div>
            <img id="clover_white_sweet" /> clover, white sweet
        </div>
        <div>
            <img id="clover_bur" /> clover, bur
        </div>
        <div>
            <img id="cocklebur" /> cocklebur
        </div>
        <div>
            <img id="croton_wooly" /> croton, wooly
        </div>
        <div>
            <img id="dogbane_hemp" /> dogbane, hemp
        </div>
        <div>
            <img id="ironweed_tall" /> ironweed, tall
        </div>
        <div>
            <img id="lettuce_wild" /> lettuce, wild
        </div>
        <div>
            <img id="mustard_tanzy" /> mustard, tanzy
        </div>
        <div>
            <img id="radish_wild" /> radish, wild
        </div>
        <div>
            <img id="ragwort_tanzy" /> ragwort, tanzy
        </div>
        <div>
            <img id="shepherd&#39;s_purse" /> shepherd&#39;s purse
        </div>
        <div>
            <img id="amaranth_spiny" /> amaranth, spiny
        </div>
        <div>
            <img id="buttercup_tall" /> buttercup, tall
        </div>
        <div>
            <img id="chickweed_mouseear" /> chickweed, mouseear
        </div>
        <div>
            <img id="clover_white" /> clover, white
        </div>
        <div>
            <img id="Dandelion" /> Dandelion
        </div>
        <div>
            <img id="dock_curly" /> dock, curly
        </div>
        <div>
            <img id="galinsoga_hairy" /> galinsoga, hairy
        </div>
        <div>
            <img id="goatsbeard" /> goatsbeard
        </div>
        <div>
            <img id="henbit" /> henbit
        </div>
        <div>
            <img id="ironweed_western" /> ironweed, western
        </div>
        <div>
            <img id="ivy_ground" /> ivy, ground
        </div>
        <div>
            <img id="kochia" /> kochia
        </div>
        <div>
            <img id="lespedeze" /> lespedeze
        </div>
        <div>
            <img id="oxalis" /> oxalis
        </div>
        <div>
            <img id="pennycress_field" /> pennycress, field
        </div>
        <div>
            <img id="pepperweed_field" /> pepperweed, field
        </div>
        <div>
            <img id="pigweed_redroot" /> pigweed, redroot
        </div>
        <div>
            <img id="plantain_broadleaf" /> plantain, broadleaf
        </div>
        <div>
            <img id="plantain_narrow-leaf" /> plantain, narrow-leaf
        </div>
        <div>
            <img id="purslane_annual" /> purslane, annual
        </div>
        <div>
            <img id="sneezeweed_bitter" /> sneezeweed, bitter
        </div>
        <div>
            <img id="sowthistle_annual" /> sowthistle, annual
        </div>
        <div>
            <img id="sunflower" /> sunflower
        </div>
        <div>
            <img id="thistle_Russian" /> thistle, Russian
        </div>
        <div>
            <img id="vetch" /> vetch
        </div>
        <div>
            <img id="violet_wild" /> violet, wild
        </div>
        <div>
            <img id="wormwood_biennial" /> wormwood, biennial
        </div>
        <div>
            <img id="yellow_rocket" /> yellow rocket
        </div>
        <div>
            <img id="bindweed_field" /> bindweed, field
        </div>
        <div>
            <img id="carrot_wild" /> carrot, wild
        </div>
        <div>
            <img id="chicory" /> chicory
        </div>
        <div>
            <img id="cinquefoil" /> cinquefoil
        </div>
        <div>
            <img id="dogfennel" /> dogfennel
        </div>
        <div>
            <img id="fleabane_annual" /> fleabane, annual
        </div>
        <div>
            <img id="goldenrod" /> goldenrod
        </div>
        <div>
            <img id="horsenettle" /> horsenettle
        </div>
        <div>
            <img id="kudzu" /> kudzu
        </div>
        <div>
            <img id="marshelder" /> marshelder
        </div>
        <div>
            <img id="milkweed" /> milkweed
        </div>
        <div>
            <img id="pepperweed_perennial" /> pepperweed, perennial
        </div>
        <div>
            <img id="pokeweed" /> pokeweed
        </div>
        <div>
            <img id="sesbania_hemp" /> sesbania, hemp
        </div>
        <div>
            <img id="sowthistle_perennial" /> sowthistle, perennial
        </div>
        <div>
            <img id="spurge_leafy" /> spurge, leafy
        </div>
        <div>
            <img id="thistle_bull" /> thistle, bull
        </div>
        <div>
            <img id="thistle_Canada" /> thistle, Canada
        </div>
        <div>
            <img id="thistle_musk_(nodding)" /> thistle, musk (nodding)
        </div>
        <div>
            <img id="yarrow" /> yarrow
        </div>

मैं एसिंक अनुरोधों के साथ वास्तव में अच्छा नहीं हूं, इसलिए मुझे लगता है कि समस्या कुछ गूंगा हो सकती है।

0
justiceorjustus 21 जुलाई 2019, 04:16

2 जवाब

सबसे बढ़िया उत्तर

इस मामले में मैं रिकर्सन को रिपीट लूप के रूप में उपयोग करने की सलाह देता हूं, क्योंकि इस तरह, अगली क्वेरी केवल तभी होगी जब पिछली क्वेरी समाप्त हो गई हो और इसलिए आपका ब्राउज़र हैंग नहीं होगा। उदाहरण:

    var wikiImageURLs = [
      "blueweed",
      "buttercup_annual",
      "horseweed_(marestail)",
      "lambsquarters",
      "ragweed",
      "spurge_thyme-leaf",
      "bedstraw_annual",
      "bluebur",
      "burdock",
      "clover_white_sweet",
      "clover_bur",
      "cocklebur",
      "croton_wooly",
      "dogbane_hemp",
      "ironweed_tall",
      "lettuce_wild",
      "mustard_tanzy",
      "radish_wild",
      "ragwort_tanzy",
      "shepherds_purse",
      "amaranth_spiny",
      "buttercup_tall",
      "chickweed_mouseear",
      "clover_white",
      "Dandelion",
      "dock_curly",
      "galinsoga_hairy",
      "goatsbeard",
      "henbit",
      "ironweed_western",
      "ivy_ground",
      "kochia",
      "lespedeze",
      "oxalis",
      "pennycress_field",
      "pepperweed_field",
      "pigweed_redroot",
      "plantain_broadleaf",
      "plantain_narrow-leaf",
      "purslane_annual",
      "sneezeweed_bitter",
      "sowthistle_annual",
      "sunflower",
      "thistle_Russian",
      "vetch",
      "violet_wild",
      "wormwood_biennial",
      "yellow_rocket",
      "bindweed_field",
      "carrot_wild",
      "chicory",
      "cinquefoil",
      "dogfennel",
      "fleabane_annual",
      "goldenrod",
      "horsenettle",
      "kudzu",
      "marshelder",
      "milkweed",
      "pepperweed_perennial",
      "pokeweed",
      "sesbania_hemp",
      "sowthistle_perennial",
      "spurge_leafy",
      "thistle_bull",
      "thistle_Canada",
      "thistle_musk_(nodding)",
      "yarrow"
    ];

    function fetchWikipedia(counter) {
      if (counter < wikiImageURLs.length) {
        fetch('https://en.wikipedia.org/api/rest_v1/page/summary/' + wikiImageURLs[counter])
            .then(response => {
                if (response.ok)
                  return response.json();
                  throw new Error(response.statusText);
            })
            .then(function handleData(data) {
                if (data.thumbnail) { //I added this line, cause sometimes the query doesn't come with the thumbnail attribute 
                  var wikiImageURL = data.thumbnail.source.replace("320px", "262px");
                  document.getElementById(wikiImageURLs[counter]).src = wikiImageURL;
                }
                fetchWikipedia(counter + 1);
            })
            .catch(function handleError(error) {
                fetchWikipedia(counter + 1);
            });
       }
    }

    $(function () {
      $(document).ready(function () {
        fetchWikipedia(0);//value initial of counter
      });
    });
1
Carlos Fernando 21 जुलाई 2019, 07:06

उस मार्ग की प्रतिक्रिया में कोई छवि URL नहीं है, साथ ही आपके पास सरणी में कुछ आईडी हैं जो टेम्पलेट में मौजूद नहीं हैं, और आपके पास अनावश्यक जंजीर वादा है। नीचे दिया गया कोड काम करता है लेकिन मैंने एक यादृच्छिक छवि यूआरएल को हार्डकोड किया है। एक बार जब आपको एक नया एपीआई मार्ग मिल गया जो छवि यूआरएल लौटाता है, तो आप बस इस कोड को संपादित कर सकते हैं।

var wikiImageURLs = ["blueweed"];

        for (let i = 0; i < wikiImageURLs.length; i++)
        {
             console.log(wikiImageURLs[i])
             fetch('https://en.wikipedia.org/api/rest_v1/page/summary/' + wikiImageURLs[i]).then(response =>          {
                 console.log(response)
                 document.getElementById(wikiImageURLs[i]).src = 'https://i.imgur.com/4rj27vq.jpg?1';
             }).catch(err=>console.log(err));
        }
0
DedaDev 21 जुलाई 2019, 04:47