Extract information from a JSON object and incorporate it into an AngularJS application

I'm struggling to extract specific data from a JSON object.

While I can successfully retrieve data located outside the brackets, I am unable to access any information from within them.

My goal is to extract the "summonerName" field below:

  "gameId": 2016761444,
  "mapId": 11,
  "gameMode": "CLASSIC",
  "gameType": "MATCHED_GAME",
  "gameQueueConfigId": 4,
  "participants": [
    {
      "teamId": 100,
      "spell1Id": 4,
      "spell2Id": 12,
      "championId": 57,
      "profileIconId": 615,
      "summonerName": "Wolves Weekend",
      "bot": false,
      "summonerId": 22951400,
      ]
    },

There are a total of 9 other 'participants' objects.

This is my current approach:

div(ng-repeat='data in info.display')
            p(ng-model='info.IdBox') {{data.id}}
            p Level: {{data.summonerLevel}}
            p Champion: {{data.championId}}
            {{info.matchInfo}}
    ul
        div(ng-repeat='participant in info.matchInfo')
            p Name: {{matchInfo.participants[participant].summonerName}}

While basic calls work without issue...

Any suggestions?

Appreciate your help~

javascriptjsonangularjs

Answer №1

Initially, the JSON format is incorrect within the participants segment.

Here's an illustration of your current JSON:

  "participants": [
    {
      "teamId": 100,
      "spell1Id": 4,
      "spell2Id": 12,
      "championId": 57,
      "profileIconId": 615,
      "summonerName": "Wolves Weekend",
      "bot": false,
      "summonerId": 22951400, //There is an extra semicolon and a missing curly brace.
      ]
    }
}

It should appear as follows:

{
    "gameId": 2016761444,
    "mapId": 11,
    "gameMode": "CLASSIC",
    "gameType": "MATCHED_GAME",
    "gameQueueConfigId": 4,
    "participants": [
        {
            "teamId": 100,
            "spell1Id": 4,
            "spell2Id": 12,
            "championId": 57,
            "profileIconId": 615,
            "summonerName": "Wolves Weekend",
            "bot": false,
            "summonerId": 22951400
        }
    ]
}

Note that you have placed the desired data inside an object encompassing an array. To access the specific item in the array you wish to retrieve from, specify the key you intend to read from.

To extract the information from the child object within the array, indicate the index of the array item you want to access.

var jsonObject = 'yourJsonDataWouldBeHere...';
var mySelectedField = jsonObject.participants[1].summonerId;

An example showcasing how your existing code functions:

var app = angular.module("MyApp", []);

