Obtain the values from this JSON array

o = {
    "photos": {
        "page": 1,
        "pages": 46,
        "perpage": 5,
        "total": "230",
        "photo": [{
            "id": "6643924777",
            "owner": "34653895@N08",
            "secret": "3b7c2f6469",
            "server": "7153",
            "farm": 8,
            "title": "Huevos rellenos de bonito del norte Serrats",
            "ispublic": 1,
            "isfriend": 0,
            "isfamily": 0},
        {
            "id": "6371789575",
            "owner": "53643555@N08",
            "secret": "dda25093e0",
            "server": "6105",
            "farm": 7,
            "title": "ALBÓNDIGAS DE CARNE",
            "ispublic": 1,
            "isfriend": 0,
            "isfamily": 0},
        {
            "id": "6200723807",
            "owner": "17738873@N00",
            "secret": "bf4fc5c84f",
            "server": "6159",
            "farm": 7,
            "title": "albóndigas en salsa",
            "ispublic": 1,
            "isfriend": 0,
            "isfamily": 0},
        {
            "id": "6201239628",
            "owner": "17738873@N00",
            "secret": "def72cc124",
            "server": "6128",
            "farm": 7,
            "title": "albóndigas en salsa",
            "ispublic": 1,
            "isfriend": 0,
            "isfamily": 0},
        {
            "id": "6171324677",
            "owner": "34653895@N08",
            "secret": "9f7a7489f5",
            "server": "6161",
            "farm": 7,
            "title": "Pastel de patata con bonito del norte de Conservas Serrats y bechamel",
            "ispublic": 1,
            "isfriend": 0,
            "isfamily": 0}]}

}

This is the response from a flickr API query. I am attempting to process it as follows:

for (var key in o) {
    for (var key1 in o[key]) {
        var current = o[key][key1].id;
        console.log(key1);    //returns the pages information
        console.log(current); //returns null
    }    
}

Essentially, I need to generate image URLs in this format:

<img src="http://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}.jpg" />

Answer №1

for (let index = 0; index < o.images.data.length; index++) {
    let image = o.images.data[index];

    let picture = document.createElement('img');
    let source = 'http://farm' + image.farm + '.staticflickr.com/' + 
                  image.server + '/' + image.id + '_' + image.secret + '.jpg';
    picture.setAttribute('src', source);

    // Here we can manipulate the newly created image element
}

Check out this interactive demo.

Answer №2

Give it a shot

jQuery.getJSON() - Retrieve JSON-encoded information from the server by making a GET HTTP request.

or

jQuery.parseJSON - Extracts data from a properly structured JSON string and generates the corresponding JavaScript object

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining Mongoose query results in a for loop: A step-by-step guide

i am trying to combine the results of a mongoose query into a single JSON object. however, i am encountering an issue where i am passing an array to mongoose. specifically, the array looks like this: Modem Serial: [11111111111,nodata,3333333333333333] wh ...

Utilizing Ajax to serialize or transfer JSON objects

I have received a Json object and I am looking to extract the data using JavaScript. Specifically, I need help with looping through fields and extracting the data. def For_Sale_Listing(request,id): try: listing = Listing.objects.filter(pk=id) ...

Trick to enable editing in Bootstrap Select Combobox

Is there a way for users to add their own options to bootstrap-select? Greetings! I have spent some time searching for a straightforward solution that is compatible with Bootstrap 4 styling. Despite exploring various suggestions, as well as unresolved thr ...

AngularJS personalized date selector directive

Looking to create a unique datepicker directive with a personalized template. Feeling lost on where to begin constructing it... Any suggestions on incorporating date data into my directive? Your guidance or tips on how to approach this project more effe ...

Don't waste time creating multiple popups for changing content - streamline your process

Challenge I've successfully extracted information from an array and displayed it dynamically in a tooltip/popup window above each photo on the page. However, with 56 different individuals at various locations, arranging them neatly in a grid poses a ...

Tips on how to remove the first column from a jQuery hover effect