app.controller("MyCtrl", function($scope){

  $scope.jsonData = {
    "gameId": 2016761444,
    "mapId": 11,
    "gameMode": "CLASSIC",
    "gameType": "MATCHED_GAME",
    "gameQueueConfigId": 4,
    "participants": [
           {
                "teamId": 100,
                "spell1Id": 4,
                "spell2Id": 12,
                "championId": 57,
                "profileIconId": 615,
                "summonerName": "Wolves Weekend",
                "bot": false,
                "summonerId": 22951400
            },
         {
                "teamId": 101,
                "spell1Id": 5,
                "spell2Id": 13,
                "championId": 58,
                "profileIconId": 616,
                "summonerName": "Bear Something",
                "bot": false,
                "summonerId": 22951400
            }
    ]
};

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyApp">
  <div ng-controller="MyCtrl">
    
    <!--I'm accessing the ARRAY directly...-->
    <ul ng-repeat="item in jsonData.participants">
      <li>{{item.summonerName}}</li>
    </ul>
    
  </div>
</div>

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

Executing Jquery ajax based on specific key inputs

I've developed a script that transmits data from an input to a script every time a keyup event occurs. The issue is that it sends a request for every key press, even unnecessary ones like arrow keys. Is there a way to prevent these unnecessary request ...

javascriptjqueryajax

Angular2 Event:keyup triggers the input to lose focus

I am working on a component with an input element that is bound to a property. I want the input field to update in real time as I type in it. Here is my current code: <input type="text" #updatetext [value]="item.name" (keyup)="updateItem(item.$key, up ...

javascripteventsangularangular2-template

React: Struggling to retrieve specific elements from an array stored in component state

For a fun side project, I've taken on the challenge of creating a miniature Pokedex app using React. import React, { Component} from 'react'; import './App.css'; import Card from './components/card/Card.component'; clas ...

javascriptreactjs

Setting up vue-resource root and authentication configuration

Currently, I am reviewing the documentation for vue-resource that outlines how to configure it: https://github.com/vuejs/vue-resource/blob/master/docs/config.md The documentation specifies setting headers with a common authorization value: Vue.http.hea ...

javascriptvue.jsvue-resource

Assigning value to a member variable in a TypeScript Angular class

Currently, I am in the process of learning Angular. To enhance my skills, I am developing a simple web application using Angular and Spring Boot. One challenge I encountered is assigning a variable to the member variable of a Class. import { Injectable } f ...

javascriptangulartypescript

Tips for utilizing process.stdin in Node.js with Javascript?

Currently, I'm developing a Javascript-based poker game that is designed to process standard input in the following manner: https://i.stack.imgur.com/D1u15.png The initial line of input will consist of an integer indicating the total number of playe ...

javascriptnode.jsprocessstdin

Mastering the Rejection of Promises in Javascript with Graceful Elegance

One effective pattern using ES2017 async/await involves: async function () { try { var result = await some_promised_value() } catch (err) { console.log(`This block will be processed in a reject() callback with promise patterns, which is far mo ...

javascriptnode.jsasynchronousasync-awaites6-promise

Errors occur when dealing with higher order functions, such as the "map is

Struggling with higher order functions in JavaScript - I keep running into the error 'map is undefined'. Anyone able to offer some assistance? function mapper(f) { return function(a) { return map(a, f); }; } var increment = function(x) { re ...

javascripthtml

- **Rewrite** this text to be unique:- **Bold

Check out this relevant jsFiddle link Below is a list where I aim to make all occurrences of the word 'Bold' bold: <ul id = "list"> <li>Make this word Bold</li> <li>Bold this as well</li> <ul> ...

javascriptjquery

Executing a Knockout.js destructive loop in a foreach fashion

Here is the HTML code with the data-bind elements: div data-bind="foreach: clientRequests" id="test2"> <div class="list-group" > <a href="#" class="list-group-item active"><b data-bind="text: client"></b& ...

javascriptarraysknockout.js

Clone the "big" div element and insert data within it

Is there a way to dynamically generate div elements while looping through a JSON array? I have various data items that I need to display in separate thumbnails within a row. I am looking for a template structure like the following: for(var i = 0; i < ...

javascripthtmlangularjs

Using JQuery to duplicate text and insert it into a textarea

Looking for a more efficient way to achieve the same functionality with my JavaScript function. Currently, it copies text from a hidden span and inserts it into a textarea on a website after a few clicks. Any ideas on how to streamline this process? It&apo ...

javascriptjquery

Gaining entry to a JavaScript prototype method

I'm currently working on a prototype function called event. Prototype Func("input_element_id").event("keyup",function(){ alert("Works on keyup in an Input!"); } Func.prototype= { keyup: function(func){ //adding event listener and c ...

javascriptfunctioninputprototype

Trying out an Angular directive using a Jade-templateURL combo

My web application is built using Node.js with Express and Jade, along with AngularJS. When developing directives, I typically include the HTML directly in the template of the directive definition. However, for a new directive that requires a very long HTM ...

angularjsangularjs-directivepugkarma-runnerkarma-mocha

Manipulate the value(s) of a multi-select form field

How can you effectively manage multiple selections in a form field like the one below and manipulate the selected options? <select class="items" multiple="multiple" size="5"> <option value="apple">apple</option> <option va ...

javascriptjqueryhtmlforms

React - while the get request successfully retrieves the desired object, the corresponding value is appearing as undefined when integrated into the React component

While working on a practice problem, I encountered a puzzling situation. When I console log the response body of my GET request, it shows that I am successfully fetching the correct object. However, when I log the object in the component where the GET requ ...

javascriptreactjs

Learn how to use Cocos2d 2.1.4 to load text, strings, and JSON in HTML

Struggling to upload a large string to my project to use as a matrix, I've run into issues trying to load a text file or json into my HTML5 project. While I've seen it can be done in 3.0 using cocos2d, I'm wondering if there's a way to ...

javascriptjsonloadingcocos2d-js

Find the total duration of all items within an array by utilizing the Moment.js library

Within an array of objects, each object contains a field named "duration" that represents a string. Here is an example of one such object: { id: 14070 project: {id: 87, name: "Test project for time tracking"} issue: {id: 10940} user: {id ...

javascripttypescriptmomentjs

Vue: The computed property cannot be set

I'm having trouble with utilizing computed properties and ajax calls in Vue.js. The "filterFactories" variable stores a list of factories. A computed property named "filterFactories" generates this list of factories. Now, I am looking to implement a ...

javascriptvue.jsvuejs2computed-properties

Obtain an array of desired values using the d3.nest() function in D3JS

After using d3.nest() to categorize my data, I ran into an issue. d3.nest() .key(function(d) { return d[indexCateCol]; }) .entries(irisData);` I'm now wondering how I can create an array of values from a specific attribute that interests me. ...

javascriptarraysd3.js