Currently, I have a function that enables hover events on a table. Right now, it excludes the header row but I also need it to exclude the first column. Any suggestions on how to do this? $(".GridViewStyle > tbody > tr:not(:has(table, th))") ...

What are the steps to verify if an iframe is lacking content?

I have two different codes: one is null and the other is not null. Code with null value (== empty): <div class="col-xs-6"> <iframe style="width:868px; height:550px;" id="FileReload" src="/Account/GetPDF?NUM=101"> <html> ...

Access specific keys and values within a JSON array using Ruby

I am just starting out with Ruby, and I have a Json array that looks like this: "elements": [ { "type": "Contact", "id": "1", "createdAt": "131231235", "name": "test", "updatedAt": "1 ...

Create XML or JSON files from a Yang model

Seeking a solution to generate sample XML/JSON data from the YANG model using Java. While there are tools available for creating sample XML from XSD, I am on the lookout for something similar in Java. I attempted to use Pyang, but encountered some limitat ...

ExpressJs res.json throwing error - Headers cannot be set after they have already been sent

In my current project using ExpressJS, I have a specific route set up like this: router.route('/monitor') .all(function (req, res, next) { next(); }).get(monitor.monitorServers); There is also a controller named 'monitor' which co ...

While attempting to use $scope.$apply() in Angular, I encountered a bug that

I have set up a specific example in a jsbin: http://jsbin.com/deqerelita/1/ Situation The concept is quite straightforward. You click a button, the controller adds to the model, and the view updates accordingly with a hidden input type="file". After the v ...

The CSRF token is mysteriously altering in places it should remain unchanged

Implementing the code below to prevent CSRF vulnerability if (!isset($_POST['_token'])) { $_SESSION['_token'] = bin2hex(random_bytes(20)); } I then use the token in hidden inputs named _token. In my main.js file, I include the foll ...

Steps to eliminate a choice from the MUI Datagrid Column Show/Hide feature

I am attempting to customize which columns are displayed on the <GridToolbarColumnsButton/> component within the MUI Datagrid toolbar (refer to the image below) https://i.stack.imgur.com/joZUg.jpg Potential solution: I have been exploring the AP ...

Create your masterpiece on a rotated canvas

My goal is to draw on a canvas using the mouse, even after rotating and scaling the canvas container. The issue I am facing is that the mouse coordinates get affected by the rotation and scaling, making it difficult to draw correctly. I have tried switch ...

Tips for aligning the dropdown menu to start from the border of the menu bar instead of displaying directly below the text

I have designed a menu-header section for my website, inspired by this image. I created a fiddle to showcase it. However, I am facing an issue where the dropdown elements for "PROGRAMS" and "WORLD OF NORTHMAN" should start from the border of the header ins ...

Searching for various object values within an array and then adding two properties together in JavaScript

I am working with an array of objects that require me to analyze two properties in order to calculate a value. let data = [ { NodeId: "9837f279", NodeName: "Node1", summary: { current: 50, limit: 75 ...

Adding JSON information into a .js file using ajax technology

I am currently working on integrating a calendar template into my system. In the demo JavaScript file, example events are structured like this: events: [ { id: 1, title: 'Title 1', start: ('2016-01-02'), ...

Troubleshoot: Unable to Change CSS on Click Using Javascript/jQuery

Having trouble creating three different buttons that toggle between various images using the CSS display property? Check out my code on https://jsfiddle.net/agt559e8/. function USradarChange1() { //document.getElementById("usradar1").src="weather/curr ...

What is the best way to attach information to a chart prior to the jquery dialog box appearing?

I am currently working on a web application that interacts with an Azure database. The goal is to create a graph based on user selections from a radio list and two inputted time parameters. The intention is to showcase this graph in a jQuery dialog box tha ...

Customizing alert message styles in Java script: Changing color and font of specific parts

I have been attempting to change a specific part of text to be bold and displayed in red color. Unfortunately, this does not seem to work on Microsoft Edge. Here is my code: alert("Hi how are you my friend"); The section that needs to be formatted: "fri ...